FetchEvent

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月⁩.

* Some parts of this feature may have varying levels of support.

これは fetch イベント用のイベント型で、サービスワーカーのグローバルスコープに配信されます。これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。これは、このフェッチへのレスポンスを提供する event.respondWith() メソッドを提供します。

コンストラクター

FetchEvent(): 新しい FetchEvent オブジェクトを作成します。このコンストラクターは通常は使用しません。ブラウザーはこのオブジェクト自体を作成して fetch イベントのコールバックに提供します。

プロパティ

祖先である Event からプロパティを継承しています。

FetchEvent.clientId 読取専用: フェッチを開始した同一オリジンのクライアントの id です。
FetchEvent.preloadResponse 読取専用: Response のための Promise、またはこのフェッチがナビゲーションでない場合や、ナビゲーションの先読みが有効になっていない場合は undefined です。
FetchEvent.replacesClientId 読取専用: ページのナビゲーション中に置き換えられるクライアントの id です。
FetchEvent.resultingClientId 読取専用: ページのナビゲーション中に前のクライアントを置き換えるクライアントの id です。
FetchEvent.request 読取専用: ブラウザーが行おうとしている Request です。

メソッド

親である ExtendableEvent からメソッドを継承しています。

FetchEvent.respondWith(): ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス(のプロミス)を提供します。
ExtendableEvent.waitUntil(): イベントの存続期間を延長します。ストリーミングやキャッシュなど、レスポンスの返却を超えて延長するタスクをブラウザーに通知するために使用します。

例

この fetch イベントは、 GET 以外のリクエストに対してブラウザー既定のものを使用します。 GET リクエストに対してはキャッシュから一致するものを返そうとし、ない場合はネットワークから読み取ります。キャッシュに一致するものが見つかった場合、次回ためにキャッシュを非同期に更新します。

self.addEventListener("fetch", (event) => {
 // GET 以外のリクエストでは、ブラウザーに既定のことをさせる
 if (event.request.method !== "GET") return;
 // 既定のことを行わず、自分自身のリクエストを扱う
 event.respondWith(
 (async () => {
 // キャッシュからレスポンスの取得を試みる
 const cache = await caches.open("dynamic-v1");
 const cachedResponse = await cache.match(event.request);
 if (cachedResponse) {
 // キャッシュに一致するものが見つかった場合は返却し、
 // バックグラウンドでキャッシュ内の項目を更新
 event.waitUntil(cache.add(event.request));
 return cachedResponse;
 }
 // キャッシュに一致するものがなければ、ネットワークのものを使用
 return fetch(event.request);
 })(),
 );
});