FetchEvent.request

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.

request は FetchEvent インターフェイスの読み取り専用プロパティで、イベントハンドラーを起動した 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

関連情報