Cache Third Party Resources from a CDN in a React PWA
Our service worker caches our static assets - but only those assets that are included in our React App. This means that assets like Bootstrap, which we're including from a third-party CDN, won't be included in the cache, because they're not available at webpack compile time.
We'll change the service worker to add caching for those assets by using workbox's registerRoute method, and a regular expression to match the entire URL of the asset. We'll pick the staleWhileRevalidate cache strategy, though cacheFirst, or networkFirst would also be valid choices.
Finally, we'll change the name of the cache they are stored by supplying a cacheName parameter.
Instructor: [00:00] We're getting Bootstrap from a CDN over the network. In offline mode it still looks like it's working, but we're getting it from the browser cache and not from the service worker. If we disable the browser cache and reload. Now we don't have Bootstrap anymore.
[00:21] You can see that we've lost all our styling on the application. In the network tab you can actually see the failed CDN requests. In sw.js we can define and register a new route for the service worker. The first argument to register route is either a string that matches the resource that we're trying to cache or a regular expression that matches it.
[00:46] Here we'll say that anything that starts with HTTPS and ends with .min.css or .min.js is what we want to cache. It's very important when registering a route that it matches the entire URL of the resource that we're trying to cache, otherwise it won't work. The second argument to register a route tells Workbox what strategy to use when caching that resource.
[01:11] Common strategies could be cache first or network first. For Bootstrap we'll use stale-while-revalidate. This will serve Bootstrap as first as possible from the cache first. Then update the cache in the background by making the network call also.
[01:30] This strategy is good for things that you want to be available quickly and also where it's not 100 percent critical to have the latest version all the time. Let's build and serve that new service worker. If we reload, we can see Bootstrap came from the Web.
[01:49] Then if we switch to offline mode and disable the cache, we can see that the application is still styled because Bootstrap was served from the service worker cache. Also, on the application tab if we check the cache, we can see that it was put into the runtime cache and not the pre-cache because pre-cache is just for assets that were put into the pre-cache manifest.
[02:17] We can switch that from the runtime cache by adding a cache name option to the Workbox strategy call. Now if we rebuild and serve that and reload it, we can check the application tab to see the new cache called CDN cache where those assets are stored.
The resources I'm trying to cache with that line are the ones from the cdn in index.html - and it appears that they are all being served from https, so I believe that line should work... what resources are you seeing that aren't being cached?
Hi Chris. I need to say sorry. I checked code for all of your lessons and everything is fine. Maybe I copied code from GitHub in a wrong way. Thank you again for the awesome course! I've just implemented SW and cache for resources and responses in one of my projects.
No problem - I'm glad it worked!
The reason for the http/https problem might be in the transcript of lesson 2 which uses http links in the index.html and not https.
Ah, great catch Alexander! I will need to make sure that transcript changes to include the https.
Hi, thanks for the interesting and very valuable course. Here is a small problem in lesson 7. You use RegExp with https, but in the code example on GitHub most of resources are served from http. And caching does not work for them. So it works with
or
Maybe there is a reason to change example code on GitHub to use https links?