如何通过 Service Worker 预取首页核心资源实现极速的首屏访问体验

Service Worker 通过预缓存关键资源、fetch 阶段 Cache-First 策略、导航预加载及 Stale-While-Revalidate 机制，实现首页秒开：安装时预存 HTML/CSS/JS/图标；fetch 时优先返回缓存；预加载兜底；HTML 缓存同时后台更新。

Service Worker 能让首页真正实现“秒开”，关键不在于等用户点进来再加载，而是提前把核心资源预取并缓存好。只要策略得当，第二次及后续访问几乎不走网络，首屏渲染完全依赖本地缓存。

预缓存关键资源（安装阶段完成）

在 Service Worker 的 install 阶段，主动缓存首页必需的静态文件。这些资源必须是稳定、版本可控的，比如：

• 首页 HTML（可配合构建工具生成带哈希的 HTML 或使用内联关键 CSS）
• 核心 CSS 文件（如 reset.css、layout.css）
• 首屏 JS（如 main.js、vendor.js，避免过大，建议拆分）
• 关键图标或 logo 图片（小尺寸、高优先级）

示例代码中，caches.open('static-v1').then(cache => cache.addAll(urlsToCache)) 就是在安装时把列表资源一次性写入 Cache Storage。注意：这个过程只在首次注册或版本变更时触发，务必确保 urlsToCache 准确且可访问。

拦截请求并优先返回缓存（fetch 阶段控制）

在 fetch 事件中，对导航请求（request.destination === 'document'）启用 Cache-First 策略：

• 先调用 caches.match(event.request) 查找已缓存的首页 HTML
• 命中则直接返回，不发网络请求；未命中才调用 fetch(event.request)
• 必须第一时间调用 event.respondWith()，否则浏览器会跳过 Service Worker 处理

这样用户打开首页时，HTML、CSS、JS 全部从本地读取，彻底绕过网络延迟和服务器响应时间。

启用导航预加载（Navigation Preload）

解决新版本 Service Worker 启动耗时带来的首屏卡顿问题。它允许浏览器在 Service Worker 还没 ready 时，并行发起网络请求：

• 注册时调用 registration.navigationPreload.enable()
• 在 fetch 事件中检查 event.preloadResponse，若存在就直接返回
• 相当于“双保险”：缓存可用就用缓存；缓存不可用或正在更新，就用预加载的网络响应兜底

这对热更新场景特别有用——用户访问时既不会看到旧版页面，也不会因等待新 SW 初始化而白屏。

配合 Stale-While-Revalidate 更新机制

纯 Cache-First 容易导致内容陈旧。更优做法是对首页 HTML 使用 Stale-While-Revalidate：

• 收到请求 → 立即返回缓存中的 HTML（保证速度）
• 同时在后台发起 fetch → 获取最新版本
• 更新成功后写入缓存 → 下次访问自动生效

注意：响应体需用 response.clone() 分离流，否则无法既返回给页面又存入缓存。这是实际开发中最容易出错的细节之一。