Progressive Web Apps with React

The fetch event

When our application requests a file from the server, we want to intercept that request inside our service worker, and respond with the cached file (if it exists).

We can do so by listening to the fetch event, as illustrated:

self.addEventListener('fetch', event => {});

The event passed in as argument has two properties of interest. The first is event.request, which is the target URL. We’ll use that to see whether we have the item in our cache, but the event also has a method called respondWith, which basically means "stop this network request from going through, and respond to it with the following."

Here's the unintuitive part--we're essentially canceling this fetch event as soon as we call event.respondWith. This means ...