FetchEvent.request

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年4月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

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

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

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

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

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;
        });
    }),
  );
});