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 app that we are going to work with resides in start/apps/chapter13/ng-pwa-precaching inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the cloned code repository folder, and run the following command (from the workspace’s root folder) to serve the project in production mode: ...