工作区导航预加载

“使用导航预加载加速 Service Worker”很好地解释了什么是导航预加载，以及它为 Service Worker 未明确处理导航请求的 Web 应用提供的优势。

此模块的用途是什么？

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

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

谁应该启用导航预加载？

如果开发者已使用预缓存的 HTML（可能配置了 App Shell 回退）响应导航，则无需启用导航预加载！如果开发者无法预缓存其 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() 是安全的。

请注意，减少导航延迟对此类浏览器没有好处，因此建议您仔细衡量传送不处理导航请求和不使用导航预加载的 Service Worker 对性能的影响。

方法

disable()

workbox-navigation-preload.disable()

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

enable()

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

如果浏览器支持导航预加载，则会启用导航预加载。

参数

• headerValue

  字符串（可选）

isSupported()

workbox-navigation-preload.isSupported()

返回

• boolean

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