如何利用 Service Worker 的响应策略实现页面的秒开优化

Service Worker 实现页面秒开的核心是 Stale-While-Revalidate 策略：优先返回缓存内容，同时后台更新；需预缓存首屏资源、启用导航预加载，并在 activate 阶段按版本清理旧缓存。

用 Service Worker 实现页面秒开，核心在于绕过网络延迟、优先返回可用内容，并在后台静默更新。关键不是等最新资源加载完再展示，而是“先给旧的，再换新的”——这正是 Stale-While-Revalidate 策略的实质。

拦截 fetch 请求并启用缓存优先逻辑

Service Worker 必须在 fetch 事件中第一时间调用 event.respondWith()，否则浏览器会走默认网络流程。对首页这类关键导航请求，应单独识别并应用缓存策略：

• 用 new URL(event.request.url) 判断是否为页面导航（如 request.destination === 'document' 或路径匹配 /）
• 调用 caches.match(event.request) 尝试读取缓存响应
• 若命中缓存，立即返回；同时用 fetch(event.request) 发起后台更新
• 新响应到达后，用 response.clone() 分别送浏览器和写入缓存（避免流被消费后无法复用）

预缓存首屏必需资源（Install 阶段）

用户第一次访问时没有缓存，秒开无从谈起。因此需在 install 事件中主动缓存首页骨架、关键 CSS、JS 和 logo 等静态资源：

• 使用 caches.open('v1-static') 创建专属缓存空间
• 调用 cache.addAll([...urls]) 批量预存，URL 应为绝对路径或相对于 service worker 脚本的路径
• 配合 event.waitUntil() 确保安装完成前缓存操作执行完毕
• 避免在 install 中缓存动态接口或 HTML 模板，它们更适合运行时缓存

启用导航预加载（Navigation Preload）

传统 Service Worker 启动有延迟，尤其冷启动时可能卡住首屏。导航预加载让浏览器在 SW 初始化的同时并发请求资源，大幅压缩等待窗口：

• 注册时调用 registration.navigationPreload.enable()
• 在 fetch 事件中优先检查 event.preloadResponse
• 若预加载响应存在，直接返回它；否则回落到 Stale-While-Revalidate 流程
• 该功能在 Chrome、Edge、Firefox 中已稳定支持，iOS Safari 也自 11.3 起兼容

合理管理缓存生命周期与版本

缓存不清理会导致陈旧资源长期残留，影响功能更新；清理太激进又破坏秒开体验。激活阶段（activate）是清理旧缓存的最佳时机：

• 在 activate 事件中遍历 caches.keys()，删除非当前版本名的缓存（如 v0-static）
• 使用 cache.delete() 逐个清除，避免一次性清空影响正在使用的资源
• 不要在 SW 全局作用域中维护状态变量（如计数器、标志位），因其在进程休眠后会被重置
• 缓存键建议包含版本号（如 'pages-v2'），便于灰度发布和回滚