7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Caching Dynamic Resources

You have to cache everything that you want to provide offline—including dynamic resources. You'll learn one way to handle dynamic resources in this lesson.

3.5 Caching Dynamic Resources

In the previous lesson, we changed the way that we store our cache, we now have a static cache for the resources that are primarily static and we have a dynamic cache for the resources that are well primarily dynamic. Our data dot JSON file is supposed to emulate a dynamic resource. So now we need to change our fetch event listener because Right now we are still returning everything from cash and that is okay for static resources, but not for dynamic. So, we're gonna change our fetch EventListener. We still need to use respondWith but we're going to write a new function that will do all of the hard work and we'll just call this getResponseFor, and then we will pass in the request. So there we go. We have that, we just need to write this function. So, let's do this after clearOldCache. And this is of course going to be an asynchronous function. And we will get the request there. Now, the first thing that we should do is check to see if the request is for a static resource. And to do that, we need to open up our staticCache. So let's create a variable, we'll just call it staticCache and we will use our caches object and we will call open, passing in the staticCacheName. There we go. And then we will attempt to see if we have a response for this request. So we will use our staticCache, and we will try to match the request. Now if we do have a response here, then that's great. We can just simply return with that response, otherwise, we'll just have undefined and we can move on to check to see if we have a request for something in the dynamic cache. Now, in this particular case, we still need to fetch whatever it is that we are trying to fetch but the first thing that we need to do is go ahead and open up our dynamic cache. I'm just gonna call it dynCache and we will make our request. We aren't going to check this just yet because regardless, we need to fetch this. So, let's do that. We're gonna do this inside of a try, so that we can cache any errors like for example, if we are offline. And while we are fetching this, we'll go ahead and we'll check to see if this request is for our dynamicCache. And if it is, then we want to store the response that we get back from fetch. So, this code is going to look a lot like but we just did for the staticCache, except that we aren't going to return the response just yet. We are going to write to our dynamicCache with the put method. The key is going to be the url and then we are going to clone the response, and visual studio code just fixed that issue for me, except I don't want to wait there, I want to await up here. So that then, we can just use res down here and that will add our response to the cache and then we will return the response. And the reason why we will turn the response here as opposed to up here, is because if it's not something that we are going to cache in our dynamicCache, well, it's still something that we need to return. So we always want to return this response here. However, if we are offline, then of course, it's gonna drop down here to the cache. And here, we are going to grab whatever it is that we tried to from our cache. And we will, of course, pass that to our addCacheHeader function so that we can have that custom header there. All right, so there we go. That's our code, that should work just fine. Let's go to the browser. Let's clear out the storage and let's do a hard refresh. So let's make sure we are not offline. And if everything works okay, we should be able to go to our Cache Storage. And let's first of all look at this staticCache and we want to look at the Time Cached. Unfortunately, you have to move all the columns over if your screen is small like this. And whenever we refresh, the staticCache should stay the same. So that's great, the time's not changing. But let's go to the dynamicCache. And this time should change every time that we refresh the page. So let's move all these columns over and here we go. If we refresh, yes, we can see that the time is indeed changing. So now if we go offline, we should have everything that we need. So let click Offline. That's great. If we refresh the page, then everything is working just fine. Of course, we are seeing some failed requests in the console like for manifest dot json in the browser sync file, but everything else that our application needs, that's working. And of course, if we go back online, everything should work as well. But here, let's do this. Let's change one of the complete values, let's change the first one to true. So that whenever we refresh, that should be true, if we go offline that should be cached now and it is. So if we refresh, we still see our updated information. But of course, it was cached, and that's why. So, our code is now working. If we make a request for something that is static, then it's automatically returned from the staticCache. If we make a request for a dynamic resource, we make the request, get the response, store that in cache and if we are offline, we get all of that wonderful information there. Now in the next lesson, we are going to set up a background sync, which is going to allow our application to be usable when we are offline.

Back to the top