NavigationPreloadManager

Service Worker APINavigationPreloadManager インターフェイスは、サービスワーカーによるリソースのプリロード(事前読み込み)を管理するためのメソッドを提供します。

メソッド

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
NavigationPreloadManager
実験的
Chrome 完全対応 62Edge 完全対応 18Firefox 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
disable
実験的
Chrome 完全対応 62Edge 完全対応 18Firefox 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
enable
実験的
Chrome 完全対応 62Edge 完全対応 18Firefox 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
getState
実験的
Chrome 完全対応 62Edge 完全対応 18Firefox 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
setHeaderValue
実験的
Chrome 完全対応 62Edge 完全対応 18Firefox 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Implementation tracked in bug 1290958
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0

凡例

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