FetchEvent

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 undefined if this fetch is not a navigation, or navigation preload is not enabled.

FetchEvent.replacesClientId Read only

The id of the client that is being replaced during a page navigation.

FetchEvent.resultingClientId Read only

The id of the client that replaces the previous client during a page navigation.

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.

self.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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
FetchEvent
40
17
44
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
No
27
11.1
40
40
44
27
11.3
4.0
FetchEvent
40
17
44
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
No
27
11.1
40
40
44
27
11.3
4.0
clientId
49
17
45
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
No
36
11.1
49
49
45
36
11.3
5.0
handled
86
86
84
No
72
No
86
86
No
61
No
14.0
isReload
45
17
44-74
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
No
32
No
45
45
44
32
No
5.0
preloadResponse
59
18
No
No
46
No
59
59
No
43
No
7.0
replacesClientId
No
No
No
No
No
11.1
No
No
No
No
11.3
No
request
40
17
44
No
27
11.1
40
40
?
27
11.3
4.0
respondWith
42
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.
17
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.
59
NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).
44
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
No
29
11.1
42
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.
42
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.
?
29
11.3
4.0
resultingClientId
72
79
65
No
60
No
72
72
65
50
No
11.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent