工作区导航预加载

“使用导航预加载加快 Service Worker 的速度”非常详细地介绍了导航预加载的含义，以及它为 Service Worker 未明确处理导航请求的 Web 应用带来的好处。

此模块有何用途？

workbox-navigation-preload 将在运行时处理检查，以确定当前浏览器是否支持导航预加载，如果支持，则会自动创建 activate 事件处理脚本来启用它。

workbox-core 中用于处理在所有 Workbox 中发出网络请求的共享代码也已更新，以自动利用预加载响应（如果有）。这意味着，任何内置策略在启用导航预加载后都可以自动利用导航预加载。

谁应启用导航栏预加载？

如果开发者已经在通过响应预缓存的 HTML（可能配置了应用壳回退）来处理导航，则无需启用导航预加载！对于无法预缓存 HTML 但仍希望使用 Workbox 处理其网站上其他资源的缓存的开发者，此功能旨在缩短导航延迟时间。

例如，如果您遵循 App Shell 模式，并且已设置导航路线以使用预缓存的 HTML，则启用导航预加载将是一种浪费。与预加载请求关联的网络响应最终永远不会被使用，因为系统会无条件使用预缓存的 HTML。

基本用法

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

浏览器支持情况如何？

目前，Google Chrome 是唯一支持导航预加载的浏览器。enable() 会在运行时检查浏览器支持情况，并且仅在当前浏览器支持导航预加载时尝试启用导航预加载。因此，在您的 Service Worker 中无条件调用 enable() 是安全的。

请注意，这些浏览器不会受益于导航延迟时间缩短，因此建议您仔细衡量发布不处理导航请求且不使用导航预加载的服务工作器对性能的影响。

方法

disable()

workbox-navigation-preload.disable()

如果浏览器支持导航预加载，则此操作会停用导航预加载。

enable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

如果浏览器支持导航预加载，则此操作将启用该功能。

参数

• headerValue

  字符串（选填）

isSupported()

workbox-navigation-preload.isSupported()

返回

• 布尔值

  当前浏览器是否支持启用导航预加载。