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

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
FetchEvent
Experimental
Chrome Full support 40Edge Full support ≤18Firefox Full support 44
Notes
Full support 44
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE No support NoOpera Full support 27Safari No support NoWebView Android Full support 40Chrome Android Full support 40Firefox Android Full support 44Opera Android Full support 27Safari iOS No support NoSamsung Internet Android Full support 4.0
FetchEvent() constructor
Experimental
Chrome Full support 40Edge Full support ≤18Firefox Full support 44
Notes
Full support 44
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE No support NoOpera Full support 27Safari No support NoWebView Android Full support 40Chrome Android Full support 40Firefox Android Full support 44Opera Android Full support 27Safari iOS No support NoSamsung Internet Android Full support 4.0
client
ExperimentalDeprecatedNon-standard
Chrome Full support 42Edge Full support ≤79Firefox Full support 44IE No support NoOpera Full support 27Safari No support NoWebView Android Full support 42Chrome Android Full support 44Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android Full support 4.0
clientId
Experimental
Chrome Full support 49Edge Full support ≤79Firefox Full support 45
Notes
Full support 45
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE No support NoOpera Full support 36Safari No support NoWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 45Opera Android Full support 36Safari iOS No support NoSamsung Internet Android Full support 5.0
isReload
ExperimentalDeprecated
Chrome Full support 45Edge Full support 17Firefox No support 44 — 74
Notes
No support 44 — 74
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE No support NoOpera Full support 32Safari No support NoWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 44Opera Android Full support 32Safari iOS No support NoSamsung Internet Android Full support 5.0
navigationPreload
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari No support NoWebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0
preloadResponse
Experimental
Chrome Full support 59Edge Full support 18Firefox ? IE No support NoOpera Full support 46Safari No support NoWebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0
replacesClientIdChrome No support NoEdge No support 18 — 79Firefox Full support 65IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 65Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
request
Experimental
Chrome Full support YesEdge Full support ≤79Firefox Full support 44IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
respondWith
Experimental
Chrome Full support 42
Notes
Full support 42
Notes
Notes 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.
Edge Full support ≤79
Notes
Full support ≤79
Notes
Notes 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.
Firefox Full support 59
Notes
Full support 59
Notes
Notes NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).
Full support 44
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE No support NoOpera Full support 29Safari No support NoWebView Android Full support 42
Notes
Full support 42
Notes
Notes 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.
Chrome Android Full support 42
Notes
Full support 42
Notes
Notes 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.
Firefox Android ? Opera Android Full support 29Safari iOS No support NoSamsung Internet Android Full support 4.0
resultingClientIdChrome Full support 72Edge Full support 18Firefox Full support 65IE No support NoOpera Full support 60Safari No support NoWebView Android Full support 72Chrome Android Full support 72Firefox Android Full support 65Opera Android Full support 50Safari iOS No support NoSamsung Internet Android Full support 11.0
targetClientIdChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

See also