FetchEvent.request

requestFetchEvent インターフェイスの読み取り専用プロパティで、イベントハンドラーを起動した Request を返します。

このプロパティは null 不可です(Firefox の場合、バージョン 46 以降)。 他の方法でリクエストが提供されない場合、コンストラクターの options オブジェクトにリクエストを設定する必要があります(FetchEvent.FetchEvent() を参照)。

Request オブジェクトです。

このコードスニペットは、サービスワーカーのフェッチの例からのものです(フェッチの例をライブで実行)。 onfetch イベントハンドラーは、fetch イベントを待ち受けします。イベントが発生、FetchEvent.respondWith() に、制御されたページに戻すプロミスを渡します。 このプロミスは、Cache オブジェクトで最初に一致した URL リクエストに解決されます。 一致が見つからない場合、コードはネットワークからレスポンスをフェッチします。

このコードは、fetch() 操作で発生した例外も処理します。 HTTP のエラーレスポンス(404 など)でも例外は発生しないことに注意してください。然るべきエラーコードが設定された通常のレスポンスオブジェクトを返します。

js
self.addEventListener("fetch", (event) => {
  console.log("フェッチイベントの処理:", event.request.url);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("キャッシュで見つかったレスポンス:", response);

        return response;
      }
      console.log(
        "キャッシュにレスポンスが見つかりません。 ネットワークから読み取ります...",
      );

      return fetch(event.request)
        .then((response) => {
          console.log("ネットワークからのレスポンス:", response);

          return response;
        })
        .catch((error) => {
          console.error("フェッチ失敗:", error);

          throw error;
        });
    }),
  );
});

仕様書

Specification
Service Workers
# fetch-event-request

ブラウザーの互換性

BCD tables only load in the browser

関連情報