View Transitions 与 Service Worker Navigation Preload 导航加速与离线回退

View Transitions 与 Service Worker Navigation Preload 导航加速与离线回退概述Service Worker 引入的启动开销会增加首个导航延迟。借助 Navigation Preload 并配合 View Transitions，可在加速导航的同时保持过渡自然与可访问性。关键参数/概念预加载：`NavigationPreloadManager.enable()` 并通过 `Service-Worker-Navigation-Preload` 区分请求。兼容性：Chrome/Edge 支持较好；需根据站点策略选择启用范围。过渡控制：在激活页与离线回退场景提供一致过渡路径。实践/示例1) 启用 Navigation Preload（Service Worker）self.addEventListener('activate', (event) => { event.waitUntil((async () => { if ('navigationPreload' in self.registration) { await self.registration.navigationPreload.enable() await self.registration.navigationPreload.setHeaderValue('true') } })()) }) self.addEventListener('fetch', (event) => { if (event.request.mode === 'navigate') { event.respondWith((async () => { const preload = await event.preloadResponse try { return preload || await fetch(event.request) } catch (err) { // 离线回退：返回缓存的 Shell 或离线页 return caches.match('/offline.html') } })()) } }) 2) 页面过渡与降级封装function withTransition(run) { const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches if (reduce || !document.startViewTransition) { run(); return } document.startViewTransition(() => run()) } 调试与验证观察请求头：确认 `Service-Worker-Navigation-Preload` 是否随导航请求发送。DevTools/Workbox 日志：在开发环境查看导航预加载启用日志与命中情况。指标对比：采集启用/禁用预加载的导航耗时与 LCP 差异。注意事项站点使用 App Shell 预缓存时，预加载收益有限；按策略启用。离线回退需提供稳定的过渡与语义结构，不以动画替代信息。服务端需配置 `Vary: Service-Worker-Navigation-Preload`（如根据头返回不同内容）。参考资料MDN: `NavigationPreloadManager` 与 `Service-Worker-Navigation-Preload`（2025）https://developer.mozilla.org/en-US/docs/Web/API/NavigationPreloadManagerhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Service-Worker-Navigation-PreloadChrome Docs: Workbox 导航预加载与兼容说明（2025）https://developer.chrome.com/docs/workbox/navigation-preloadhttps://developer.chrome.com/docs/workbox/modules/workbox-navigation-preload