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

2.3 Cache Content on Service Worker Install

Now that we have our service worker registered, we’re ready to start coding it up. We’ll begin by listening for the install event and using it to push a custom offline page into the cache for later retrieval. We’ll also see how you can verify what has been added to the cache at this stage.

Related Links

2.3 Cache Content on Service Worker Install

Hey, welcome back to Simple Service Workers for Offline Web Pages. In this lesson we're gonna latch on to the install process of the Service Worker. And during that process, we're gonna grab our custom offline web page and we're going to push it into the browser cache. So there are three main events that a service worker puts out that you can latch on to. There's the install event which happens when the service worker's first registered. There's the activate event which happens when the registration process is finished. And then there's the fetch event which happens when a visitor is trying to actually fetch a website from the network. In this case, we're gonna be listing out for that install event and we're gonna use that to trigger the caching of our offline page. So we're gonna say this.addEventListener with brackets somewhere in that line. And here we're gonna listen for the install event. And when we get it, we're gonna run the callback function. And through this function, we're gonna pass the object event, which is gonna give us information about the install event. Now we can already check that this function is firing off properly by plugging your message to the console. And we're just gonna say, service worker installing. And you're actually only gonna see this message flash up really quickly when you refresh. So I'm just gonna refresh really quickly a couple of times. And you can just sort of spare me your eyeballs here, but you can just see at the bottom there it says, service worker installing. Just flickers there for a second, but that shows us that it's working. Now we're gonna tell the install event to wait for a little bit until we do some other things that we need to do. So we're going to say event.waitUntil, in that line and make some space in here. In here is where we're going to go through the process of pushing our offline site into the cache. Now inside that cached storage, there can actually cache objects. So the first thing that we're gonna do is to find a name that we're gonna give our cache object. So we'll make a variable and we'll call it offlinePageCache. And we'll give our cache object the name customofflinepage. By giving the cache name here can really be useful because it also allows you to create versions of your site. So if I wanted to, I can call this _1. And the next version of my cache I could call _2, and that would be a completely different cache object. And then I would also be able to go back and target the first version of the cache for deletion. We're actually not gonna get into that right now because we are trying to keep things simple. But it's just good to know that you do have that option, so you can look into that later if you would like. So we've given our cache object a name. And now we're also gonna create another variable called offlineURL. And here we're gonna specify the page that we wanna load instead of our normal page if the user is offline. We wanna load this offline.HTML page, so we're just gonna say offline.html. All right, so now down here, inside our waitUntil function, we need to open up the caches. We need to open up that cache storage area, so we're gonna say caches.open. Now we need to specify which of those cached objects we need to open. We want to open the cache that we named here. So if there is a cached object with this name already there, then this line is gonna open that cache up. If not, it's gonna create it. Now we're gonna chain on some extra steps here again. So we're gonna say then, and we're gonna put in a callback function. Once again, through here, we're gonna pass the cache that we just opened. And then inside our callback function, we're going to return that same cache, but we're going to add the offline URL that we just defined. So this line here is gonna return that cache back with this file that we defined up here, added into that cache. Now that code so far will work by itself, but to speed up the process of getting the installation finished, we're gonna add in one more step, add another callback function. And in here, we're going to return self.skipWaiting(). So that just let's the browser know that we're done. It can skip waiting, it can exit this waitUntil method up here, and it can carry on. All right, so now let's have a look at our demo and see if all that's working. So this already automatically refreshed for us. We've got our registration messages still in the Application tab. We can look in our cache storage. And there sure enough, there's our custom offline page cache object. And inside there's our offline.html. Now if you wanna be doubly sure that's working, you can delete that cache object and you can refresh, just so you can see that going into the cache with your own eyes. And you can actually open that object up for a preview. And here inside we've got all our HTML for our simple offline site. So now we have this page in our cache. And the next step is to actually load it up if the user is offline. And that is what we're gonna do in the next lesson. I'll see you then.

Back to the top