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

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

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 42
補足
完全対応 42
補足
補足 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.
Edge ? Firefox 完全対応 59
補足
完全対応 59
補足
補足 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE 未対応 なしOpera 完全対応 29Safari 未対応 なしWebView Android 完全対応 42
補足
完全対応 42
補足
補足 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.
Chrome Android 完全対応 42
補足
完全対応 42
補足
補足 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.
Edge Mobile ? Firefox Android ? Opera Android 完全対応 29Safari iOS ? Samsung Internet Android 完全対応 4.0
Change in behavior when specifying the final URL of a resource.
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 59IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連項目

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

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