Service Worker API の NavigationPreloadManager
インターフェイスは、サービスワーカーによるリソースのプリロード(事前読み込み)を管理するためのメソッドを提供します。
メソッド
NavigationPreloadManager.enable()
- ナビゲーションのプリロードを有効にし、解決する
Promise
を返します。 NavigationPreloadManager.disable()
- ナビゲーションのプリロードを無効にし、解決する
Promise
を返します。 NavigationPreloadManager.setHeaderValue()
Service-Worker-Navigation-Preload
ヘッダーの値を設定し、空のPromise
を返します。NavigationPreloadManager.getState()
- プリロードが有効かどうかと、
Service-Worker-Navigation-Preload
の内容を示すプロパティを持つオブジェクトに解決するPromise
を返します。
例
ナビゲーションのプリロードの機能を検出して有効化
addEventListener('activate', event => {
event.waitUntil(async function() {
if (self.registration.navigationPreload) {
// ナビゲーションのプリロードを有効にします!
await self.registration.navigationPreload.enable();
}
}());
});
プリロードされたレスポンスの使用
次の例は、プリロードされたレスポンスを使用する fetch イベントの実装を示しています。
addEventListener('fetch', event => {
event.respondWith(async function() {
// 可能なら、キャッシュから応答します
const cachedResponse = await caches.match(event.request);
if (cachedResponse) return cachedResponse;
// それがなく、プリロードされたレスポンスがあれば、それを使用します
const response = await event.preloadResponse;
if (response) return response;
// それもなければ、ネットワークを試します。
return fetch(event.request);
}());
});
仕様
仕様 | 状態 | コメント |
---|---|---|
Service Workers NavigationPreloadManager の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.