Navigation Preload 是 Service Worker 为填补激活前网络空窗期而设计的机制，允许浏览器并行预发导航请求并将响应供 fetch 事件使用；仅适用于 document 类型请求，需注册时启用并调用 enable()，且受跨域和浏览器支持限制。
Service Worker 启动时存在一个天然的“网络空窗期”：在 SW 完全激活前，fetch 事件不会被拦截，所有请求直接走网络（绕过缓存），导致首屏加载无法受益于预缓存或离线策略。Navigation Preload 就是为解决这个问题而生的——它允许浏览器在 SW 激活过程中，**并行地提前发起导航请求**，并将响应结果传递给激活后的 fetch 事件，从而填补空窗。
什么是 Navigation Preload
Navigation Preload 是 Service Worker 提供的一项可选机制，启用后，当页面发起主文档请求（如 HTML 页面加载）时，即使 SW 还未 ready，浏览器也会在后台自动发出该请求，并把响应（Response 对象）缓存在内存中。等 SW 的 fetch 事件触发时，可通过 event.preloadResponse 获取这个预加载的响应，避免重复请求或等待 SW 初始化完成。
它只对 navigation 类型的请求（Request.destination === 'document'）生效，不影响资源请求（js/css/img 等）。
如何启用 Navigation Preload
启用需两步：注册时开启 + 在 SW 中显式启用。
立即学习“前端免费学习笔记（深入）”；
- 注册时传入
{ navigationPreload: true }：
navigator.serviceWorker.register('/sw.js', { navigationPreload: true });
- 在 Service Worker 文件（如 sw.js）中调用
navigationPreload.enable()（通常放在activate事件中）：
self.addEventListener('activate', event => {<br> event.waitUntil(self.registration.navigationPreload.enable());<br>});
也可用 disable() 关闭，或用 getState() 查询当前状态（返回 'enabled' / 'disabled'）。
如何在 fetch 中使用 preloadResponse
在 fetch 事件监听器中，检查 event.preloadResponse 是否存在且有效。它是一个 Promise，resolve 后返回预加载的 Response 对象。
- 优先使用预加载响应（适合快速兜底）
- 结合缓存策略做 fallback（例如：preload 失败 → 查 cache → 再失败 → 走网络）
示例逻辑：
self.addEventListener('fetch', event => {<br> if (event.request.destination !== 'document') return;<br> event.respondWith(<br> (async () => {<br> try {<br> const preloadResp = await event.preloadResponse;<br> if (preloadResp) return preloadResp;<br> } catch (e) {}<br> // 预加载不可用时，走常规缓存策略<br> return caches.match(event.request).then(r => r || fetch(event.request));<br>  })()<br> );<br>});
注意事项与限制
Navigation Preload 不是万能的，需注意以下几点：
- 仅适用于 navigation 请求（HTML 文档），不适用于子资源
- 预加载响应默认不带 CORS 头，若页面跨域，需服务端配合添加
Access-Control-Allow-Origin等头，否则 JS 中无法读取 body 或 headers - 预加载请求会复用当前页面的 credentials（如 cookies），行为与正常导航一致
- 如果 SW 在 preload 响应到达前已激活并拦截了请求，浏览器会取消预加载请求（避免重复）
- Chrome、Edge、Firefox 支持良好；Safari 目前暂不支持（截至 Safari 17.5）
