Clearing Service Worker Cache

[00:00:00]
>> Kyle Simpson: So we saw that we were naming our caches based upon the version. When we update this version number, if we were to reload right now, you would notice that it would create a whole new set of cache entries under that different name. Which is totally fine, except it certainly might be a bad idea to just never clean up after yourself.

[00:00:21]
Because you're going to just keep using up more and more and eventually the browser's going to say you're past the quota there's no more left. So what we're going to do now is make sure that we clear any old caches that we may come across which were named based upon what we named but a previous version.

[00:00:40]
And its hard to predict whether or not it would be immediately the version before or they might be five versions back or 20 versions back, they might have seven different caches that never got cleared, whatever. So we wanna clear out any cash that looks like our cash name, but as a version number that is different than the current version that we've listed.

[00:01:03]
That's going to be our logic. So where are we gonna do that work? Well, we're gonna do that work at activation time. And actually, probably it's gonna be better to swap the order here. Doesn't really matter, but we're gonna do that work right here. We're gonna clear out the cache

[00:01:22]
>> Kyle Simpson: Right here. And then cash the new ones. Remember we're doing that because this is a newly installed and activated service worker, clean up all the old ones and create the new ones. What's important to note here is that we're clearing out all those caches because we have been activated which lets us know that the old service worker Is deactivated and no longer using any of those resources.

[00:01:49]
It would be a really bad idea to do this during install because during install, there might be another service worker still messing around with those caches and we could crash a process of something. So to make sure we don't have a problem there, we want to make sure to do that, we don't want to do that work until we get to activation.

[00:02:10]
>> Kyle Simpson: Okay, so let's go ahead and define a
>> Kyle Simpson: Clear caches function.
>> Kyle Simpson: We can get a list of all of the caches.
>> Kyle Simpson: Caches.keys
>> Kyle Simpson: And then we need to figure out which of those are old caches. So we're gonna basically do a filter. We're gonna say old cash names equals (cacheNames).

[00:03:23]
>> Kyle Simpson: So we need to check to see if the cache name looks Like the cache name convention that we're using which is ramblings dash and then a set of digits. We need to see if it looks like that but the version number's not ours. So we're gonna say first if

[00:04:08]
>> Kyle Simpson: So we're definitely looking at one of the cache names that we have created. The reason why we're doing this, by the way, is that other Code on this same site could have created other caches. Not even our code, it could have been a third party code running on our site could have created other caches.

[00:04:26]
So we want to make sure to only deal with caches that we created. So we're going to recognize it by name. And then we need to pull out the number that was used. So I will do a match here. Cache version, we'll say other cache version is what I'll call it.

[00:04:53]
Or just cache version will work, cache version. [SOUND] We will do cacheName.match. [SOUND] Ramblings-capturegroup
>> Kyle Simpson: And we have a version number, so we are going to say if the number of this cache version is not equal to our version the one that our current service worker is in.

[00:05:45]
Let's do this slightly differently let's just assign whats happening we'll say cache version equals, if it's not.
>> Kyle Simpson: Null.
>> Kyle Simpson: Cuz it might not have matched which case we want to, just take care of that. And if it's not that will say cacheVersion, just leave it alone. Now what we wanna say in our if statement is if the cacheVersion is greater than zero, so we've found a legitimate cacheVersion and the cacheVersion is not equal to our version.

[00:06:45]
>> Kyle Simpson: That takes care of if there accidentally was a cache for something that didn't end up converting to a number. It should, but we're just being extra careful here. So if we have found a different version, then we want that to stay in old cache names. Otherwise we want to dump it because it's one that we did match with or it's one that we don't care about.

[00:07:09]
So we're only putting in old cash names, ones that we definitely want to affirmatively clear out.
>> Speaker 2: Can you just scroll a little bit onto the right?
>> Kyle Simpson: So instead of an if statement, I'll just return that because that's what we want, we want a true. We'll keep them.

[00:07:38]
So the end result of that call is a list of only the cache names, these are just cache names, but only the cache names that we want to affirmatively clear out. And we will now say return similar to what we've done before, Promise.all.
>> Kyle Simpson: We're gonna say,
>> Kyle Simpson: oldCacheNames.map.

[00:08:18]
>> Kyle Simpson: We're gonna map each cache name to the promise of deleting it.
>> Kyle Simpson: Caches.delete and the cache name that we wanna delete. So that's gonna clear out any old caches. We're gonna wait for all of those delete to finish and then we'll create our new cache by our new name.

[00:08:48]
Okay, so let's we're calling clear caches right here, so that should actually work this time. We updated to version 4. Let's go test it in the browser. Remember we have ramblings three over here in our cache. And so now that we're expecting that when we do a navigate event in the browser, we're expecting three to go away and four to come in.

[00:09:17]
So we will navigate to the about page. And then we see four show up, and then three got deleted.
>> Kyle Simpson: Just as a little side note, even with really great bulletproof code, in my testing I have seen times where I have old caches hanging out somehow, someway. It fails to delete in some silent way.

[00:09:51]
So that's why we want to just run this good bullet proof delete code so that over time we're being a good citizen on people's web computer on their computers. And in their Web browsers by deleting ourselves as much as possible. Usually it's happens right away but every once in a while you'll have some bodies browser that ends up with several.

[00:10:10]
All those cache entries and we wanna just get rid of all those.
>> Kyle Simpson: Yes.
>> Speaker 2: Will this cache eventually expire?
>> Kyle Simpson: No, there is absolutely no expiration on these caches. The only time it expires is if the user comes in and physically clears out their storage here. And they have to really go to that trouble to do that.

[00:10:33]
Otherwise it'll stay.
>> Kyle Simpson: That means it's kind of on you, the developer to the side if there should be some sort of exploration semantic. And you would control that by pushing out updates to your service worker every two weeks, for example, or whatever.
>> Speaker 3: So I just want clarified so what you're saying is that even like clearing out your cash and stuff like as a regular like I wanna reload this page and I want to clear my cache and everything that would not clear this.

[00:11:03]
>> Kyle Simpson: A reload does not okay, I shift reload does not. There are about 100 million different ways that you can reload or clear your cookies or your internet files depending on your different browsers. So I can't say for sure that none of those ways would ever clear this out but what I know is that for me to clear this out I have to come to the application tab and delete it.

[00:11:27]
>> Speaker 3: Okay.
>> Kyle Simpson: So there may be some other way in Chrome that accidentally ends up clearing out the cache storage that I'm either am, or not aware of, but they have to go to trouble. It's not just simply a reload that's gonna clear it out.