FetchEvent
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.
* Some parts of this feature may have varying levels of support.
これは fetch イベント用のイベント型で、サービスワーカーのグローバルスコープに配信されます。これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。これは、このフェッチへのレスポンスを提供する event.respondWith() メソッドを提供します。
コンストラクター
FetchEvent()-
新しい
FetchEventオブジェクトを作成します。 このコンストラクターは通常は使用しません。 ブラウザーはこのオブジェクト自体を作成してfetchイベントのコールバックに提供します。
プロパティ
祖先である Event からプロパティを継承しています。
FetchEvent.clientId読取専用FetchEvent.preloadResponse読取専用-
ResponseのためのPromise、またはこのフェッチがナビゲーションでない場合や、ナビゲーションの先読みが有効になっていない場合はundefinedです。 FetchEvent.replacesClientId読取専用FetchEvent.resultingClientId読取専用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);
})(),
);
});
仕様書
| Specification |
|---|
| Service Workers # fetchevent-interface |