Service Worker 可拦截 fetch 请求实现缓存与离线访问，需 HTTPS 环境注册；通过 install 预缓存、fetch 事件按策略响应（HTML 缓存优先+网络回退，静态资源缓存优先+后台更新），并处理离线 fallback 与缓存版本更新。

Service Worker 可以在浏览器后台拦截页面发出的 fetch 请求，从而实现资源缓存与离线访问。关键在于注册 Service Worker、监听 fetch 事件，并在其中自定义响应逻辑——不是所有请求都适合缓存，需按策略区分处理。

注册并激活 Service Worker

必须在 HTTPS 环境（或 localhost）下运行。在主页面 JS 中注册：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg))
      .catch(err => console.error('SW registration failed:', err));
  });
}

注册后，浏览器会下载并安装 sw.js。首次安装时触发 install 事件，可在此预缓存核心静态资源（如 HTML、CSS、JS）：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll([
        '/',
        '/index.html',
        '/app.css',
        '/app.js'
      ])
    )
  );
});

拦截 fetch 请求并返回缓存响应

在 fetch 事件中判断请求是否命中缓存，优先返回缓存内容，缓存未命中再发起网络请求，并可选择性更新缓存：

self.addEventListener('fetch', event => {
  const { request } = event;

  // 仅对 GET 请求做缓存处理（POST/PUT 等通常不缓存）
  if (request.method !== 'GET') return;

  // 对 HTML 页面使用「缓存优先 + 网络回退」策略
  if (request.destination === 'document') {
    event.respondWith(
      caches.match(request).then(cached => cached || fetch(request))
    );
    return;
  }

  // 对静态资源（JS/CSS/IMG）采用「缓存优先 + 后台更新」策略
  if (request.destination === 'script' || 
      request.destination === 'style' || 
      request.destination === 'image') {
    event.respondWith(
      caches.match(request).then(cached => {
        // 缓存存在，直接返回
        if (cached) return cached;
        // 缓存不存在，取网络响应并写入缓存（不阻塞返回）
        return fetch(request).then(response => {
          const copy = response.clone();
          caches.open('static-v1').then(cache => cache.put(request, copy));
          return response;
        });
      })
    );
    return;
  }
});

处理离线状态与用户提示

当网络不可用时，fetch(request) 会抛出异常。可在 fetch 事件中捕获并返回兜底响应：

• 为 HTML 页面提供离线 fallback 页面（如 /offline.html），提前缓存好
• 在 fetch 事件中对 document 请求增加错误处理：

event.respondWith(
  caches.match(request)
    .then(cached => cached || fetch(request))
    .catch(() => caches.match('/offline.html'))
);

也可在页面 JS 中监听 navigator.onLine 或监听 Service Worker 的 controllerchange 事件，提示用户当前处于离线模式。

更新缓存与版本控制

Service Worker 更新靠文件内容变化触发。每次修改缓存策略或资源列表，需更新缓存名称（如 'static-v2'），并在 activate 事件中清理旧缓存：

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys
          .filter(key => key.startsWith('static-') && key !== 'static-v2')
          .map(key => caches.delete(key))
      )
    )
  );
});

注意：新 Service Worker 激活后，旧页面仍由旧 SW 控制，需刷新或跳转才能启用新版逻辑。