NavigationPreloadManager

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The NavigationPreloadManager interface of the the Service Worker API provides methods for managing the preloading of resources with a service worker.

Methods

NavigationPreloadManager.enable()
Returns a Promise that resolves when navigation preloading is enabled.
NavigationPreloadManager.disable()
Returns a Promise that resolves when navigation preloading is disabled.
NavigationPreloadManager.setHeaderValue()
Sets the value of the Service-Worker-Navigation-Preload header and returns an empty Promise.
NavigationPreloadManager.getState()
Returns a Promise that resolves to an object with properties indicating whether preload is enabled and the contents of the Service-Worker-Navigation-Preload.

Examples

Feature Detecting and Enabling Navigation Preloading 

addEventListener('activate', event => {
  event.waitUntil(async function() {
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

Using a Preloaded Response

The following example shows the implementation of a fetch event that uses a preloaded response. 

addEventListener('fetch', event => {
  event.respondWith(async function() {
    // Respond from the cache if we can
    const cachedResponse = await caches.match(event.request);
    if (cachedResponse) return cachedResponse;

    // Else, use the preloaded response, if it's there
    const response = await event.preloadResponse;
    if (response) return response;

    // Else try the network.
    return fetch(event.request);
  }());
});

Specifications

Specification Status Comment
Service Workers
The definition of 'NavigationPreloadManager' in that specification.
Editor's Draft Initial definition.

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 59[1] ? ? 46 ?
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 59[1] 59[1] ? ? ? 46 ?

[1] Behind a flag as described here

Document Tags and Contributors

 Contributors to this page: jpmedley
 Last updated by: jpmedley,