ServiceWorkerGlobalScope.onfetch

ServiceWorkerGlobalScope インターフェイスの onfetch プロパティは、fetch イベントが発生するたびに(通常、WindowOrWorkerGlobalScope.fetch() メソッドが呼び出されたときに)発火するイベントハンドラーです。

構文

serviceWorkerGlobalScope.onfetch = function(fetchEvent) { ... };

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです(プリフェッチの例をライブで見る)。ServiceWorkerGlobalScope.onfetch イベントハンドラーは、fetch イベントをリッスンします。 コードが実行されると、コードは、Cache オブジェクト内の最初に一致するリクエストに解決するプロミスを返します。 一致が見つからない場合、コードはネットワークからレスポンスをフェッチします。

このコードは、fetch() 操作からスローされた例外も処理します。 HTTP エラーレスポンス(404 など)は例外をトリガーしないことに注意してください。 適切なエラーコードが設定された通常のレスポンスオブジェクトを返します。

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found response in cache:', response);

        return response;
      }
      console.log('No response found in cache. About to fetch from network...');

      return fetch(event.request).then(function(response) {
        console.log('Response from network is:', response);

        return response;
      }).catch(function(error) {
        console.error('Fetching failed:', error);

        throw error;
      });
    })
  );
});

仕様

仕様 状態 コメント
Service Workers
Event Handlers の定義
草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onfetch
実験的
Chrome 完全対応 40Edge 完全対応 ≤79Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 24Safari 完全対応 11.1WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報