FetchEvent

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年4月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

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

Event ExtendableEvent FetchEvent

コンストラクター

FetchEvent()

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

プロパティ

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

FetchEvent.clientId 読取専用

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

FetchEvent.preloadResponse 読取専用

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

FetchEvent.replacesClientId 読取専用

ページのナビゲーション中に置き換えられるクライアントの id です。

FetchEvent.resultingClientId 読取専用

ページのナビゲーション中に前のクライアントを置き換えるクライアントの id です。

FetchEvent.request 読取専用

ブラウザーが行おうとしている Request です。

メソッド

親である ExtendableEvent からメソッドを継承しています。

FetchEvent.respondWith()

ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス（のプロミス）を提供します。

ExtendableEvent.waitUntil()

イベントの存続期間を延長します。ストリーミングやキャッシュなど、レスポンスの返却を超えて延長するタスクをブラウザーに通知するために使用します。

例

この fetch イベントは、 GET 以外のリクエストに対してブラウザー既定のものを使用します。 GET リクエストに対してはキャッシュから一致するものを返そうとし、ない場合はネットワークから読み取ります。キャッシュに一致するものが見つかった場合、次回ためにキャッシュを非同期に更新します。

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