FetchEvent

これは service worker global scope にディスパッチされる fetch イベント用のイベントタイプです。これは fetch に関する情報、リクエストや受け手がどうレスポンスを扱うのかといったものを含みます。これはevent.respondWith() メソッドを提供し、そこでは fetch へのレスポンスが提供できます。

コンストラクター

FetchEvent()

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

プロパティ

先祖の Event からプロパティを継承します。

fetchEvent.clientId 読取専用

fetch を初期化する同一 クライアント の id。

fetchEvent.preloadResponse 読取専用

Response へのPromise、または navigation や navigation preload が有効化されていない場合は void。

fetchEvent.request 読取専用

ブラウザーが意図するリクエスト。

メソッド

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

fetchEvent.respondWith()

ブラウザー既定の fetch 処理を抑止し、自身のレスポンス (の promise を) 提供します。

extendableEvent.waitUntil()

イベントの生存期間を延長します。ブラウザーにレスポンスの返却を超えて延長するタスク、例えばストリーミングやキャッシングを通知します。

例

fetch イベントはブラウザー既定の非-GET リクエストを使います。GET リクエストに対してはキャッシュからマッチするものを返そうとし、ネットワークに退却します。キャッシュにマッチするものが見つかった場合、非同期に次回のキャッシュを更新します。

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