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

これは 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 の定義
草案 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 40Edge 完全対応 ありFirefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE 未対応 なしOpera 完全対応 27Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Edge Mobile ? Firefox Android 完全対応 44Opera Android 完全対応 27Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
FetchEvent() constructor
実験的
Chrome 完全対応 40Edge 完全対応 ありFirefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE 未対応 なしOpera 完全対応 27Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Edge Mobile ? Firefox Android 完全対応 44Opera Android 完全対応 27Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
client
実験的非推奨非標準
Chrome 完全対応 42Edge ? Firefox 完全対応 44IE 未対応 なしOpera 完全対応 24Safari 未対応 なしWebView Android ? Chrome Android 完全対応 44Edge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
clientId
実験的
Chrome 完全対応 49Edge ? Firefox 完全対応 45
補足
完全対応 45
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE 未対応 なしOpera 完全対応 36Safari 未対応 なしWebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile ? Firefox Android 完全対応 45Opera Android 完全対応 36Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
isReload
実験的
Chrome 完全対応 45Edge 完全対応 17Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE 未対応 なしOpera 完全対応 32Safari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile 完全対応 17Firefox Android 完全対応 44Opera Android 完全対応 32Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
navigationPreload
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Edge Mobile ? Firefox Android ? Opera Android 完全対応 46Safari iOS ? Samsung Internet Android 完全対応 7.0
preloadResponse
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Edge Mobile ? Firefox Android ? Opera Android 完全対応 46Safari iOS ? Samsung Internet Android 完全対応 7.0
request
実験的
Chrome 完全対応 ありEdge ? Firefox 完全対応 44IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android ? Chrome Android 完全対応 ありEdge Mobile ? 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 ? Firefox 完全対応 59
補足
完全対応 59
補足
補足 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
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.
Edge Mobile ? Firefox Android ? Opera Android 完全対応 29Safari iOS ? Samsung Internet Android 完全対応 4.0
resultingClientIdChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
targetClientIdChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

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

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