Pre-cache Static Resources with Workbox and View a React PWA Offline
With our blank workbox based service worker, there is no caching enabled by default. We'll enable caching on all our static assets using workbox's built-in precacheAndRoute method, and this will then allow us to view the PWA in offline mode.
Instructor: [00:00] In the sw.js custom service worker file, let's remove the log statement into our workbox to cache the static resources in our app. This will use the list of files from the pre-cache manifest, which is automatically generated by the inject manifest webpack plug-in and cache those files at the correct route.
[00:23] Let's build and serve that. When we open the app on the console tab, we can see that the pre-cache is responding to all the static assets from our app. We can see what's in the cache by going to the application tab. In the cache storage entry, we can see the assets there.
[00:52] Now that those assets are cached, we can go offline. When we reload, our app still loads. Remember, though, that the items.json API call isn't included in the static assets that are cached. Right now, our app will be stuck in loading forever.
[01:09] If we check the network tab, we can see that that call has failed until we go back online and reload to see the items again.