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

This is the event type for fetch events dispatched on the service worker global scope. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the event.respondWith() method, which allows us to provide a response to this fetch.

Constructor

FetchEvent()
Creates a new FetchEvent object. This constructor is not typically used. The browser creates these objects itself and provides them to fetch event callbacks.

Properties

Inherits properties from its ancestor, Event.

fetchEvent.clientId Read only
The id of the same-origin client that initiated the fetch.
fetchEvent.preloadResponse Read only
A Promise for a Response, or void if this is not a navigation, or navigation preload is not enabled.
fetchEvent.request Read only
The Request the browser intends to make.

Methods

Inherits methods from its parent, ExtendableEvent.

fetchEvent.respondWith()
Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.
extendableEvent.waitUntil()

Extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching.

Examples

This fetch event uses the browser default for non-GET requests. For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.

addEventListener('fetch', event => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method != 'GET') return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(async function() {
    // Try to get the response from a cache.
    const cache = await caches.open('dynamic-v1');
    const cachedResponse = await cache.match(event.request);

    if (cachedResponse) {
      // If we found a match in the cache, return it, but also
      // update the entry in the cache in the background.
      event.waitUntil(cache.add(event.request));
      return cachedResponse;
    }

    // If we didn't find a match in the cache, use the network.
    return fetch(event.request);
  }());
});

Specifications

Specification Status Comment
Service Workers
The definition of 'FetchEvent' in that specification.
Working Draft Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support40 Yes441 No27 No
client42 ?44 No24 No
clientId49 ?451 No36 No
isReload4517441 No32 No
navigationPreload59 ? ? ?46 ?
preloadResponse59 ? ? ?46 ?
request Yes ?44 No Yes No
respondWith422 ?

593

441

No29 No
resultingClientId ? ? ? ? ? ?
targetClientId ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4040 ?4427 No4.0
client ?44 ? No ? No4.0
clientId4949 ?4536 No5.0
isReload4545174432 No5.0
navigationPreload5959 ? ?46 ?7.0
preloadResponse5959 ? ?46 ?7.0
request ? Yes ? ? Yes ? Yes
respondWith422422 ? ?29 ?4.0
resultingClientId ? ? ? ? ? ? ?
targetClientId ? ? ? ? ? ? ?

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

2. NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on — see https://www.chromestatus.com/feature/5694278818856960.

3. NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).

See also

Document Tags and Contributors

Contributors to this page: fscholz, ptim, jpmedley, jaffathecake, chrisdavidmills, teoli, Meggin
Last updated by: fscholz,