JavaScript Service Worker是什么_它如何离线工作？

Service Worker 是运行在浏览器后台的可编程网络代理，独立于主线程，需 HTTPS 注册，通过 install 和 fetch 事件实现离线缓存与网络请求拦截，支持 Cache-First 等策略，但无法访问 DOM 或 localStorage。

Service Worker 是浏览器中运行在后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源、推送通知，并让 Web 应用真正支持离线使用。

它是个“中间代理”

Service Worker 本质是一个可编程的网络代理。注册后，它能监听页面发出的所有 fetch 请求，决定是走网络、返回缓存，还是合成响应。它不直接操作 DOM，也不访问 window 对象，只专注控制网络与缓存逻辑。

• 必须通过 HTTPS（本地 localhost 除外）才能注册
• 作用域默认为注册脚本所在路径及其子目录，可显式指定 scope
• 生命周期由浏览器管理：安装 → 激活 → 等待 → 控制页面

离线工作的核心是缓存策略

离线能力不是自动开启的，靠你在 install 和 fetch 事件中主动缓存关键资源，并制定响应逻辑。

• install 阶段：用 caches.open() 创建缓存仓库，调用 cache.addAll() 预存 HTML、JS、CSS、图标等静态资源
• fetch 阶段：监听请求，优先尝试 caches.match() 查缓存；没命中再 fetch 网络，成功后可顺手 put 到缓存（可选）
• 常见策略有：Cache-First、Network-First、Stale-While-Revalidate，按需选择

更新机制确保内容不过期

新版本 Service Worker 不会立刻替换旧版。只有当所有受控页面关闭后，新版才激活；或者调用 self.skipWaiting() 强制跳过等待，再用 clients.claim() 立即接管页面。

• 每次注册都会触发 install，但仅当脚本内容字节不同才会视为“新版本”
• 缓存名建议带版本号（如 'my-app-v2'），避免旧缓存干扰新逻辑
• 激活阶段可用 caches.delete() 清理旧缓存，保持干净

它不是万能的，有明确限制

Service Worker 设计上就规避了某些风险，所以不能做这些事：

• 无法访问 localStorage、document、window 等同步 API
• 不支持同步 XMLHttpRequest（要用 fetch）
• 定时任务受限（没有 setInterval/setTimeout 的可靠保证，可用 background sync 或 push 事件替代）
• 页面未打开时，Worker 可能被终止，不保证长期驻留

基本上就这些。它让网页像原生应用一样“装得上、离得开、跟得上”，关键是把缓存和网络逻辑从页面里抽出来，交给更可控的后台线程处理。