工作区导航预加载

使用导航预加载加速 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

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