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

3.1 Wrapping Up

Hey, welcome to the last video in Simple Service Workers For Offline Web Pages. We're just gonna give you a quick recap here, crunch everything down into a nutshell so that you can come back to this video anytime you need a refresher on the principles of what we covered here. All right, so to recap, a service worker is a JavaScript that you register with the browser. And that the service worker then becomes available whether the user is online or offline. And you can use that service worker to load up content for your visitor to look at even if they're not connected. A service worker basically has the ability to intercept a request for a website, and decide whether to show you an offline version or show you an online version if there's one available. And because it does have that ability to intercept network requests, it must be run over HTTPS. But you can use service workers with localhost for development purposes. A service worker first needs to be registered, which is something that you do in your main website. You'll first need to check that service workers are supported, then listen for the load event on the window, register your service worker script being careful of the scope that you register it at. So basically, don't put it in a JavaScript folder, put it in the root folder of your site to make sure that it can work with all of your site's assets. To create an offline page, the basic process in your service worker is to listen for the install event. And when you get that event, open up a cache object with a name that you specify and push the URL of your offline page into that cache object. Add another event listener to pick up on the fetch request, respond to that fetch request by trying to load the live website. But if that doesn't work, look in your cache for the offline URL that you cached before and return that instead. If you want to load multiple resources for your offline page, then the process is almost the same as using that single resource offline page. With the difference being, you need an array of resources rather than just one resource listed. And you'll need to use addAll instead of add. And then in your fetch request, instead of searching your caches for a match to that one URL, that offline URL, look for a match for event.request. Which will try to find a cache resource that matches the page that the user is trying to load. And then finally, if you wanna automatically cache a whole page, then you'll need to do that responding to the fetch event rather than the install event. So that the first time a user lands, you can intercept that request, you can make a copy of the whole site that hold response, push that into the cache. And then later if the user is offline and their request for that same page fails, you'll be able to load up that automatically cached version instead. All right, so that is everything that we needed to cover. You've got three different ways now to handle creating offline web pages. And of course, you can expand on these even further. Definitely go ahead and read up on some of the resources that are included in the links below each of the lessons in this course. I hope you're feeling well equipped to handle creating offline pages now with an approach that's not overly complicated. So thank you very much for taking this course. And I will see you in the next one.

Back to the top