Web/API/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 WorkersThe definition of 'FetchEvent()' in that specification.	Working Draft	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
FetchEvent Experimental'	Chrome Full support 40	Edge Full support ≤18	Firefox 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 No	Opera Full support 27	Safari No support No	WebView Android Full support 40	Chrome Android Full support 40	Firefox Android Full support 44	Opera Android Full support 27	Safari iOS No support No	Samsung Internet Android Full support 4.0
FetchEvent() constructor Experimental'	Chrome Full support 40	Edge Full support ≤18	Firefox 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 No	Opera Full support 27	Safari No support No	WebView Android Full support 40	Chrome Android Full support 40	Firefox Android Full support 44	Opera Android Full support 27	Safari iOS No support No	Samsung Internet Android Full support 4.0
client Experimental'Deprecated'Non-standard'	Chrome Full support 42	Edge Full support ≤79	Firefox Full support 44	IE No support No	Opera Full support 27	Safari No support No	WebView Android Full support 42	Chrome Android Full support 44	Firefox Android No support No	Opera Android ?	Safari iOS No support No	Samsung Internet Android Full support 4.0
clientId Experimental'	Chrome Full support 49	Edge Full support ≤79	Firefox 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 No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 45	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
isReload Experimental'Deprecated'	Chrome Full support 45	Edge Full support 17	Firefox 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 No	Opera Full support 32	Safari No support No	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 44	Opera Android Full support 32	Safari iOS No support No	Samsung Internet Android Full support 5.0
navigationPreload Experimental'	Chrome Full support 59	Edge Full support ≤79	Firefox ?	IE No support No	Opera Full support 46	Safari No support No	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android ?	Opera Android Full support 43	Safari iOS No support No	Samsung Internet Android Full support 7.0
preloadResponse Experimental'	Chrome Full support 59	Edge Full support 18	Firefox ?	IE No support No	Opera Full support 46	Safari No support No	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android ?	Opera Android Full support 43	Safari iOS No support No	Samsung Internet Android Full support 7.0
replacesClientId	Chrome No support No	Edge No support 18 — 79	Firefox Full support 65	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 65	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
request Experimental'	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 44	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android ?	Opera Android Full support Yes	Safari iOS No support No	Samsung 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 No	Opera Full support 29	Safari No support No	WebView 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 29	Safari iOS No support No	Samsung Internet Android Full support 4.0
resultingClientId	Chrome Full support 72	Edge Full support 18	Firefox Full support 65	IE No support No	Opera Full support 60	Safari No support No	WebView Android Full support 72	Chrome Android Full support 72	Firefox Android Full support 65	Opera Android Full support 50	Safari iOS No support No	Samsung Internet Android Full support 11.0
targetClientId	Chrome ?	Edge ?	Firefox ?	IE No support No	Opera ?	Safari No support No	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS No support No	Samsung 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

• Promise
• Fetch API

FetchEvent by Mozilla Contributors is licensed under CC-BY-SA 2.5.