NavigationPreloadManager

Service Worker API の NavigationPreloadManager インターフェイスは、サービスワーカーによるリソースのプリロード（事前読み込み）を管理するためのメソッドを提供します。

メソッド

ナビゲーションのプリロードを有効にし、解決する Promise を返します。

ナビゲーションのプリロードを無効にし、解決する Promise を返します。

Service-Worker-Navigation-Preload ヘッダーの値を設定し、空の Promise を返します。

プリロードが有効かどうかと、Service-Worker-Navigation-Preload の内容を示すプロパティを持つオブジェクトに解決する Promise を返します。

例

ナビゲーションのプリロードの機能を検出して有効化

js
addEventListener("activate", (event) => {
  event.waitUntil(
    (async function () {
      if (self.registration.navigationPreload) {
        // ナビゲーションのプリロードを有効にします！
        await self.registration.navigationPreload.enable();
      }
    })(),
  );
});

プリロードされたレスポンスの使用

次の例は、プリロードされたレスポンスを使用する fetch イベントの実装を示しています。

js
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);
    })(),
  );
});

仕様

Specification
Service Workers
# navigation-preload-manager

ブラウザーの互換性

BCD tables only load in the browser