MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

FetchEvent.navigationPreload

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 navigationPreload read-only property of the FetchEvent interface returns a Promise that resolves to the instance of NavigationPreloadManager associated with the current service worker registration.

Syntax

var promise = fetchEvent.navigationPreload

Value

A Promise that resolves to the instance of NavigationPreloadManager.

Example

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 'navigationPreload' in that specification.
Editor's Draft Initial definition.

Browser Compatibility

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

Document Tags and Contributors

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