Service Worker 是运行在浏览器后台的可编程代理层，支持拦截请求、缓存管理、推送通知和离线访问；需 HTTPS 注册，独立线程运行，无法访问 DOM，通过 install/activate/fetch 事件实现缓存策略与离线能力。
Service Worker 是运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、管理缓存、实现推送通知和离线访问。它本质是一个可编程的代理层，让开发者精细控制资源加载逻辑，是构建可靠离线应用的核心机制。
Service Worker 的核心能力
它不是普通 JS 脚本，有明确生命周期和限制：
- 必须通过 HTTPS（本地 localhost 除外）注册，保障安全
- 运行在独立线程，无法访问 DOM 或 window 对象
- 默认不持久：关闭所有页面后可能被终止，但可通过 skipWaiting() 和 clients.claim() 提升激活稳定性
- 支持 fetch 和 cache API，可缓存静态资源、API 响应甚至流式内容
注册与安装 Service Worker
在网页中注册只需一行 JS，通常放在 main.js 或入口脚本顶部：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered', reg))
.catch(err => console.error('SW registration failed', err));
}
立即学习“Java免费学习笔记（深入）”；
对应 sw.js 文件需定义 install、activate 和 fetch 事件：
- install：预缓存关键资源（如首页 HTML、主 CSS/JS、logo），用 caches.open().addAll()
- activate：清理旧缓存版本，调用 caches.delete() 避免冗余
- fetch：监听所有请求，按策略返回缓存或发起网络请求（如 Cache-First、Network-First、Stale-While-Revalidate）
实现离线可用的关键策略
单纯缓存静态文件不够，真实场景需分层处理：
- 静态资源走 Cache-First：HTML/CSS/JS 图片等首次加载即缓存，后续优先读缓存，失败再联网
- API 数据用 Network-First + fallback：先尝试网络请求，失败时返回上次缓存数据或占位响应（如空列表、提示语）
- 动态内容可标记版本：在 URL 中加时间戳或哈希（如 /api/posts?v=202405），避免缓存污染
- 监听 offline/online 事件：前端 UI 可提示用户当前状态，并暂存表单数据到 localStorage，待恢复后同步
调试与注意事项
Chrome DevTools 的 Application → Service Workers 面板是主要调试入口：
- 勾选 “Update on reload” 强制刷新时更新 SW
- 点击 “Skip waiting” 手动激活新版本
- 使用 “Offline” 模拟断网，验证缓存是否生效
- 注意缓存命名规范（如 v1-static），避免 activate 阶段误删正在使用的缓存
- 避免在 fetch 中无条件 return cache.match() —— 没缓存时会返回 undefined 导致白屏，务必兜底 fetch(url)
