PWA Tutorial for Beginners #21 - Limiting Cache Size

Key Takeaways

okay so right now when we visit pages and resources online we're caching every new dynamic page or resource that we come across that's not already cached now that's okay but it means at some point that our cache is going to become bloated and be a drain on resources because we're just caching everything that we request now it would be nice to be able to limit our different caches to a specific size so that they could only hold X number of items for example 15 or 20 and when that number of items is reached then we can remove the oldest item and so forth so if we currently have for example 20 items then add in a new item so it has 21 in total at that point we could go through the cache and delete the oldest item so the cache size would go back down to 20 and it would never be exceeded so let's try this out in the code so what I'm going to do then is now make a function to limit the size of our cache so first of all let's make this at the top do a little comment to say cache size limit function and then underneath it will make a constant and we'll call this function limit cache size set it equal to an error function this error function is going to take in two arguments the name and the size now the name is going to be the name of the cache that we want to limit the size off so we're going to pass that into the function and that could either be this static cache name or the dynamic cache name and this is going to be the maximum size that we want our cache it to be so the maximum number of items inside that cache okay so let's open up this function now and inside what do we want to do well the first thing we want to do is open up whichever cache we pass in so let's say caches dots open and then the name now this is asynchronous it returns a promise so we can tack on dot then and when this opens it returns towards the cache that it opens now what we want to do is get the keys of this cache which are basically these things right here or if they're the dynamic ones it would be the resources for the dynamic cache so these things right here so what I'm going to do is say cat dr. keys which is a function to get us those keys this again is asynchronous it returns to us a promise so we tack on dot then and then we take these keys which is an array okay so now we have an array of essentially all the different things inside the cache now what we want to do is check is that array over this size because if it is over this size then what we want to do is start deleting items from the start of that array the oldest ones so then let's do a little live check I'm going to say if and then keys dot length is going to be over the size which is whatever we pass in here then we want to do something now what do we want to do we want to delete something from the cache so we'll say cache delete and then what do we want to delete the first item in the keys array the oldest thing so let's say keys and then 0 which is the first item in that array so this goes out and it deletes the first item in that array so the first item from the cache and then what we're going to do is tack on a dot there method because this returns a promise it's asynchronous and in the dot then method what I'd like to do is then call this function again because if it's 22 currently that we have in there and we want it to be no more than 20 then we're going to have to delete two items so we want to recall this function to recheck either the keys that length is still over the size that we pass in which could be 20 and if it is delete another item okay so we'll call this again right here limit cache size again and we're going to pass in the name again and the size and again the name is just going to be what we first pass in and the size is going to be what we first pass in as well so I hope that makes sense we're basically recalling this function over and over again until this is no longer true so if we get to the point where the length of the keys is not greater than the size then we don't need to call this again and we don't need to continue with this cycle and carry on deleting things from the cache okay so then we have our function the next thing to do is actually call the function when we want to limit the size of the cash now where do we want to do that well I think we should do it down here inside the Flex event whenever we try to put something new in to the dynamic cash at that point we want to do a check because if we keep on putting stuff in and not check in then it's going to get bloated and very big so after we put something in we're going to do a check and see if the cash is over a certain size and then if it is we're going to do the items so we'll call this function from here so its limits cash size and what we want to do is pass in the cash name that is dynamic cash name oops spell is correctly and then we want to say what is the maximum number of items we want to be in this cash for now I'm just gonna set this to 3 it's gonna be more later but I want to demo this and since we don't have many things inside our dynamic cash I want this number to be small for now so we're saying here every time we reach out and add something new to our dynamic cash we want to then limit the size of our cash do a check do we have more than three items in it if we do delete the oldest one so it can never get more than three items that's what we're doing now every time we add something to the dynamic cash so let me save this now and if we go over to the application first of all go to serviceworkers and then go to skip waiting make sure you're on line and you've not got this offline mode checked then what we need to do is go to the home page I'm gonna check site dynamic and notice we have three items if I now go to the about page which is not inside the cash then it should cash this but it deletes the oldest one so I'm going to go back to the home page and navigate around a little bit and it's stayin as three now so that's fine so this is working if I change this to two then save it and go back over here I'm going to go to the service worker skip waiting and update over here then I'm going to go to the cash next I'm going to go to the about page watch these items and we can see now we only have this about in here okay so now this is our working now I'm not going to stick this at two I'm going to keep this at about 15 so now I'm saying we can have no more than 15 items in our dynamic cache at any one time then it's going to start to delete older items so there we go my friends now we are deleting our older cache items to make sure that our cache never gets too big