NavigationPreloadManager

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

メソッド

NavigationPreloadManager.enable()
ナビゲーションのプリロードを有効にし、解決する Promise を返します。
NavigationPreloadManager.disable()
ナビゲーションのプリロードを無効にし、解決する Promise を返します。
NavigationPreloadManager.setHeaderValue()
Service-Worker-Navigation-Preload ヘッダーの値を設定し、空の Promise を返します。
NavigationPreloadManager.getState()
プリロードが有効かどうかと、Service-Worker-Navigation-Preload の内容を示すプロパティを持つオブジェクトに解決する Promise を返します。

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

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 の定義
草案 初期定義

ブラウザーの互換性

BCD tables only load in the browser