DevTools Service Worker 生命周期调试
用 Application 面板定位 Service Worker 注册、install/waiting/activate、scope 与 client control 异常，区分生命周期没有切换和已切换但缓存策略仍返回旧内容。
#debug
#growing
#frontend
#browser
#chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Application MOC
- 前置概念: Service Worker 与 Cache API
- 请求路径: Service Worker 请求调试
- Cache Storage: IndexedDB 与 Cache Storage 调试
- 上位排障: 缓存不更新排查路线
DevTools Service Worker 生命周期调试
症状
- 新版本 worker 已下载但一直 waiting；
- 页面刷新后仍由旧 worker 控制；
- 同一版本对部分用户生效、部分用户不生效；
- unregister 后行为恢复正常。
第一步：看 Registration 与 Scope
先确认：
- registration 是否存在；
- script URL；
- scope；
- 当前页面是否落在 scope 内。
没有 registration/control 关系，就不要继续假设请求由 SW 接管。
第二步：区分生命周期状态
核心状态：
installing
→ waiting
→ active
→ controls clients新 worker 已下载并不等于它已经接管当前页面。
如果仍有旧 client 被 active worker 控制，新 worker 可能继续 waiting，除非产品采用 skipWaiting() 等主动切换策略。
第三步：确认 Client Control
即使新 worker active，也要确认当前 page client 是否已经被它控制。
必要时结合 reload / clients.claim() 设计判断。
第四步：生命周期与缓存策略分开
这是最重要边界：
新 worker 没接管
≠
新 worker 已接管但仍从旧 Cache Storage 返回 response前者查生命周期；后者查 请求路径 和 Cache Storage。
常见根因
- scope 不覆盖页面；
- 旧 tab/client 长期不退出；
- waiting worker 没有激活机会；
- updatefound 后脚本内容其实没变化；
- active 已更新，但 cache version/strategy 没更新。
迁移检查
场景：部署新 PWA，Application 显示一个 waiting worker，但刷新页面后 JS 仍旧。
闭卷回答：
- 为什么 waiting 不等于 active？
- 为什么 active 也不等于当前 client 已被控制？
- 什么时候可以考虑 skipWaiting/clients.claim，风险是什么？
- 如果新 worker 已控制页面但资源仍旧，下一步转到哪条证据链？
Digital Biome