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.
Hey Chris, When I go offline and refresh the app, the static assets are indeed served from the service worker's cache, however, the assets that are loaded from index.html (bootstrap etc.) are not loaded and the app looks broken. In your screenshots it looks like those assets are loaded from disk, how so? Would you be able to help with this?
Yes, bootstrap, etc are being served by my browser's cache in this video. In two videos from this one in the course, I talk about that - and add them to the service worker's cache with a route! So check out that video for how to cache those as well. As for forcing your browser to cache them to disk and serve them - I'm not 100% sure if that's possible (or how to do that if it is) which is why it's important to write a new route in the service worker for them if you want them cached as well (see video 7 in this course).
New versions of creat-react-app will have the funcrtions skipWaiting and clientsClaim in the core package
so instead of workbox.skipWaiting() use workbox.core.skipWaiting()
Ah, thanks for pointing that out Ernesto. I'll have to do an update to the video with the new CRA
Thanks Ernesto!
+1 to Ernesto!!!