Service Worker 是什么？它如何实现离线缓存和后台同步？

Service Worker 是运行在浏览器后台的独立 JS 线程，充当应用与网络之间的代理服务器。它能拦截所有网络请求、管理缓存资源，从而实现离线访问、推送通知和后台同步等能力，是 PWA 的核心技术。其生命周期为 register → install → activate → fetch，浏览器会在空闲时自动终止 SW 线程以节省资源。SW 无法直接操作 DOM，只能通过 postMessage 与主线程通信，且必须在 HTTPS 环境下运行。

追问

SW 的 install 和 activate 阶段分别适合做什么？ install 阶段适合预缓存关键资源（App Shell），调用 event.waitUntil() 确保资源缓存完成后才完成安装；activate 阶段适合清理旧版本缓存，避免残留数据冲突。

SW 如何拦截和处理网络请求？ 通过监听 fetch 事件，可以决定从缓存返回、从网络请求或组合策略（如 Stale-While-Revalidate）。event.respondWith() 用于返回自定义响应。

为什么 SW 必须在 HTTPS 下运行？ 因为 SW 能拦截和篡改所有网络请求，若在 HTTP 下运行，中间人攻击者可注入恶意 SW 劫持全部流量。localhost 是唯一例外。

SW 与 Web Worker 有什么区别？ Web Worker 由页面创建且随页面销毁，用于 CPU 密集计算；SW 生命周期独立于页面，由浏览器管理，专门处理网络代理和后台任务。

写段代码

javascript
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('v1').then(c => c.addAll(['/index.html', '/app.js']))
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});