Service Worker 实现离线“秒开”的关键是精准控制缓存生命周期和请求路径：安装阶段仅缓存HTML、关键CSS、运行时JS等4–7个必需资源并带版本号；fetch阶段缓存优先响应，未命中则静默更新；activate阶段清理旧缓存并强制接管。
用 Service Worker 实现离线缓存“秒开”，关键不是堆功能，而是精准控制缓存生命周期和请求响应路径。核心目标是：用户首次访问后，后续打开（包括断网时）能直接从 Cache Storage 读取资源，跳过网络请求，耗时压到 5ms 以内。
注册与作用域要稳准狠
注册必须在 HTTPS 或 localhost 下进行，且要在页面 load 后立即执行，避免被阻塞：
- 检查支持性：
if ('serviceWorker' in navigator) - 注册路径设为根目录（
/sw.js），确保能拦截全站请求；若只管子路径，加{ scope: '/app/' } - 注册后不等待页面交互，直接触发安装——延迟注册会导致首屏无法受益
安装阶段只缓存“真正秒开必需”的资源
别一股脑缓存所有 JS/CSS。所谓“秒开”，依赖的是 HTML + 关键 CSS + 运行时 JS（如 Vue/React 核心包）+ 首屏图标等极小集合。多缓一个非关键文件，就多一次 cache.addAll() 的 I/O 延迟。
- 缓存清单保持精简：通常 4–7 个 URL，例如
['/', '/main.css', '/runtime.js', '/vendor.js', '/app.js', '/logo.png'] - 使用
event.waitUntil()包裹整个缓存过程，防止 SW 安装中断 - 缓存名带版本号（如
'cache-v2'），为后续更新留出空间
fetch 拦截走“缓存优先 + 网络静默更新”双通道
仅靠安装阶段缓存不够——HTML 可能动态生成，API 数据需新鲜。但“秒开”体验要求首屏资源必须立刻返回，不能等网络。
Pilot Service Agents Dev
下载
开发者平台元数据——GitHub、Docker Hub、crates.io 等生态系统注册表。使用此技能的时机：1. 解析 GitHub 仓库或获取其...
立即学习“Java免费学习笔记（深入）”；
- 对 HTML、CSS、JS、字体、图片等静态资源，用
caches.match(event.request)直接返回，命中即响应 - 对未命中请求，仍调用
fetch()获取最新版，再用caches.put()后台存入新缓存（不阻塞当前响应） - 避免在 fetch 中做复杂判断或 await 多个 cache 操作，否则拖慢响应速度
激活阶段主动清理旧缓存 + 强制接管
版本升级后，旧缓存不清理会占空间；不强制接管，用户刷新可能还在用老 SW，导致缓存不一致。
- 在
activate事件中，用caches.keys()找出非当前版本的缓存名，批量caches.delete() - 调用
self.clients.claim()或self.skipWaiting()，让新 SW 立即控制已打开的页面 - 这样用户第二次访问时，所有资源都来自新缓存，无残留干扰
不复杂但容易忽略：缓存策略不是越全越好，而是越准越快。把 HTML 和渲染链上不可缺失的资源钉死在 install 阶段，fetch 阶段只做“查—返—存”三步动作，就能稳定达成离线毫秒级加载。
