Over the last lectures in this module, we had a look at a lot of caching strategies and learned a lot about
caching.
Now I want to come back to general cache management and this is relatively short, I want to talk about how
we can clean our cache up, especially with dynamic caching.
If you have a look at your cache, at the dynamic cache, it fills up, if we go to the help page here and we
now refresh it, we've got more pages in there and the more pages your app has, the more you're going to
load into the dynamic cache.
So sometimes, you maybe want to clean up your dynamic cache and I want to show you how you could do just
that. In the sw.js
file, I'll add a new function, I'll add it at the very top
maybe, here, I'll name the function trimCache and I expect to get a cache name of the cache
I want to trim or should trim and the maximum items which are allowed to stay in the cache.
So in there, I can now call caches open and open the cache name which was passed here as an argument, then
I get my well-known function which gives me access to that cache
I wanted to open. In there, I now want to get all the keys. Now inside of an open sub-cache,
this will simply be all the response, all the requests excuse me, all the requests which are stored at
keys,
so for example all these keys here if I open the static cache.
So this gives me access to all the keys,
it also is a function which returns a promise though,
so let's chain more to our main promise chain here and there,
I in the end get a function call where I get the keys which are retrieved.
Again, these are the individual requests which hold the responses as values.
Now I can check if keys length is greater than max items, which means I have more items in my cache than
I want to have and I can now call cache delete to remove an item and I want to remove the oldest items,
so the first element here which is the topmost key, the item which was added a long time ago.
Of course, you could write a more elaborate algorithm for that,
this is a simple one where I simply remove this item and then I actually will call trimCache again with
cache name and max items. So I'm calling this recursively, I'm calling it from inside this function and
it will stop calling itself
once this condition is no longer true because then we don't reach this code line. Until that case,
we will continue executing this function which is just what we want,
I want to keep on removing elements, single elements until this condition here is false, until we're within
the maximum amount of items I'm allowing.
So this is the helper function,
the question just is where do we call it? Installing aren't the best places
because these are rarely called,
only when we update the service worker and there we do some cleanup work already, though of course we
might want to trim existing caches,
you can basically call it wherever you feel it's appropriate.
You could call it on every fetch, maybe whenever you put a new item into the cache,
that you make sure you trim it thereafter to remove any items you had in there before, maybe right before
you do that,
I'll go with that. I'll call trimCache here, trim my dynamic cache because the static one doesn't grow,
so I don't need to trim it and I only want to have, let's say three items, really aggressively.
Of course there's no need to be that aggressive,
you could allow 10, 20, whatever you feel is appropriate. Simply look up browser, a cache API storage limits
to find the latest limits,
ou'll also find a link to that at the end of this module, they
might change in the future which is why a link makes the most sense
and I'll also add it here therefore. Now with that I'm trimming the cache right before I add a new
item,
so I should have a maximum of four items in the cache after that.
Let's see if it works, let's go back to the application,
let's update this old school by reloading and then simply closing the tab and opening a new one and we
get an error, cache is not defined, 27 cache.
Yes makes sense because I'm chaining this as a new call,
now a quick way to fix this is simply to add it after here.
So now with that, let's save this, let's reload one more time and close the tab and open a new one to load
this updated service worker,
now this seems to work
and now let's have a look at the dynamic cache,
it has three items.
Let's visit help and let me refresh the caches, you see with four items which I said would be the max
we have.
What did we drop?
Well maybe something from the front page,
we'll see if we go offline. If we load
this, this loads, on the feed though we're missing the image,
this was dropped.
Well this is how it is,
this is how we can trim the cache
and of course there are different places where you could call trimCache depending on your requirements
and where you feel it's appropriate.
I just wanted to show you this, feel free to make this algorithm far more complex, whatever you need,
it's important to be aware of the possibility of trimming or managing your cache though, you can control
how it grows, how it behaves
and also keep in mind, since you can access caches from your normal Javascript code too, you could also
implement some logic there, not just in the service worker, you can access the cache from your normal Javascript
code as well.