FetchEvent.preloadResponse

The preloadResponse read-only property of the FetchEvent interface returns a Promise that resolves to the navigation preload Response if navigation preload was triggered or undefined otherwise.

Syntax

var expectedResponse = fetchEvent.preloadResponse;

Value

A Promise that resolves to a Response or otherwise to undefined.

Example

This code snippet is from the navigation preload page. The ServiceWorkerGlobalScope.onfetch event handler listens for the fetch event. When fired, pass a promise that back to the controlled page to FetchEvent.respondWith(). This promise resolves to the first matching URL request in the Cache object. If no match is found, the code checks for a preloaded response. Else it fetches a response from the network.

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

Browser compatibility

See also

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promise
• Using web workers