NavigationPreloadManager - 提供了用于管理 Service Worker 资源预加载的方法

NavigationPreloadManager 是 Service Worker API 的接口，提供了用于管理 Service Worker 资源预加载的方法。

方法

NavigationPreloadManager.enable()

返回一个 Promise，当启用导航预加载时解析。

NavigationPreloadManager.disable()

返回一个 Promise}，当禁用导航预加载时解析。

NavigationPreloadManager.setHeaderValue()

设置 Service-Worker-Navigation-Preload header 头的值，并返回一个空的 Promise。

NavigationPreloadManager.getState()

返回一个 Promise，它解析为一个对象，该对象的属性指示是否启用了预加载以及 Service-Worker-Navigation-Preload 的内容。

实例

功能检测和启用导航预加载

addEventListener('activate', event => {
  event.waitUntil(async function() {
    if (self.registration.navigationPreload) {
      // 启用导航预加载！
      await self.registration.navigationPreload.enable();
    }
  }());
});

使用预加载的响应

以下实例显示了使用预加载的响应的 fetch 事件的实现。

addEventListener('fetch', event => {
  event.respondWith(async function() {
    // 如果可以的话，从缓存中返回响应
    const cachedResponse = await caches.match(event.request);
    if (cachedResponse) return cachedResponse;

    // 否则，使用预加载的响应（如果有的话）
    const response = await event.preloadResponse;
    if (response) return response;

    // 否则尝试网络获取。
    return fetch(event.request);
  }());
});

规范

规范	状态	备注
Service Workers NavigationPreloadManager 的定义	编者的草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 实现在 bug 1290958 中跟踪