ServiceWorkerGlobalScope.onfetch

The onfetch property of the ServiceWorkerGlobalScope interface is an event handler fired whenever a fetch event occurs (usually when the fetch() method is called.)

Syntax

serviceWorkerGlobalScope.onfetch = function(fetchEvent) { ... };

Example

This code snippet is from the service worker prefetch sample (see prefetch example live.) The ServiceWorkerGlobalScope.onfetch event handler listens for the fetch event. When fired, the code returns a promise that resolves to the first matching request in the Cache object. If no match is found, the code fetches a response from the network.

The code also handles exceptions thrown from the fetch() operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set. 

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found response in cache:', response);

        return response;
      }
      console.log('No response found in cache. About to fetch from network...');

      return fetch(event.request).then(function(response) {
        console.log('Response from network is:', response);

        return response;
      }).catch(function(error) {
        console.error('Fetching failed:', error);

        throw error;
      });
    })
  );
});

Specifications

Specification
Service Workers 1
# dom-serviceworkerglobalscope-onfetch

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
onfetch
40
≤79
44
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
No
24
11.1
40
40
44
24
11.3
4.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/ServiceWorkerGlobalScope/onfetch