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.

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

ブラウザーの互換性

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
request

Legend

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

Full support
Full support
No support
No support

関連情報