これは、サービスワーカーのグローバルスコープにディスパッチされる fetch
イベント用のイベント型です。 これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。 これは、このフェッチへのレスポンスを提供できるようにする event.respondWith()
メソッドを提供します。
コンストラクター
FetchEvent()
- 新しい
FetchEvent
オブジェクトを作成します。 このコンストラクターは通常は使用しません。 ブラウザーはこのオブジェクト自体を作成してfetch
イベントのコールバックのために提供します。
プロパティ
先祖の Event
からプロパティを継承します。
FetchEvent.clientId
読取専用- フェッチを開始した同一オリジンの
Client
のid
。 FetchEvent.preloadResponse
読取専用Response
へのPromise
、またはこのフェッチがナビゲーションでない場合や、ナビゲーションのプリロードが有効になっていない場合はundefined
。FetchEvent.replacesClientId
読取専用- ページのナビゲーション中に置き換えられる
Client
のid
。 FetchEvent.resultingClientId
読取専用- ページのナビゲーション中に前のクライアントを置き換える
Client
のid
。 FetchEvent.request
読取専用- ブラウザーが行うつもりの
Request
。
メソッド
親である ExtendableEvent
からメソッドを継承します。
FetchEvent.respondWith()
- ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス (の promise を) 提供します。
ExtendableEvent.waitUntil()
-
イベントの存続期間を延長します。 ストリーミングやキャッシングなど、レスポンスの返却を超えて延長するタスクをブラウザーに通知するために使用します。
例
この fetch イベントは、非 GET リクエストに対してブラウザー既定のものを使用します。 GET リクエストに対してはキャッシュからマッチするものを返そうとし、ネットワークにフォールバックします。 キャッシュにマッチするものが見つかった場合、次回ためにキャッシュを非同期に更新します。
self.addEventListener('fetch', event => {
// Let the browser do its default thing
// for non-GET requests.
if (event.request.method != 'GET') return;
// Prevent the default, and handle the request ourselves.
event.respondWith(async function() {
// Try to get the response from a cache.
const cache = await caches.open('dynamic-v1');
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
// If we found a match in the cache, return it, but also
// update the entry in the cache in the background.
event.waitUntil(cache.add(event.request));
return cachedResponse;
}
// If we didn't find a match in the cache, use the network.
return fetch(event.request);
}());
});
仕様
仕様 | 状態 | コメント |
---|---|---|
Service Workers FetchEvent() の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser