これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

  • fetchEvent.request オブジェクトの mode が "no-cors"の場合にだけ、"opaque" type(不透過型) のResponse オブジェクトを返すことができます。これはプライベートデータの漏えいを防ぎます。
  • fetchEvent.request オブジェクトの mode が "manual"の場合にだけ "opaqueredirect" type(不透過直接型) の Response オブジェクトを返すことができます。
  • fetchEvent.request オブジェクトのmode t が "same-origin"の場合、"cors" typeResponse オブジェクトを返すことはできません。

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

Firefox 59 以降は、service worker が FetchEvent.respondWith() への Response を提供する時、Response.url の値は中断されたネットワークリクエストに最終 URL として伝搬します。Response.url の値が空文字の場合、FetchEvent.request.url が最終 URL として使われます。

過去では FetchEvent.request.url がすべての場合に最終 URL として使われていました。Response.url は効率よく無視されていました。

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

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

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

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

構文

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

パラメーター

ResponsePromise

返り値

Void。

例外

例外 注記
NetworkError ネットワークエラーはFetchEvent.request.modeResponse.type  の値の組み合わせでトリガーされ、それは上記の "グローバルルール" にヒントが載っています。

この fetch イベントはキャッシュ API からのレスポンスを返そうとして、そうでないネットワークに縮退します。

addEventListener('fetch', event => {
  // Prevent the default, and handle the request ourselves.
  event.respondWith(async function() {
    // Try to get the response from a cache.
    const cachedResponse = await caches.match(event.request);
    // Return it if we found one.
    if (cachedResponse) return cachedResponse;
    // If we didn't find a match in the cache, use the network.
    return fetch(event.request);
  }());
});

仕様

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応421 ?

592

443

なし29 なし
Change in behavior when specifying the final URL of a resource. なし ?59 なし ? なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応421421 ? ?29 ?4.0
Change in behavior when specifying the final URL of a resource. なし なし ? ? ? なし なし

1. NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on — see https://www.chromestatus.com/feature/5694278818856960.

2. NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).

3. Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

関連項目

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

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