FetchEvent: preloadResponse プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

メモ: この機能はサービスワーカー内でのみ利用可能です。

preloadResponseFetchEvent インターフェイスの読み取り専用プロパティで、 Promise を返します。これは、ナビゲーション先読みが発生した場合はナビゲーション先読みの Response に解決し、それ以外の場合は undefined に解決します。

ナビゲーション先読みは、ナビゲーション先読みが有効であり、リクエストが GET リクエストであり、かつナビゲーションリクエスト(ページや iframe を読み込むときにブラウザーが生成)である場合に起動します。

サービスワーカーは、 fetch イベントハンドラーでこのプロミスを待機することで、サービスワーカーの起動中に行われた読み込みリクエストの完了を追跡することができます。

Promise で、 Response に解決するか、それ以外の場合は undefined に解決します。

このコードスニペットは、 Speed up Service Worker with Navigation Preloads (英語)からのものです。

onfetch イベントハンドラーは、fetch イベントを待ち受けします。 起動したら、FetchEvent.respondWith() に、制御されたページに戻すプロミスを渡します。 このプロミスは、リクエストされたリソースに解決します。

もし Cache オブジェクトの中に一致する URL リクエストがあれば、コードはキャッシュからレスポンスを返すためのプロミスを返します。 キャッシュに一致するものが見つからなかった場合、コードは preloadResponse にあるプロミスを返します。 キャッシュや先読みされたレスポンスに一致するものがない場合、コードはネットワークからレスポンスをフェッチし、関連するプロミスを返します。

js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // 可能な場合はキャッシュから応答します
      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
# fetch-event-preloadresponse

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
preloadResponse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報