Transcript from the "Challenge 8: Integrating Precache" Lesson
[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: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: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.