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.2 Caching More Resources

Incorporating caching adds complexity to any application. We'll look at a cache-first strategy and see why you'll need to spend time thinking about how best to cache your resources.

3.2 Caching More Resources

In the previous lesson, we started caching some of our resources. And that's a wonderful thing because caching allows us to increase our applications performance. However, whenever you start incorporating cache other things become much more complicated, because not everything is equal when it comes to caching. There are some things that need to be cached for a long time. There are things that are not so long, and then there are some things that either shouldn't be cached or if they are in It should be for a very short amount of time. So there's a lot of different strategies that you can use as far as caching is concerned. And we aren't going to spend a whole lot of time talking about them because we could spend a whole lot of time. However in this lesson, we are going to look at a strategy called called a cache first strategy. And in this particular case, it would be useful because if we go to the browser, and we go offline, we don't see anything in our client. If we just get the generic no internet. And we want to see something as far as our cache is concerned. So what we get to do them is actually intercept the browser's or the service workers fetch event. And I think that this is awesome because the fetch event is built in browser functionality. And here we have the ability to not just do something when the service worker fetches a resource. But we can actually take over that request and we can provide our own response, which is exactly what we want to do because we want to see what we have in the cache. So the first thing we need to do is prevent the default action from occurring. Now in normal Dom programming, we would use the prevent default method, but in this case, what we want is a method called respond with. Because we are working with a fetch event object. And this has a method called respondWith. And we will respondWith whatever we passed to this method. Now, remember that we aren't caching files. We are caching responses. So we have responses inside of our cache. And so we get to pick the response from our cache, and then pass that to respondwith. So the code to do that looks like this. We have our caches object, and we're going to match the provided request. And I think that this is awesome because our cache is a cache of responses. All we have to do is find a response for the incoming request, and then do something with that response if it's there. And in this particular case, we'll just return that response. Otherwise, we will fetch that request. So this is why it's a cache first strategy because we are going to read from the cache first. If it's not there, then we are going to fetch it over the network. So with that done, this is our strategy. We're done. So we can go back to the browser and let's get offline and you know what, let's do this. Let's add something to the install so that we can see when it is installed. So we'll just add something to the console so that we can see when it is installed. We will do a hard refresh and we will do another refresh. And we'll just wait for this. Sometimes it could take a couple of seconds for the new ServiceWorker to be downloaded and installed and running. But I'm not seeing that. So let's do another hard refresh. And yep.Although let's do this, let's clear out the cache. That's usually a good way to just kickstart everything. Let's refresh, there we go, we are installed. [LAUGH] So let's go offline, let's refresh. We see our index page. That's great. That's wonderful. But that's always seen. And in fact, if we look at the console, we can see that there are requests being made for our assets. There's the bootstrap. There's Alpine. And then there's our application file. So these are things that we could cache as well. And that would give us an offline experience. That is very close to our normal application. So let's go to our cache. And let's just go ahead and add those things. So the first will be bootstrap and it really doesn't matter what order we do this. I'm just going to do the CSS first, then we will do Alpine so that is inside of the J s folder. And then let's go ahead and do the application file. Now we could also cache data.Jason. However, that's going to cause us some issues. And in fact, this is going to cause us some issues, because anytime we make changes to these files, we're going to have to clear out our cache so that it will download these files and cache them again. But for right now, this is going to be okay. Let's go back to the browser, let's get offline, let's clear out the storage, and then let's do a hard refresh. So our service worker's installed. And now let's go offline. If we refresh the page, now we see the Index page, but we have some styling so we can see that bootstrap is being loaded as well. If we look at the console, in fact, let's clear out the console. Let's refresh. And it feels weird to refresh when you're offline, but it is still cool because, well, we can do that. And we can see that there are still some things that are trying to be retrieved like Data.Jason, you can also see that browser sync is also being thrown in here. So then how is this going to cause us a problem? Well, let's do a refresh. We finally get to see our data and everything else. But okay, let's say that we want to change the color here from the success color to something else. So let's go to our index HTML because that is where we have that defined. And instead of BG success, let's use BG danger. That makes no sense whatsoever. But this is going to get my point across in that, whenever we refresh the page, we still see success. And that's because we have a cache. We are using a cache first strategy. So even though we are online We are still hitting the cache and pulling the responses that are cached there. So when you start to cache resources, you really need to think about what and how you're going to approach it. And later in this course, you're going to see that we're going to use multiple caches, one for static things, one for dynamic things. And of course, that just adds more complication to our code. But in the next lesson, I want to do this, when we are offline, I want to show a message saying that we are offline, we cannot fetch our reports. And that's actually very simple to do. And you will see how in the next lesson.

Back to the top