1. 5
    Pre-cache Static Resources with Workbox and View a React PWA Offline
    1m 21s

Pre-cache Static Resources with Workbox and View a React PWA Offline

InstructorChris Achard

Share this video with your friends

Send Tweet

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.

Marcin
~ 6 years ago

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?

Chris Achardinstructor
~ 6 years ago

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).

Ernesto Calderon
~ 5 years ago

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()

Chris Achardinstructor
~ 5 years ago

Ah, thanks for pointing that out Ernesto. I'll have to do an update to the video with the new CRA

Bartosz
~ 5 years ago

Thanks Ernesto!

Andre Souza
~ 5 years ago

+1 to Ernesto!!!