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() 立即接管页面。

标签： css javascript java html js 浏览器 app 字节 ai win 作用域