これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

仕様

仕様書 策定状況 コメント
Service Workers
FetchEvent の定義
草案 初期定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応40 あり441 なし27 なし
client42 ?44 なし24 なし
clientId49 ?451 なし36 なし
isReload45 ?441 なし32 なし
navigationPreload59 ? ? ?46 ?
preloadResponse59 ? ? ?46 ?
request あり ?44 なし あり なし
respondWith422 ?

593

441

なし29 なし
resultingClientId ? ? ? ? ? ?
targetClientId ? ? ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4040 ?4427 なし4.0
client ?44 ? なし ? なし4.0
clientId4949 ?4536 なし5.0
isReload4545 ?4432 なし5.0
navigationPreload5959 ? ?46 ?7.0
preloadResponse5959 ? ?46 ?7.0
request ? あり ? ? あり ? あり
respondWith422422 ? ?29 ?4.0
resultingClientId ? ? ? ? ? ? ?
targetClientId ? ? ? ? ? ? ?

1. Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

2. NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on — see https://www.chromestatus.com/feature/5694278818856960.

3. NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, lv7777
最終更新者: Uemmra3,