service workers离线缓存核心是请求时决定内容来源，依赖注册、安装预缓存、fetch拦截三步：需https/localhost注册；install中用addall预存静态资源（url须严格匹配）；fetch中用event.respondwith优先缓存再网络；activate时手动清理旧缓存。
Service Workers 实现离线缓存，核心不是“把文件存起来”，而是“在请求发生时，决定从哪取内容”。它靠三件事协同工作：注册脚本、安装时预存关键资源、fetch 时主动拦截并响应缓存。
必须先注册，且只在安全上下文中生效
注册只能在 HTTPS 或 localhost 下进行，否则浏览器直接拒绝。注册代码写在主页面的 JS 中，通常放在 window.onload 之后：
- 检查
navigator.serviceWorker是否可用 - 调用
navigator.serviceWorker.register('/sw.js')，路径决定作用域（建议放根目录） - 新版本 SW 默认要等所有页面关闭再激活；开发阶段可加
skipWaiting()和clients.claim()让它立即接管
安装阶段预缓存静态资源
在 sw.js 的 install 事件里，打开一个带版本号的缓存（如 'static-v1'），把 HTML、CSS、JS、图标等确定不变的资源一次性存进去：
- 用
caches.open(cacheName).then(cache => cache.addAll(urls)) - urls 列表必须和页面实际请求的 URL 完全一致（包括尾斜杠、大小写、查询参数）
- 注意：
addAll()是原子操作——任一文件 404 或网络失败，整个 install 就失败；生产环境建议改用循环 fetch + put，提升容错性
fetch 事件中真正启用离线能力
这是最关键的一步。浏览器发出每个请求时，SW 的 fetch 事件都会触发。你必须第一时间调用 event.respondWith()，否则就走默认网络流程，缓存形同虚设：
- 开头就写
event.respondWith(…)，里面用 async/await 或 Promise 链组织逻辑 - 对页面类请求（如
/或/article/123）优先查缓存：caches.match(event.request) - 匹配不到再
fetch(event.request)并可选地存入缓存（适合 API 或图片等动态资源） - 注意过滤跨域请求（
new URL(req.url).origin === location.origin），避免误拦 CDN 或第三方资源 - Response 流只能读一次，缓存前必须
response.clone()
激活阶段清理旧缓存
每次更新 SW 版本后，旧缓存不会自动删除。要在 activate 事件里手动清理：
- 调用
caches.keys()获取所有缓存名 - 筛选出非当前版本的缓存（比如保留
'static-v2'，删掉'static-v1'） - 用
Promise.all(caches.delete())批量清理，保证一致性
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
