Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:43 minutes
  • Overview
  • Transcript

2.6 Cache a Full Page Automatically for Offline

Sometimes you might have too many resources to add them to the cache one at a time. In this lesson, we’ll learn the alternative way of getting a full page working offline, and that is to automatically cache the entire thing, and all its resources, at once.

2.6 Cache a Full Page Automatically for Offline

Hey welcome back to Simple Service workers for offline web pages. In the last lesson we set up a multiple resource cache where we specified a bunch of resources that we wanted to have load up if the user was offline. In this lesson, we're gonna grab the whole site, no matter what's in it, and just put the whole thing into the cache, and make that load up, when the user's offline instead. As a second layer of fall back, just in case caching the whole page doesn't work we're also gonna code it up so that it'll fall back to our custom offline page. If the network fetch didn't work, the cache version didn't work, then you've still got something custom you can load up. So because we are gonna be loading in that offline page as an extra fall back, we're gonna start with a copy of our offline page service worker. So make a copy of that and paste it. Then rename it. To sw_cachedsite, and we just close the other service worker from before again, so we don't get mixed up. And now we're going to need to load That service worker in our indexed HTML page. So just like we did before, duplicate the line and comment out the old one. And we're gonna load in sw_cachedsite. We'll do the same thing in our about page. And now we're ready to go. So we're actually going to leave all of this code exactly the same because we still want to grab our offline page and put it in the cache so that's ready to act as a extra layer of fall back. But on top of that, we're gonna create another cached object and this time we'll create a variable named offline cache name and we'll call it wholeSiteCached. And this time, we're gonna do our caching of the whole site in the fetch event and the reason is, that only when there is a fetch event to grab the site off the network, can we access that entire response with all of the related files so that we can push that into the cache. So this will be something that happens the first time the user lands, and from then it'll be in the case ready to use if needed. So in our fetch event we're still gonna run the normal fetch for the event request, which is the user requesting the site from the Internet. But we're gonna add on a then method, and in here, we're gonna add a callback. And we're gonna pass the response through this callback, so this response is actually gonna contain the entire website. We're wanna do two things with this response, we wanna put it into the cache but we also wanna return it so that it can be loaded up in the browser for the visitor to see. But if we use up this response, if we just return it to the browser, that's it, it can't be used more than once, so what we are going to need to do is make a copy of this response, so then we have two, one that we can use for each purpose. So, we are going to create a new variable and we are going to call that variable responseClone. And in here, we'll make a copy of our response by saying response.clone. All right, so now we have a copy of our response we're gonna put in to the cache. We're gonna use the same approach that we did up here, by saying caches_open, and then we are going to need to specify which cache we want to open to put information into. So we set up our new cache name up here, for our whole offline site, so we are going to copy that variable down here and put that into cache is open, so now, working with the correct cache object and we're gonna chain on, then method. Once again, include a call back function. And in here, sorry, gotta include the dot to chain that on and we're gonna pass the cache that we just opened up and now we wanna take our response clone and put it into the cache. So, we're gonna do that by saying cache.put. Now we need two parameters here, we need one that includes the request that this cache should be associated with. So for that we're gonna say event request, so that's just whatever site is being requested right now that's what we're gonna associate with this cache object. And then the second argument is a response and here, we're just gonna add in our response clone. We're saying responseClone, so that's just carrying over our variable that we set up here, and then we can end that line. So, now with this code here, we've got one copy of SI is put into the cache. Now we need to put the original copy of our site into the browser so the users can actually see it. We do that by just saying return response. So just to recap, the user is going to request the website from the network. When that happens, that site is going to come back as a response through this function here. We'll make a copy of that response and put it into the cache and then we'll return the original response and that will be loaded up in the browser. So now we need to change up this part of the code here. If you remember from our last lessons, we used this catch method to determine what happens if the fetch event up here, has failed. So that means if the person is offline. So here we're gonna do the same thing that we did when we were loading up our multiresource offline site, we're just going to return the caches that match the event request. So we just paste that in here, what we're doing is changing offline URL to event request. Up here, we've already said that when this event request, so that means the request for the index.html page or about.html page, when that happens then the cache should give us this response clone that we made before. So now, this line here is going to actually execute that process. If the user tries to load the index.html template, then the browser is gonna return the cached version of that index.html page and all of the other resources that are associated with it. But we also want to give that second level of fall back so that if for one reason or another if the cache version doesn't get loaded up, we can load our offline site. So what we're gonna do is once again, we're gonna chain on then. And we going to add our call back function. Through the call back function we are going to pass response. So this response is going to hold the information that is being returned from our cache match up here. This is going to be our cached version of the offline site. So then we are going to try to return that response which we just do by saying, return response. But, we're also going to provide that extra level of fall back that we talked about earlier. So we're gonna say or, by adding two pipe symbols, caches.match and then we're gonna plug in our offline URL from up here. If you remember from our earlier lesson when we were loading up our custom offline page, returning caches.match offlineURL is how we load it up our offline HTML page. So what this line here is gonna do is it's going to try to return the cache version but if that cache version isn't available for whatever reason, then it's gonna default back to loading our custom offline page instead. All right so now all that code should be good to go, let's jump in to our local host preview and give it a test. All right, so here we are in our local host preview. And you can see here we've got our whole site cached object and if you inspect inside, you can see that not only did we have the resources that we manually cached in the last lesson, we also have a couple of extras. Right here, we an see that the browser has automatically cached the Google fonts at the site it's using, and we haven't had to do that manually. So that shows the value of this approach. So now let's test putting these offline. Refresh, and that's great. Our Home page is still looking exactly the same. Now bear in mind that we haven't visited the About page yet. So our service worker never had the opportunity to make a cached version of the About page. And that's where our custom offline page is gonna come into play. So we're still offline, now we're going to go to the About page and because there is nothing in the cache for it, it's fallen back to our custom offline web page. But by the same token, if we go back online, we're now on the about page and if we look inside our whole site cache, now you can see that About page is in the cache as well. So if we go back online now, our About page is showing up offline also. All right so that's the last thing that we're covering in this course. You know how to register a service worker, how to listen for it's install event, and push resources into the cache. You know how to load a custom offline page and you have two different ways to load the actual live page even when offline. So the next video is going to be the last video of the course, it'll just be a quick summary of everything we've covered. So basically, pushing everything into a nut-shell so that you've got a reference video you can come back to anytime you need a refresher on these principles. So we'll go over that in the last video of this course. I'll see you there.

Back to the top