用cachestorage配合service worker构建离线应用的核心是静态资源的存、取、更新，需在https/localhost下注册sw，install阶段预加载关键资源并版本化缓存，fetch阶段拦截请求匹配缓存或回源，activate阶段清理旧缓存并claim控制权。
用 CacheStorage 配合 Service Worker 构建离线应用，核心是让静态资源可存、可取、可更新。它不依赖浏览器默认缓存，也不需要服务端额外配置 MIME 类型或 manifest 文件，纯前端可控。
注册 Service Worker 并确保环境合规
必须在 HTTPS（或 localhost）下运行，否则注册会静默失败。注册代码写在主页面的脚本中，不能放在 iframe 或模块里：
- 检查支持性：
if ('serviceWorker' in navigator) - 调用注册：
navigator.serviceWorker.register('/sw.js')，路径需在根目录或合法 scope 内（如/sw.js可控制全站，/js/sw.js默认只控制/js/下路径） - 首次访问不会生效，刷新一次后新 SW 才进入 active 状态
在 install 阶段预加载关键静态资源
这是离线可用的前提。所有要离线打开的 HTML、CSS、JS、图标等，都应在 install 事件中一次性加入缓存：
- 用
caches.open('v1')创建带版本号的缓存空间，便于后续升级 - 调用
cache.addAll([...])，传入相对根路径的资源数组（如['/', '/index.html', '/style.css']） - 必须包裹在
event.waitUntil()中，防止安装未完成就被终止
在 fetch 阶段拦截请求并执行缓存策略
每次页面发起网络请求时，fetch 事件都会触发。这里决定是返回缓存、回源获取，还是兜底响应：
- 优先
caches.match(request)查找匹配缓存；注意 Request 对象只能使用一次，若后续还要 fetch，需先request.clone() - 命中则直接返回 Response；未命中则
fetch(request)获取，并可选地cache.put(request, response.clone())存入缓存 - 跳过非 GET 请求、跨域无 CORS 响应、带 query 的 API 接口等不适合缓存的请求
用 activate 阶段清理旧缓存并接管页面
版本升级时，新 SW 安装后处于 waiting 状态，需显式激活才能替换旧版：
- 在 activate 事件中遍历
caches.keys()，删除名称不等于当前CACHE_NAME的缓存 - 调用
self.clients.claim()让新 SW 立即控制当前页面（否则需关掉再打开） - 如需跳过 waiting 直接激活，可在 install 中加
self.skipWaiting()
整个流程不复杂但容易忽略细节：缓存名带版本、Request 要克隆、跨域资源需服务端配 Access-Control-Allow-Origin、POST 等方法不进缓存逻辑。写好 sw.js 后，只需一次注册+刷新，离线能力就落地了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
