MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

FetchEvent.respondWith()

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

FetchEvent インターフェースの respondWith() メソッドは、制御しているページからのリクエストにカスタムレスポンスを生成するコードを含めることを意図したものです。このコードは、ResponseFetch への ネットワークエラー を返して解決されます。

レンダ側でのクロスオリジンコンテントの汚染チェックは、URL にではなく Response ボディの透過度(または、不透過度)に関連付けられます。リクエストがトップレベルナビゲーションで、戻り値が type 属性が opaque(たとえば、opaque response body)の Response だった場合、ネットワークエラーFetch に返されます。すべて成功した(ネットワークエラーが発生しない)レスポンスの最後の URL が要求された URL です。

構文

FetchEvent.respondWith(
  // Response かネットワークエラーで解決されるコード。
​)

戻り値

なし。

パラメーター

カスタムレスポンスを生成する何らかのコード。

このコードスニペットは、service worker fetch samplefetch sample ライブを実行する)から取得しています。ServiceWorkerGlobalScope.onfetch イベントハンドラは、fetch イベントをリスンします。イベントが発火すると、FetchEvent.respondWith(any value) は制御されたページに promise を返します。この promise は Cache オブジェクト内で 最初にマッチした URL リクエストで解決します。マッチするものが見つからない場合、ネットワークからレスポンスを取得します。

このコードでは、ServiceWorkerGlobalScope.fetch 操作からスローされる例外の制御も行っています。HTTP エラーレスポンス(たとえば、404)は、例外を発生させないことに注意してください。この場合、適切なエラーコードが設定された通常の response オブジェクトが返されます。

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 40.0 44.0 (44.0)[1] 未サポート 24 未サポート
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート ? 44.0 (44.0) (有) 未サポート ? 未サポート 44.0

[1] Service worker(と Push)は、Firefox 45 延長サポート版(ESR)では使用できません。

関連項目

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

 このページの貢献者: chikoski, YuichiNukiyama
 最終更新者: chikoski,