NavigationPreloadManager

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

Methods

NavigationPreloadManager.enable()
Enables navigation preloading and returns a Promise that resolves.
NavigationPreloadManager.disable()
Disables navigation preloading and returns a Promise that resolves.
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.
Working Draft Initial definition.

Browser compatibility

BCD tables only load in the browser