Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Chris AchardChris Achard
    reactReact
    16.6.3-16.8.6
    javascriptJavaScript

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.