FetchEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

* Some parts of this feature may have varying levels of support.

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

仕様書

Specification
Service Workers
# fetchevent-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FetchEvent
FetchEvent() constructor
clientId
handled
isReload
DeprecatedNon-standard
preloadResponse
request
respondWith
NetworkError thrown if the request mode is same-origin and the response type is cors
Change in behavior when specifying the final URL of a resource.
Experimental
resultingClientId

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

関連情報