The service worker sits between the browser and the network. By adding a fetch event handler, you can determine how the request is handled. All network requests pass through the service worker's fetch event handler:
This gives you a hook, or way to inject logic into the workflow, to intercept requests and determine how and where the response is returned.
With the service worker, you can do the following:
- Pass the request to the network, the traditional method
- Return a cached response, bypassing the network altogether
- Create a custom response
When the network fails, you can program the service worker to return a response from the cache, even if it is a fallback response. Because the service worker can return responses from the cache, your pages can load instantly if they are cached:
In the preceding diagram, the service worker is programmed...