Service Worker 是运行在浏览器后台的独立脚本，可拦截请求、缓存资源、实现离线访问和消息推送，是 PWA 的核心；需 HTTPS（localhost 除外）、同源注册、无 DOM 访问权限，通过 postMessage 与页面通信。
Service Worker 是运行在浏览器后台的独立 JavaScript 脚本，它不绑定具体页面，能拦截网络请求、缓存资源、推送消息，并让网页实现真正的离线可用。它不是传统意义上的“Web Worker”，而是一个可编程的网络代理层，是构建 PWA（渐进式 Web 应用）的核心能力之一。
Service Worker 的关键特性
它有三个硬性前提：必须通过 HTTPS（本地 localhost 除外）、以 red">JavaScript 文件形式注册、且作用域（scope）需在同源下。它本身没有 DOM 访问权限，不能直接操作页面元素，但可通过 postMessage 和页面通信。
- 生命周期独立：安装（install）、激活（activate）、闲置（idle）、终止（terminated）——不随页面关闭而销毁
- 请求可拦截：在
fetch事件中决定是走网络、读缓存，还是返回兜底响应 - 支持后台同步和推送：即使浏览器关闭，也能在条件满足时执行任务（需用户授权）
注册并激活一个基础 Service Worker
注册只需在主页面 JS 中调用 navigator.serviceWorker.register()，路径指向你的 SW 脚本文件：
// main.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
}
注意：sw.js 必须放在网站根目录（或指定 scope），否则无法控制子路径页面。注册后，浏览器会自动触发 install 事件。
立即学习“Java免费学习笔记（深入）”；
缓存静态资源，实现离线加载
在 sw.js 中监听 install 和 fetch 事件，把 HTML/CSS/JS/图片等提前存入 Cache API：
// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/logo.png'
];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(resp => resp || fetch(e.request))
);
});
这样，首次联网访问后资源就被缓存；之后断网再打开页面，Service Worker 会从缓存中返回内容，用户完全无感知。
更新缓存与版本管理
Service Worker 不会自动更新已安装的脚本——改了 sw.js 文件后，只有新打开的页面才会尝试安装新版。旧版仍运行在已打开的标签页中。
- 更新缓存：修改
CACHE_NAME（如从v1改成v2），新 SW 安装时创建新缓存，旧缓存可在activate阶段清理 - 跳过等待：在 install 后立即调用
self.skipWaiting()，让新版 SW 尽快激活 - 清理旧缓存：在 activate 事件里遍历
caches.keys()，删除非当前版本的缓存
基本上就这些。Service Worker 不复杂但容易忽略细节——比如缓存策略选错会导致白屏、忘记更新缓存名会让改动不生效、未处理动态请求会卡在 loading。从静态资源缓存起步，再逐步加入网络优先、缓存优先、Stale-while-revalidate 等策略，离线体验就稳了。
