Precaching requests using an Angular service worker

With the addition of service workers in our previous recipes, we've seen that they already cache the assets and serve them using the service worker if we go into Offline mode. But what about network requests? If the user goes offline and refreshes the application right now, the network requests fail because they're not cached with the service worker. This results in a broken offline user experience. In this recipe, we'll configure the service worker to precache network requests so the app works fluently in Offline mode as well.

Getting ready

The project that we are going to work with resides in chapter13/start_here/precaching-requests inside the cloned repository:

1. Open the project in Visual Studio Code.
2. Once done, run ng build --configuration production.
3. Now run http-server dist/precaching-requests -p 8300 to serve it.
4. Navigate to http://localhost:8300. Refresh the app once. Then switch to...