2.4 How to Load a Custom Offline Page
1.Introduction1 lesson, 00:27
2.Introducing Service Workers6 lessons, 39:25
3.Conclusion1 lesson, 02:56
2.4 How to Load a Custom Offline Page
Hey, welcome back to Simple Service Workers for Offline Web Pages. In the last lesson, we got our offline web page here, stored inside our cache. Now we're gonna code up the part of our Service Worker that is gonna actually load this web page up if the user is offline. The way to check on this when you're working on a Service Worker is, in the Application tab once again, in the Service Workers area, you just tick the Offline box and then refresh the page. Right now, this is what we see, this generic, There is no Internet connection page. But we wanna show our users this instead. So I'm just gonna uncheck that again, get back to a normal page. And now let's code up this part of the Service Worker. So just like we did up here, we listen now for the install event that fires off this part of the Service Workers process. Now we're gonna listen out for another event, the fetch event, that fires off whenever a user tries to load up a web page. So once again, we're gonna say this.addEventListener. We're gonna listen out for the fetch event, and then we're gonna run a callback function. Once again, we'll pass the event, that'll be the fetch event, and that'll give us information about that event. And now in here, this is where we decide how the browser is gonna respond to this fetch event. As I mentioned earlier, it's now completely up to us. We can send the person to the network to see the live site or we can load in content that we've decided on ourselves. We do that by saying event.respondwith. So I'll just make some space in here. And this is where we're gonna set up how we respond to that fetch event. And for what we want here, the first thing that we're gonna do is just try to fetch the live site. Obviously, if the site is online, we want them to see that online version. So we're going to say fetch(event.request). So this represents the actual fetch request. And this represents what's in that request, so for example, a request to get a website off a network. However, if the user is not connected to the network, they're not connected to the Internet, then this fetch is going to fail. So if that happens, what we're gonna do is catch that failure, or catch that error, and we do that by chaining on .catch. Once again, we'll need a callback function. And in here, now that we know that the fetch request has failed and we're catching that failure, we're catching that error, we can decide what to return instead. What we're gonna do is look into the caches. There's gonna be a link in the notes below this video, where you can look more at this caches object and what it represents. So we're gonna look in the caches and we're gonna try to find a match for the offline URL that we defined earlier. So now what's gonna happen is the browser will look into the cache storage, it'll find our offline HTML page, and it's going to return that instead of the request for the live page that has failed. So we'll save that out, and let's go see if it's working. All right, so we're running automatic reload, so this will have refreshed automatically. And because we have this box checked, this should be running our updated Service Worker. We already know that we have our customOfflinePage in here. So now let's tick this box here to put us offline, we'll refresh. And there we go, now we've got our offline page being loaded instead of that generic you're not connected to the Internet page. That's really the simplest way that you can go about giving some content to somebody who's lost their connection. But a custom offline page is not all you can do. You can actually also provide an entire web page that users can see no matter if they're online or not. So in the next lesson, we're gonna look at the first of two ways that you can actually get this entire website to still load up, even if your visitors are offline. So we're gonna check that out in the next lesson. I'll see you there.