navigation preload 通过并行发起原始网络请求解决 sw 初始化与首屏 html 加载的串行阻塞，需显式启用、按 destination 过滤、三级 fallback（preload→cache→fetch），并配合预缓存静态资源。

Navigation Preload 不是让 Service Worker “提前启动”，而是让浏览器在 SW 启动的同时，并行发起原始网络请求。它解决的是“SW 初始化耗时”与“等待首屏 HTML”之间的串行阻塞问题，真正让首屏加载不卡顿。

注册阶段必须显式启用

仅靠检测 API 是否存在是不够的，必须调用 enable() 并确保 Promise 完成：

• 在 navigator.serviceWorker.register() 的 then 回调中执行 registration.navigationPreload.enable()
• 加上容错处理：.catch(() => {})，避免不支持时抛错中断流程
• 不支持的旧版浏览器（如 Safari

fetch 中安全使用 preloadResponse

不能直接返回 event.preloadResponse，它可能为空、reject 或不适用于当前请求：

• 只对 event.request.destination === 'document' 的导航请求启用
• 始终用 .then(r => r).catch(() => null) 包裹，防止 Promise 拒绝中断链路
• 采用三级 fallback：优先用预加载响应 → 未命中则查缓存 → 最后回退 fetch

必须配合预缓存才能见效

Navigation Preload 解决“新请求不等 SW”，但无法替代静态资源的本地秒回：

• 在 install 阶段用 caches.open().addAll() 预存首页骨架（/index.html、关键 CSS/JS）
• HTML 必须是构建时生成的纯静态版本，禁止在 install 中用 fetch 动态拉首页
• 最终响应策略应为：preloadResponse → cache.match() → fetch(event.request)，顺序不可颠倒

注意冷启动与兼容性边界

该机制在 Chrome、Edge、Firefox 和 Safari 11.3+ 中已稳定支持，但仍有细节需关注：

• 冷启动（首次访问或 SW 进程被终止）时，preload 响应仍可被接收并复用
• 若用户快速刷新页面，SW 可能尚未激活完成，此时 preloadResponse 仍有效
• 不适用于子资源（如图片、字体、API），仅作用于 navigation 类型请求

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！