Progressive Web Application Development by Example

Service worker fetch

Service workers rely on promises and asynchronous APIs. This eliminates platform features such as XMLHttpRequest from being used in a service worker. Service workers are dependent on the browser supporting promises and the fetch API.

A basic understanding of using fetch is a fundamental skill required for service worker programming. Service workers allow you to intercept all network requests before they are sent to the network. This is done by adding a fetch event handler:

self.addEventListener('fetch', function(event) {  event.respondWith(    caches.match(event.request)      .then((response) =>{        // Cache hit - return response        if (response) {          return response;        }        return fetch(event.request);      }    )  );});

The event handler receives ...