FetchEvent.navigationPreload

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.
Working Draft Initial definition.

Browser Compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support59 ? ? ?46 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5959 ? ?46 ?7.0

Document Tags and Contributors

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