FetchEvent

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

コンストラクター

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

プロパティ

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

FetchEvent.clientId 読取専用
フェッチを開始した同一オリジンの Clientid
FetchEvent.preloadResponse 読取専用
Response への Promise、またはこのフェッチがナビゲーションでない場合や、ナビゲーションのプリロードが有効になっていない場合は undefined
FetchEvent.replacesClientId 読取専用
ページのナビゲーション中に置き換えられる Clientid
FetchEvent.resultingClientId 読取専用
ページのナビゲーション中に前のクライアントを置き換える Clientid
FetchEvent.request 読取専用
ブラウザーが行うつもりの Request

メソッド

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

FetchEvent.respondWith()
ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス (の promise を) 提供します。
ExtendableEvent.waitUntil()

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

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

self.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() の定義
草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
FetchEvent
実験的
Chrome 完全対応 40Edge 完全対応 ≤18Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 27Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 27Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
FetchEvent() constructor
実験的
Chrome 完全対応 40Edge 完全対応 ≤18Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 27Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 27Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
client
実験的非推奨非標準
Chrome 完全対応 42Edge 完全対応 ≤79Firefox 完全対応 44IE 未対応 なしOpera 完全対応 27Safari 未対応 なしWebView Android 完全対応 42Chrome Android 完全対応 44Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
clientId
実験的
Chrome 完全対応 49Edge 完全対応 ≤79Firefox 完全対応 45
補足
完全対応 45
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 36Safari 未対応 なしWebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 45Opera Android 完全対応 36Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
isReload
実験的非推奨
Chrome 完全対応 45Edge 完全対応 17Firefox 未対応 44 — 74
補足
未対応 44 — 74
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 32Safari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 44Opera Android 完全対応 32Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
navigationPreload
実験的
Chrome 完全対応 59Edge 完全対応 ≤79Firefox ? IE 未対応 なしOpera 完全対応 46Safari 未対応 なしWebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
preloadResponse
実験的
Chrome 完全対応 59Edge 完全対応 18Firefox ? IE 未対応 なしOpera 完全対応 46Safari 未対応 なしWebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
replacesClientIdChrome 未対応 なしEdge 未対応 18 — 79Firefox 完全対応 65IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 65Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
request
実験的
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 44IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
respondWith
実験的
Chrome 完全対応 42
補足
完全対応 42
補足
補足 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.
Edge 完全対応 ≤79
補足
完全対応 ≤79
補足
補足 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.
Firefox 完全対応 59
補足
完全対応 59
補足
補足 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 29Safari 未対応 なしWebView Android 完全対応 42
補足
完全対応 42
補足
補足 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.
Chrome Android 完全対応 42
補足
完全対応 42
補足
補足 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.
Firefox Android ? Opera Android 完全対応 29Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
resultingClientIdChrome 完全対応 72Edge 完全対応 18Firefox 完全対応 65IE 未対応 なしOpera 完全対応 60Safari 未対応 なしWebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 完全対応 65Opera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 完全対応 11.0
targetClientIdChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報