FetchEvent.respondWith

The respondWith() method of FetchEvent prevents the browser's default fetch handling, and allows you to provide a promise for a Response yourself.

In most cases you can provide any response that the receiver understands. For example, if an <img> initiates the request, the response body needs to be image data). For security reasons, there are a few global rules:

• You can only return Response objects of type "opaque" if the fetchEvent.request object's mode is "no-cors". This prevents the leaking of private data.
• You can only return Response objects of type "opaqueredirect" if the fetchEvent.request object's redirectMode is "manual".

Syntax

fetchEvent.respondWith(
  // Promise that resolves to a Response.
​)

Parameters

A Promise for a Response.

Return value

Void.

Examples

This fetch event tries to return a response from the cache API, falling back to the network otherwise.

addEventListener('fetch', event => {
  // Prevent the default, and handle the request ourselves.
  event.respondWith(async function() {
    // Try to get the response from a cache.
    const cachedResponse = await caches.match(event.request);
    // Return it if we found one.
    if (cachedResponse) return cachedResponse;
    // If we didn't find a match in the cache, use the network.
    return fetch(event.request);
  }());
});

Specifications

Browser compatibility

[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

See also

• Using Service Workers
• Is ServiceWorker ready?
• Promise
• Fetch API