FetchEvent.respondWith()

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

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

構文

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

戻り値

なし。

パラメーター

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

例

このコードスニペットは、service worker fetch sample（fetch 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;
      });
    })
  );
});

仕様

ブラウザ実装状況

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

関連項目

• Service Worker の利用について
• Service workers basic code example
• Is ServiceWorker ready?
• Promise
• web worker を使用する
• Fetch API