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