Building Progressive Web Applications/

...

/

Listening to Fetch Events

Listening to Fetch Events

Learn how to add listeners to the fetch event of the service worker.

We'll cover the following...

Every time the browsers try to fetch any resources (like images, style sheets, scripts, etc.) by sending requests to the network, the fetch event of the service worker gets triggered. To listen to these fetch events of service workers, we need to register a fetch event handler, which triggers the Add-to-Home-screen feature.

Registering the fetch event handler

We can register the fetch event handler as the callback to the addEventListener method provided by the self object of the service worker.

// listen to install and active events
// listen to fetch event
self.addEventListener('fetch', function (event){
  console.log("Fetch event: ", event);
});

In the above code, we added an event listener for fetch ...