FetchEvent: preloadResponse プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2022年4月⁩.

メモ: この機能はサービスワーカー内でのみ利用可能です。

preloadResponse は FetchEvent インターフェイスの読み取り専用プロパティで、 Promise を返します。これは、ナビゲーション先読みが発生した場合はナビゲーション先読みの Response に解決し、それ以外の場合は undefined に解決します。

ナビゲーション先読みは、ナビゲーション先読みが有効であり、リクエストが GET リクエストであり、かつナビゲーションリクエスト（ページや iframe を読み込むときにブラウザーが生成）である場合に起動します。

サービスワーカーは、 fetch イベントハンドラーでこのプロミスを待機することで、サービスワーカーの起動中に行われた読み込みリクエストの完了を追跡することができます。

値

Promise で、 Response に解決するか、それ以外の場合は undefined に解決します。

例

このコードスニペットは、 Speed up Service Worker with Navigation Preloads （英語）からのものです。

onfetch イベントハンドラーは、fetch イベントを待ち受けします。起動したら、FetchEvent.respondWith() に、制御されたページに戻すプロミスを渡します。このプロミスは、リクエストされたリソースに解決します。

もし Cache オブジェクトの中に一致する URL リクエストがあれば、コードはキャッシュからレスポンスを返すためのプロミスを返します。キャッシュに一致するものが見つからなかった場合、コードは preloadResponse にあるプロミスを返します。キャッシュや先読みされたレスポンスに一致するものがない場合、コードはネットワークからレスポンスをフェッチし、関連するプロミスを返します。

addEventListener("fetch", (event) => { event.respondWith( (async () => { // 可能な場合はキャッシュから応答します const cachedResponse = await caches.match(event.request); if (cachedResponse) return cachedResponse; // それ以外の場合は、プリロード済みのレスポンスがあればそれを使用します const response = await event.preloadResponse; if (response) return response; // それ以外の場合は、ネットワークを試します。 return fetch(event.request); })(), ); });