FetchEvent: preloadResponse プロパティ
メモ: この機能はサービスワーカー内でのみ利用可能です。
preloadResponse
は FetchEvent
インターフェイスの読み取り専用プロパティで、 Promise
を返します。これは、ナビゲーション先読みが発生した場合はナビゲーション先読みの Response
に解決し、れ以外の場合は undefined
に解決します。
ナビゲーション先読みは、ナビゲーション先読みが有効であり、リクエストが GET
リクエストであり、かつナビゲーションリクエスト(ページや iframe を読み込むときにブラウザーが生成)である場合に起動します。
サービスワーカーは、 fetch イベントハンドラーでこのプロミスを待機することで、サービスワーカーの起動中に行われた読み込みリクエストの完了を追跡することができます。
値
例
このコードスニペットは、 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);
})(),
);
});
仕様書
Specification |
---|
Service Workers # fetch-event-preloadresponse |
ブラウザーの互換性
BCD tables only load in the browser