Service Worker离线调试需分阶段验证：注册路径须为根相对路径（如"/sw.js"）、scope显式设为"/"，仅HTTPS或localhost可用；检查Application面板状态，避免卡在waiting；缓存URL须与请求完全一致，注意查询参数和credentials匹配；语法错误需在chrome://serviceworker-internals/中排查。
排查 Service Worker 离线调试问题，核心在于分阶段验证注册、安装、激活和请求拦截是否真正生效——不是看代码有没有写，而是看浏览器实际执行到了哪一步。
确认注册路径与作用域是否正确
注册失败是最常见的起点。必须确保：
-
路径是根相对路径：调用
navigator.serviceWorker.register('/sw.js')，不能写成'sw.js'或'./sw.js' -
scope 显式设为 '/'：尤其当 sw.js 不在根目录时（如放在
/js/sw.js），必须传入{ scope: '/' }，否则它只能拦截/js/下的请求 - 环境满足 HTTPS 或 localhost：生产环境必须 HTTPS；开发时 localhost 可用，但 127.0.0.1 或自定义 host（如 dev.local）需配 HTTPS 否则注册静默失败
检查安装与激活状态
即使注册成功，Service Worker 也可能卡在 installing 或 waiting 阶段，无法接管页面：
- 打开 Chrome 的 Application → Service Workers 面板，查看状态是否为 activated
- 若显示 waiting，说明新版本已安装但未激活——勾选 Update on reload，或手动点击 Skip waiting
- 若页面已打开，新 SW 默认不会立即控制它；可调用
self.clients.claim()在 activate 事件中主动接管当前页面
验证缓存是否真正命中
离线时白屏或资源 404，往往不是没缓存，而是缓存 URL 与请求 URL 不匹配：
立即学习“Java免费学习笔记（深入）”；
- 在 Application → Cache Storage 中展开对应 cache 名称，确认缓存的 URL（如
'/'、'/style.css'）与 Network 面板中请求的 URL 完全一致（注意尾部斜杠、查询参数、大小写） - fetch 事件中使用
caches.match(event.request)前，建议先加判断：event.request.destination === 'document'或event.request.mode === 'navigate'，避免误匹配 API 请求 - 带 credentials 的请求（如
credentials: 'include'）必须用相同选项打开 cache，否则 match 失败
定位语法错误与运行时异常
Service Worker 脚本存在语法错误会导致注册完全失败，且错误不显示在主页面控制台：
- 访问 chrome://serviceworker-internals/，找到你的站点，点击 Inspect 打开独立 DevTools，查看 Console 中的原始解析错误（如
Unexpected token） - 禁止在顶层使用
await；不能访问document、window、localStorage；JSON 字符串必须双引号、无尾逗号 - 若用了 ES 模块（import/export），注册时要加
{ type: 'module' }，且服务器返回 MIME 类型必须是application/javascript+module
