FetchEvent.respondWith()

FetchEvent インターフェイスの respondWith() メソッドは、ブラウザー既定の fetch ハンドリングを抑止して、あなたが Response 用の Promise を提供できるようにします。

たいていの場合、あなたは受け手が理解できるどんなレスポンスでも提供できます。例えば、<img> がリクエストを開始する場合、レスポンスボディには画像データが必要です。セキュリティの理由から、少しのグローバルルールがあります:

リソースの最終 URL を指定する

Firefox 59 以降では、サービスワーカーが FetchEvent.respondWith() に Response を渡すとき、その Response.url (en-US) の値がインターセプトされたネットワークリクエストの最終 URL として伝搬します。Response.url (en-US) の値が空文字の場合は、FetchEvent.request.url が最終 URL として利用されます。

かつては FetchEvent.request.url がすべての場合に最終 URL として使われていました。与えられた Response.url (en-US) は実際には無視されていました。

つまり、例えば、サービスワーカーがスタイルシートや Worker スクリプトをインターセプトすると、与えられた Response.url (en-US) が、サブリソースが読み込む相対的な @importimportScripts() の代わりに使われます (バグ 1222008)。

たいていのネットワークリクエストに対して、最終 URL を観測できないためこの変更は影響ありません。しかし、少しだけ関係する場合があります:

  • fetch() がインターセプトされた場合、結果の Response.url (en-US)で最終 URL を観測できます。
  • Worker スクリプトがインターセプトされた場合、最終 URL は self.location (en-US) をセットするのに使われ、Worker スクリプトの相対 URL の代わりのベース URL として使われます。
  • スタイルシートがインターセプトされた場合、最終 URL は相対的な @import 読み込みの代わりのベース URL として使われます。

Windowiframe のナビゲーションリクエストはこの最終 URL を使わ「ない」ことに注意してください。HTML 仕様のナビゲーションのリダイレクトの処理方法では、Window.location のためにリクエスト URL を使います。これは、オフラインの時に、ユーザーに見える URL を変更することなくサイトが「代替の」ウェブページを提供できるということを意味します。

構文

fetchEvent.respondWith(
  // Response に解決される Promise。);

パラメーター

Response または Response に解決される Promise。それ以外の場合は、ネットワークエラーが Fetch に返されます。

返り値

undefined

例外

例外 注記
NetworkError 上記の "グローバルルール" にヒントがあるように、ネットワークエラーは FetchEvent.request.modeResponse.type (en-US)  の値の組み合わせでトリガーされます。
InvalidStateError イベントがディスパッチされていないか、respondWith() が既に呼び出されています。

この fetch イベントはキャッシュ API からのレスポンスを返そうとし、ない場合にはネットワークにフォールバックします。

addEventListener('fetch', event => {
  // デフォルトを抑止し、リクエストを自分で処理します。
  event.respondWith(async function() {
    // キャッシュからレスポンスを取得しようとします。
    const cachedResponse = await caches.match(event.request);
    // 見つかったらそれを返します。
    if (cachedResponse) return cachedResponse;
    // キャッシュ内に一致するものが見つからなかった場合は、ネットワークを使用します。
    return fetch(event.request);
  }());
});

仕様

仕様 状態 コメント
Service Workers
respondWith() の定義
草案 初期定義。

ブラウザー実装状況

BCD tables only load in the browser

関連項目