Service Worker

Service Worker（SW） 是浏览器里的 后台脚本：可拦截网络请求、读写 Cache Storage，实现 离线优先、预缓存、更新策略。PWA 的「断网仍能用」几乎都依赖它——也是跨平台前端里 最容易写错、最难调试 的一环。

学习目标

• 完成 SW 注册与生命周期（install → activate → fetch）直觉
• 对比常见缓存策略：Cache First、Network First、Stale-While-Revalidate
• 理解更新时「新旧 SW 并存」与用户刷新问题

注册最小示例

主线程（如 main.js 或 React 入口）：

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js").catch(console.error);
  });
}

sw.js 骨架：

const CACHE = "crm-v1";
const ASSETS = ["/", "/tracks", "/styles/main.css", "/offline.html"];

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(CACHE).then((c) => c.addAll(ASSETS)));
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

Scope：默认 SW 只能控制 其路径及以下 的请求；通常把 sw.js 放在站点根目录。

生命周期与更新

install  → 预缓存静态资源（新版本 CACHE 名如 crm-v2）
activate → 删旧 cache、claim 客户端
fetch    → 对每个请求决定走 cache 还是 network

用户 不刷新 时，旧页面可能仍绑旧 SW——常见做法：activate 里 clients.claim()，并在 UI 提示「新版本可用，请刷新」。

缓存策略选型

策略	适用	风险
Cache First	带 hash 的 JS/CSS、字体	HTML 若缓存过久会 stale
Network First	API JSON、个性化内容	离线时无 fallback 则失败
Stale-While-Revalidate	文章、tracks 列表	实现稍复杂，体验平滑

与 http-caching、http-app-cache 对照：HTTP 缓存 由浏览器按响应头处理；SW 缓存 由你的 fetch 处理器显式决定——二者可叠加，不要重复缓存同一资源却不设版本策略。

与 React / 工具链

• 生产构建文件名带 content hash → 适合 Cache First