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 面板会显示错误。