Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 8: Integrating Precache" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students implement precaching in the course project application.

Get Unlimited Access Now

Transcript from the "Challenge 8: Integrating Precache" Lesson

[00:00:00]
>> Mike North: Let's implement our own precaching, so we haven't dealt with this file yet, it's been here this whole time. It's called asset manifest.json and if you fetch this, in fact if you go into your dist folder this file is probably there. So go ahead and open that up and you will see that it is a flat JavaScript object.

[00:00:21] The keys are, they look similar to the file names of important things in your project. The values are the true file names of those built assets. So you can really, like we don't know what the true file name of app.js ends up being. Because we get that fingerprint built into the file name.

[00:00:43] This is sort of the way of taking the fact that we know we need app.js, where is the file I have to go and download? This is the way to do that. So, in short, in the install event handler, we're gonna fetch this file. And once we get this, we're going to use the contents of this file in order to make sure that, at the very least.

[00:01:09] We precache the JavaScript for whatever the next version of the app might be,right? And if you wanna go a little bit deeper, you could do the JavaScript, the web app manifest, and all of the images. And then in the activate handler you're going to want to delete all of the old caches.

[00:01:34] Because this represents like a new surface worker, rising and taking charge of the application. And there's a function for you that's already built, it's in client/sw/caches. And I think it's called delete unused caches, or clear unused caches, something like that. This is a really good generic like utility method to use.

[00:02:02] So you basically pass it an array of caches you wish to keep, and anything it finds that doesn't match that, it will get rid of. In Steve's example, in the little glitch, you might notice that he's got a cache name that has a v1 in it. So we gotta make sure that we version our caches, so that we know what's new and what's old.

[00:02:22] We don't wanna keep writing over the same stuff, cuz it makes it difficult for us to manage failures. So let's say, for example, like version two of our app is launched, and we're downloading all of the assets to pre-cache. If we're overwriting the stuff that is in version one of the app, when we fail, we've left the good service worker that's currently in charge.

[00:02:46] With something that's halfway between two versions of our app. So that's why we always wanna like, when a service worker is deactivated, it's cache goes along with it. And then when that service worker is activated, it's sort of in charge of setting its own cache up. And these two are sort of coupled together in that way.

[00:03:05] So in the activate handler, because we're guaranteed to now have a good version of the app, we've just downloaded it successfully. We will go and delete all of the stuff we don't need anymore. And this is really powerful, right, because it means we always have a good version of the app somewhere.

[00:03:21] When we start working towards offline, we have to have something in memory at all times. Some version of the JavaScript has to be there. And this means that we're never leaping across some gap where a failure at some point will cause us problems. Here it's almost like at a moment in time, we have both the old and new version and we know that they work.

[00:03:46] In hand, and only then will we get rid of the old version, there's no dangerous point. And then in the fetch handler, we are going to use caches.match to try to serve these assets from pre-cache falling back to fetch, right? We have a bias for serving instantly, and our backup plan is to go to the Internet and get it over the network.

[00:04:12] But this will give us something to talk about over lunch, we will have our first caching strategy in place. Our app will boot much faster, and we're gonna work our way towards this thing operating completely offline. That's where we're going in the early afternoon.