FetchEvent

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

コンストラクター

FetchEvent() (en-US): 新しい 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