17370845950

Service Worker 是运行在浏览器后台的事件驱动型脚本，支持离线缓存、网络请求拦截与推送通知。需 HTTPS 注册，生命周期为注册→安装→激活→等待→控制页面，无法访问 DOM，依赖 fetch/cache API 实现预缓存与运行时缓存策略。

Service Worker 是运行在浏览器后台的脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并让 Web 应用具备离线能力。

Service Worker 的核心特性

它不是普通 JS 脚本，而是一个可被注册、安装、激活的事件驱动型 worker：

• 必须通过 HTTPS（本地开发时 localhost 也允许）才能注册
• 生命周期由浏览器控制：注册 → 安装 → 激活 → 等待 → 控制页面
• 无法直接访问 DOM 或 window 对象，只能通过 postMessage 和页面通信
• 支持 fetch、cache API，是实现离线体验的关键基础设施

如何用 Service Worker 实现离线体验

关键在于“预缓存 + 运行时缓存”策略，让资源在首次加载时存入 Cache Storage，后续请求优先从缓存读取：

• 预缓存静态资源：在 install 阶段把 HTML、CSS、JS、图标等核心文件写入指定缓存（如 static-v1）
• 拦截 fetch 请求：在 fetch 事件中检查请求是否命中缓存；有则返回缓存响应，无则发起网络请求并缓存结果
• 缓存更新策略：install 阶段清旧缓存，fetch 阶段用 stale-while-revalidate 等模式平衡新鲜度与可用性
• 兜底页面：当网络不可用且缓存未命中时，返回一个离线专用 HTML 页面（如 /offline.html）

一个最小可行示例

注册 sw.js：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('SW registered:', reg.scope);
  });
}

sw.js 内容简版：

const CACHE_NAME = 'my-app-v1';
const PRECACHE_URLS = ['/index.html', '/style.css', '/app.js'];

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

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(cached => {
      return cached || fetch(e.request);
    })
  );
});

注意事项与常见陷阱

实际部署中容易踩坑：

• Service Worker 不会自动更新：新版本需用户刷新两次才生效（第一次触发更新，第二次激活）
• 缓存键区分大小写和查询参数：/api/data 和 /api/data? 是不同缓存项
• 动态路由（如 React Router）需配合 NavigationPreload 或 fallback 响应避免白屏
• 调试建议：在 Chrome DevTools 的 Application → Service Workers 标签中勾选 “Update on reload” 并使用 “Skip waiting”