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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 40Edge Full support YesFirefox Full support 44
Notes
Full support 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE No support NoOpera Full support 27Safari No support NoWebView Android Full support 40Chrome Android Full support 40Edge Mobile ? Firefox 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 YesFirefox Full support 44
Notes
Full support 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE No support NoOpera Full support 27Safari No support NoWebView Android Full support 40Chrome Android Full support 40Edge Mobile ? Firefox 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 ? Firefox Full support 44IE No support NoOpera Full support 24Safari No support NoWebView Android ? Chrome Android Full support 44Edge Mobile ? Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android Full support 4.0
clientId
Experimental
Chrome Full support 49Edge ? Firefox Full support 45
Notes
Full support 45
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE No support NoOpera Full support 36Safari No support NoWebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 45Opera Android Full support 36Safari iOS No support NoSamsung Internet Android Full support 5.0
isReload
Experimental
Chrome Full support 45Edge Full support 17Firefox Full support 44
Notes
Full support 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE No support NoOpera Full support 32Safari No support NoWebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support 17Firefox Android Full support 44Opera Android Full support 32Safari iOS No support NoSamsung Internet Android Full support 5.0
navigationPreload
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
preloadResponse
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
request
Experimental
Chrome Full support YesEdge ? Firefox Full support 44IE No support NoOpera Full support YesSafari No support NoWebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android Full support YesSafari iOS ? 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 ? 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 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
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.
Edge Mobile ? Firefox Android ? Opera Android Full support 29Safari iOS ? Samsung Internet Android Full support 4.0
resultingClientIdChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
targetClientIdChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? 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

Document Tags and Contributors

Last updated by: duduindo,