JavaScriptServiceWorkers使用教程：打造离线Web应用

本文深入解析了如何正确使用 JavaScript Service Worker 构建真正可用的离线 Web 应用，直击开发者最常踩坑的三大核心环节：从环境限制（HTTPS/localhost、作用域配置、文件可访问性、DevTools 设置）到缓存策略设计（静态资源预缓存、HTML 与 API 的差异化处理、query 参数匹配技巧），再到生命周期调试难点（waiting 状态卡死、缓存清理时机、日志查看误区），不仅给出即插即用的最小可行代码，更揭示背后的关键原理——真正掌握 Service Worker，不在于写多少行代码，而在于理解 install→waiting→activating→activated 这一异步链条中每个状态的控制权归属与协同逻辑。

Service Worker 注册失败的常见原因

注册不成功，通常不是代码写错了，而是环境没满足。Service Worker 只能在 HTTPS 下运行（localhost 除外），如果你在 http://192.168.x.x 或普通 HTTP 域名下测试，navigator.serviceWorker.register() 会直接拒绝并抛出异常。

另一个高频问题是作用域（scope）越界：默认注册时 scope 是脚本所在路径的父目录，比如你在 /js/sw.js 注册，scope 就是 /js/，它无法控制 / 下的 HTML。解决方法是显式指定：

navigator.serviceWorker.register('/sw.js', { scope: '/' })

• 确保 sw.js 文件能被浏览器直接访问（返回 200，Content-Type 是 text/javascript）
• 注册代码必须放在页面加载完成之后，但不要等 window.onload —— 越早调越好，比如