FetchEvent

コンストラクター

FetchEvent()

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

プロパティ

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

FetchEvent.clientId 読取専用

フェッチを開始した同一オリジンのクライアントの id です。

FetchEvent.handled 読取専用

イベントが処理されるまでは待機中であり、イベントが処理されると履行されるプロミスです。

FetchEvent.isReload 読取専用

イベントが、ページの再読み込みを試みたユーザーによって配信された場合は true を返し、それ以外の場合は false を返します。

FetchEvent.preloadResponse 読取専用

Response のための Promise、またはこのフェッチがナビゲーションでない場合や、ナビゲーションの先読みが有効になっていない場合は undefined です。

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);
    })(),
  );
});

仕様書

ブラウザーの互換性

関連情報

• fetch イベント
• Promise
• フェッチ API