Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:43 minutes
Service workers offline web pages 400x277
  • Overview
  • Transcript

2.5 Load a Multiple Resource Page Offline

In the previous lesson we loaded a single resource from our cache, in the form of a custom offline page. In this lesson we’ll load multiple resources at one time, giving us a complete (but simple) webpage offline.

2.5 Load a Multiple Resource Page Offline

Hey welcome back to Simple Service Workers for Offline Webpages. In the last lesson we got our custom offline page loading when the user is offline. In this lesson, we’re gonna look at the first of two ways that we’re going to cache this whole webpage, and have that load instead of a custom offline page. All right so we're gonna be using code that's fairly similar to the code that we already wrote in this service workout, but it is gonna be different. So let's save this as something else, we'll actually copy and paste. And we'll rename this service worker to offlinesite, seeing as we're gonna be loading a whole site, not just one page. Then in our index.html page, let's just make a copy of this line, comment that first one out. Paste that line in, and now we're gonna load offlinesite instead. So you can switch these back and forth, if you're gonna go back in and keep working with the serviceworker that we already wrote. And let's just close this one down, so we don't get the two mixed up. And instead of using the variable offlinePageCache, we're gonna say offlineSiteCache to remind us that we're working with something different. And we're going to give it a new name, we'll say offlineSite, so then that will come up in that cache storage area with a different name. Now we'll grab our new variable, and we'll put this down here, so we're gonna open a different cache object instead. And we're not going to be using this offlineURL anymore. Instead what we're gonna do, instead of loading one resource, just that one html file, we're actually going to load four different resources. We're going to load our two html pages, index and about. We're gonna load our style sheet, and we're gonna load our background image. So we're gonna make a new variable, and we're gonna call it resourcesToCache. And we need this variable to be an array. So here is where we're gonna set up our list of resources that we wanna cache. So I'm gonna say index.html, about.html, style.css, and background.jpg. So now we're gonna be loading this array of resources instead of just this one page. So down here, where we're adding to our cache, instead of adding our offline URL, we're gonna add our resourcesToCache. And because it's multiple resources, we now need to switch this to say addAll, instead of just add. So you use add for a single resource, or addAll for an array of multiple resources. Everything else here is still the same, that's fine, you can leave that as it is. Now we'll have a look down here in our fetch listener. This is also almost correct, but whereas before we wanted to load a different site, we wanted to load offline.html instead of index.html. But now, if the visitor lands on index.html, we want them to see the offline version of it that we're pushing into the cache up here. If they land on about.html, we want them to see the offline version of that. So what we need to do is match what they're looking for with what's in the cache. The way that we do that is by saying that we wanna match event.request. So if the request is for the index page, it'll serve up the cached version of index. If it's for the about page, it'll serve up the cached version of the about page. So now that is ready to go. There's just one more step that we need, and that is we need to open up our about page. And we need to register our serviceworker in the about page as well. So we're gonna copy our whole script, and we're gonna paste it in here as well. So that if somebody lands on the about page first, then the service worker is still gonna get registered properly. So we’ll save that out, and now let’s check out our results. So this has been automatically refreshed, and you can already see that we have our OfflinePage from before, but we now also have our offlineSite. And if we click into that, there we go, we can see that it’s cached all four of the resources that we need. So now let's test if it’s working. We're going to Service Workers up here, we'll check Offline, and we'll refresh. And there we go, that's perfect, now that still looks exactly the same but we're offline here. And you can see that we have network complaints here saying that it hasn't been able to fetch the appropriate resources. But from the user's point of view, everything looks exactly the same. So now we'll test our About page, and there we go, that looks perfect, too. We're still offline, but everything is looking great. So there's a couple of things to be aware of with the method that we just used. The first thing is to realize that everything that is inside this waitUntil method must complete in order for the service worker to install successfully. So we've specified that all of these resources need to be pushed into the cache, with this line here. So that means that if for any reason the browser is not able to access any of these resources, it won't be able to get out of this waitUntil method, so it'll never actually finish installing. So if you're gonna use this method, then you need to be very careful with what you specify here, and make sure that those resources are definitely going to load. Of course the other thing to think about is, if you need to manually put all of your resources in here, there's gonna be a limit to how much complexity you can get into the cache. The service worker doesn't have any ability to communicate with the dom. So inside your service worker script here, you can't do something like working through the page and finding all the images, for example. So this particular process that we're using here doesn't really lend itself to automation. So that's why we're going to look at a second way that you can get a website cached for offline viewing. Where the first time that a user triggers that fetch event, we actually intercept that and grab the whole response, so the whole site that's being loaded up. And then we put that whole response into the cache. We do that in the fetch event, rather than in the install event. And that way, whatever's in that page, it's automatically gonna get put into the cache, and be ready for use offline. So we're gonna check out how you can do that in the next lesson. I'll see you there.

Back to the top