ServiceWorker实现离线应用教程

你在学习文章相关的知识吗？本文《Service Worker实现离线应用：PWA实战教程》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

Service Worker是PWA离线核心，通过注册sw.js实现。先缓存静态资源确保离线访问，再拦截fetch请求优先返回缓存，最后更新版本时清理旧缓存，配合manifest.json和HTTPS使Web应用具备原生体验。

要实现一个离线可用的PWA（渐进式Web应用），Service Worker 是核心机制。它是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源并提供离线访问能力。

注册 Service Worker

在页面加载时注册 Service Worker，告诉浏览器启用该服务。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker 注册成功:', registration.scope);
      })
      .catch(error => {
        console.log('Service Worker 注册失败:', error);
      });
  });
}

这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后注册 sw.js 文件作为服务工作线程。

缓存静态资源

在 sw.js 中监听 install 事件，预缓存关键资源，如 HTML、CSS、JS、图片等，确保离线时仍可访问。

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

当 Service Worker 安装时，会打开指定缓存并添加所有资源。若任一文件下载失败，安装将失败，保证缓存完整性。

拦截请求并返回缓存内容

通过监听 fetch 事件，判断资源是否已缓存，优先从缓存中返回，否则发起网络请求。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

这个策略称为“缓存优先”，适合静态资源。对于动态内容，可采用“网络优先”或“缓存优先+后台更新”等策略。

更新缓存版本

当应用更新时，需升级缓存。通过更改 CACHE_NAME 并在 activate 事件中清理旧缓存实现。

const CACHE_NAME = 'my-pwa-cache-v2'; // 版本更新

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

activate 事件在新 Service Worker 激活时触发，清除不再需要的旧缓存，避免占用用户存储空间。

基本上就这些。配合 manifest.json 和 HTTPS 环境，你的 Web 应用就能像原生应用一样离线运行、添加到主屏幕，真正成为 PWA。关键是合理设计缓存策略，保障用户体验一致性。

以上就是《ServiceWorker实现离线应用教程》的详细内容，更多关于离线应用的资料请关注golang学习网公众号！