Service Worker Cache Demo

[00:00:00]
>> Kyle Simpson: So we did define that cacheLoggedOutFiles function, but we gotta call it in a few places. Otherwise, it's just gonna sit there and do nothing. So where do we want to call it? Well, we definitely wanna call it anytime we start up. So I'm gonna to put it here.

[00:00:22]
>> Kyle Simpson: You notice that I'm calling it without passing the true to it. So basically here I'm just saying, hey, in a good faith effort, if there's anything not in the cache, just try to go ahead and prime the cache with it. And if you tell me we restarted the service worker, if there's anything missing from the cache get it, but if it's already in the cache, just ignore it, okay?

[00:00:42]
But there's a time when I definitely want to forcibly get it into the cache no matter what. And that is when I have activated my service worker the first time. So in my onActivate call, we definitely want to also pull in those resources. And here, when we do cacheLoggedOutFiles,

[00:01:09]
>> Kyle Simpson: We’re gonna actually pass in true here. I have a little stylistic thing that I like to do. Any time I’m passing Booleans, I always put an inline comment with the name of that parameter. So that's just a little stylistic thing I like to do.
>> Kyle Simpson: But this tells it, hey, I don't care whether it's in the cache or not, definitely go check the server.

[00:01:30]
Make sure to load that information from the server
>> Kyle Simpson: Okay, well, this gives us an opportunity now to show you how we can work with this, because we're not gonna update the version of our service worker. And even though we've updated that service worker code, before you reload anything, I wanna show you how you can actually forcibly make sure that a service worker regoes through its install process.

[00:02:03]
Step number one, this is best practice that I've determined. You might think, I can just immediately click the Unregister or click the Update. I have found weirdnesses and quirks with that, so what I always do, sort of like when you do a Shift+Refresh, my sort of habit here is to stop the service worker.

[00:02:23]
That way it's not running, it's not consuming any resources, Unregister it. Now it'll say deleted. So the next time that we run, it’ll load a new one and it’ll have this one down below. So then you end up with this really long list of all the service workers you’ve ever unregistered.

[00:02:39]
But anyway, let’s start everything back over like we were doing before. Let’s,
>> Kyle Simpson: check our cache, storage is empty. Let’s go to our Console tab and then come back to the page, we’ll do another navigate event.
>> Kyle Simpson: Here we have installed the v3 of our service worker. In our Network tab, you see all these extra files being loaded.

[00:03:06]
And you'll notice this little icon here, and also the initiator, it tells us that it's our service worker that's initiating all of those fetches. And then we come to our Application tab,
>> Kyle Simpson: Did something fail? How did it ask for all those and not stick them in? That's interesting.

[00:03:29]
>> Kyle Simpson: I think we have a typo in the styles name. But why did it not put those in the cache?
>> Kyle Simpson: Let's double check the code.
>> Speaker 2: I don't think you return a response in your map, if (res.ok).
>> Speaker 2: Does that matter at all?
>> Kyle Simpson: It shouldn't because we're putting it into the cache.

[00:03:54]
All we're trying to do is get these promises to wait. These async function promises to wait. Okay, I think we've had pointed out the error is on line 73 here. Instead of saying caches.match, it was supposed to be caches.open. We use caches.matchAll, but when we want to open a cache to use it, we call caches.open.

[00:04:20]
So I've also corrected the CSS file to be style.css instead of styles.css, so hopefully now, let's try it.
>> Kyle Simpson: Okay, I've unregistered my service worker, let's clear my Console and my Network. And we will navigate again. We see my service worker being activated. We see my network requesting those things.

[00:04:54]
And, now we have items in our cache storage. So if you see, we have ramblings-3 here. That is our cache entry that we've created. You see all the URLs that we've asked for. And quite helpfully, you can click on them and you can actually preview them, or see the headers that they were responded with, if you need to.

[00:05:14]
So we can verify that we have the correct version of any file. In fact, if you're really getting very low-level in your debugging, you can actually delete individual entries from here. I don't recommend doing that very often, just blow away the whole cache and reload it. But if you really just need to just reload one file, you can do that.

[00:05:34]
Or you can blow away the whole thing by right-clicking and deleting over there. So this is a good way of verifying that that we have loaded up all the stuff into the cache. That's a big step for us being able to go offline, is now we have all that data and we can start intercepting all of those requests if we are offline and responding with our cache.