FetchEvent.preloadResponse

FetchEvent インターフェイスの preloadResponse 読み取り専用プロパティは、ナビゲーションプリロードがトリガーされた場合はナビゲーションプリロード Response に解決され、それ以外の場合は undefined に解決される Promise を返します。

構文

var expectedResponse = fetchEvent.preloadResponse;

Response に解決されるか、それ以外の場合は undefined に解決される Promise

このコードスニペットは、ナビゲーションプリロードのページ(英語)からのものです。 ServiceWorkerGlobalScope.onfetch イベントハンドラーは、fetch イベントをリッスンします。 起動したら、FetchEvent.respondWith() に、制御されたページに戻す Promise を渡します。 この Promise は、Cache オブジェクトで最初に一致した URL リクエストに解決されます。 一致が見つからない場合、コードはプリロード済みのレスポンスをチェックします。 それ以外の場合は、ネットワークからレスポンスをフェッチします。

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報