FetchEvent.respondWith()

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

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

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

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

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

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

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

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

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

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

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

undefined。

この 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 Worker の使用
• ServiceWorker の準備はできていますか？（英語）
• Promise
• Fetch API