FetchEvent.request
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