FetchEvent

これは、サービスワーカーのグローバルスコープにディスパッチされる 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);
  }());
});

• Promise
• Fetch API