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

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,