JavaScript用Service Worker实现离线缓存的核心在于注册、预缓存、请求拦截和版本清理四个环节闭环：需HTTPS/localhost环境注册，install阶段用caches.open和addAll预缓存资源，activate阶段清理旧缓存，fetch事件中按策略返回缓存或网络响应。
JavaScript 用 Service Worker 实现离线缓存，核心是让浏览器在无网络时仍能返回已缓存的资源。关键不在“能不能”，而在于注册、预缓存、请求拦截和版本清理这四个环节是否闭环。
注册 Service Worker 脚本
必须在 HTTPS 或 localhost 环境下运行。主页面加载完成后注册，避免阻塞渲染：
- 先检测兼容性：
if ('serviceWorker' in navigator) - 在
window.addEventListener('load', ...)中调用navigator.serviceWorker.register('/sw.js') -
scope参数决定它能控制哪些页面，默认为脚本所在路径；若想控制整个站点，确保sw.js放在根目录，并显式指定{ scope: '/' }
安装阶段预缓存静态资源
这是离线可用的基础。安装时一次性缓存 HTML、CSS、JS、图标等核心文件：
- 监听
install事件，在其中调用caches.open('v1')创建命名缓存空间 - 用
cache.addAll([...])批量添加资源路径（注意：路径需与实际访问路径一致，如'/'表示首页 HTML） - 必须包裹在
event.waitUntil()中，确保缓存完成前不结束安装过程
激活后拦截 fetch 请求
只有激活（active）状态的 Service Worker 才能响应 fetch 事件。常见策略是“缓存优先”：
立即学习“Java免费学习笔记（深入）”；
- 监听
fetch事件，用caches.match(event.request)查找匹配缓存 - 命中则直接返回缓存响应；未命中则调用
fetch(event.request)发起网络请求 - 可对不同请求类型区分策略：比如 HTML 页面用缓存优先，API 接口用网络优先
更新缓存时清理旧版本
每次修改缓存逻辑或资源列表，都要更新缓存名（如从 'v1' 改为 'v2'），并在激活阶段清理旧缓存：
- 监听
activate事件，调用caches.keys()获取所有缓存名 - 过滤出非当前版本的缓存，逐个执行
caches.delete(name) - 同样需用
event.waitUntil()包裹异步清理操作
