Service Worker 是运行在浏览器后台、独立于主线程的脚本，可拦截请求、缓存资源、接收推送和触发后台同步，但无法访问 DOM 或 localStorage；注册需 HTTPS（或 localhost），通过 navigator.serviceWorker.register() 实现，且 sw.js 必须同源；常用 fetch 事件实现离线优先策略，install 事件预缓存静态资源，sync 事件需用户添加到主屏幕后才可能生效。
Service Worker 是什么：一个运行在浏览器后台的脚本
它不是普通 JS 脚本，而是一个独立于网页主线程的 Worker，生命周期由浏览器管理。它不能直接访问 DOM，也不能读写 localStorage 或 document.cookie。它的核心能力是拦截网络请求、缓存资源、接收推送、触发后台同步——这些正是离线和后台能力的基础。
注册 Service Worker 的关键条件和常见失败点
注册必须在 HTTPS（或 localhost）环境下进行；否则 navigator.serviceWorker.register() 会静默失败或抛出 SecurityError。注册后，浏览器会下载、解析、安装该脚本，但不会立即激活——只有当所有已打开页面关闭或刷新后，新版本才会接管。
- 注册代码必须放在主页面 JS 中，且建议加错误捕获：
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .catch(err => console.error('SW registration failed:', err)); } -
sw.js必须与注册页面同源，且路径要正确（相对路径以站点根目录为基准） - 开发时频繁修改 SW 后，Chrome DevTools 的
Application > Service Workers面板中勾选Update on reload，否则浏览器可能复用旧缓存
用 fetch 事件实现离线优先策略
在 SW 脚本中监听 fetch 事件，决定每个网络请求是走网络、走缓存，还是两者结合。典型模式是「缓存优先，回退网络」，适合静态资源；「网络优先，缓存后备」更适合动态内容（如 API 响应）。
- 缓存静态资源（HTML/CSS/JS）推荐用
Cache API+install事件预缓存：self.addEventListener('install', event => { event.waitUntil( caches.open('static-v1').then(cache => cache.addAll([ '/', '/index.html', '/app.js', '/style.css' ]) ) ); }); - 拦截页面请求并尝试从缓存读取：
self.addEventListener('fetch', event => { if (event.request.destination === 'document') { event.respondWith( caches.match(event.request).then(cached => cached || fetch(event.request)) ); } }); - 注意：未显式匹配的请求（比如跨域图片、第三方字体）默认仍走网络；若需拦截，需检查
event.request.mode === 'cors'等条件
用 sync 事件实现后台同步（需用户授权）
后台同步依赖 SyncManager 和 serviceWorkerRegistration.sync.register()，但它不是“随时能执行”，而是由浏览器在设备联网、空闲、充电等条件下触发。更重要的是：它只在用户明确授予 background-sync 权限后才可用——现代 Chrome 已默认拒绝该权限，除非网站被添加到主屏幕（beforeinstallprompt 触发后引导用户）。
立即学习“Java免费学习笔记（深入）”；
- 注册 sync 事件前，先检查权限：
navigator.serviceWorker.ready.then(reg => { reg.sync.register('submit-form-data').catch(err => { console.warn('Sync registration failed:', err); }); }); - 在 SW 中监听：
self.addEventListener('sync', event => { if (event.tag === 'submit-form-data') { event.waitUntil(handleFormDataSync()); } }); -
handleFormDataSync()必须是幂等操作（重复执行不产生副作用），因为浏览器可能多次触发同一 tag
真正难的不是写代码，而是让用户点那个「添加到主屏幕」弹窗——没这一步，sync 几乎不会生效。别指望它像定时任务一样稳定运行。
