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>});

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

也可用 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>   &nbsp})()<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）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！