5月29日 22:48

Service Worker 的生命周期有哪些阶段?

四个阶段:注册(register)→ 安装(install)→ 等待(waiting)→ 激活(activate)→ 运行中。register 触发下载 SW 文件,install 事件中预缓存资源,install 成功后进入 waiting 等待旧 SW 退出,activate 时清理旧缓存。跳过等待:skipWaiting() 让新 SW 立即激活,clients.claim() 立即接管页面。默认不跳过——已打开的页面继续用旧 SW 直到关闭。

追问

为什么要有 waiting 阶段?

安全考虑。已打开的页面可能依赖旧 SW 的缓存结构,强制切换可能导致缓存未命中白屏。waiting 确保所有旧页面关闭后才切换。

skipWaiting 什么时候该用?

紧急修复(如缓存 bug 导致白屏)时用。常规更新不建议——如果新 SW 的缓存 key 和旧的不同,skipWaiting 后页面可能加载失败。

SW 什么时候会被销毁?

空闲约 30 秒后浏览器自动终止 SW 线程节省内存。下次 fetch/push/sync 事件再唤醒。所以 SW 里不要用全局变量存状态——唤醒后变量重置。持久状态存 IndexedDB。

页面关闭后 SW 还活着吗?

可能活着(有 push/sync 事件时),也可能被终止。不能假设 SW 常驻。

注册失败怎么排查?

检查:SW 文件路径是否正确、是否在 HTTPS 下(localhost 例外)、SW 文件是否有语法错误、scope 是否覆盖目标页面。DevTools Application > Service Workers 面板会显示错误。

标签:Service Worker