Chrome Service Worker 是什么？生命周期和缓存坑有哪些？

Service Worker 是运行在页面之外的浏览器脚本，Chrome 用它来做请求拦截、离线缓存、推送通知和后台同步。它不直接操作 DOM，也不是一直常驻后台线程，而是被 install、activate、fetch、push 等事件唤醒，处理完任务后可能被浏览器回收。理解它的关键不是背 API，而是记住：它站在页面和网络之间，但生命周期由浏览器控制。

追问

Service Worker 和普通 JS 脚本有什么区别？

普通 JS 跟着页面走，页面关闭脚本就结束；Service Worker 注册后独立于页面。它不能访问 window 和 DOM，需要用 postMessage、Cache Storage、IndexedDB 与页面协作。

install、activate、fetch 分别做什么？

install 适合预缓存静态资源，activate 适合清理旧版本缓存并接管客户端，fetch 决定请求走网络还是缓存。

缓存策略怎么选？

静态资源通常 cache first，HTML 入口常用 network first 或 stale-while-revalidate，接口数据按业务新鲜度决定。

更新为什么经常“不生效”？

Chrome 发现 sw.js 字节变化后会安装新版本，但旧页面仍被旧 worker 控制，新版本要等旧页面关闭才激活。

必要代码长什么样？

下面只是兜底示例，真实项目要区分静态资源、HTML 和接口。

js
self.addEventListener('fetch', event => {
  event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
});