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.2 Registering a Service Worker

Before you actually code up your service worker script, the first thing you’ll need to do is “register” a service worker on the webpage you want to provide an offline fallback for.

In this lesson we’ll cover how to register a service worker and check that it’s active. While we’re at it, we’ll cover a couple of little things you should be aware of as you’re coding to make sure you don’t run into any “gotchas”.

Related Links

2.2 Registering a Service Worker

Hey, welcome back to Simple Service Workers for Offline Web Pages. In this lesson, we're gonna start the coding process. We're gonna look at how you can register a service worker, how you can check and make sure that that registration has worked successfully. And we're gonna go over a couple of things that you need to know in advance that might otherwise let you run into a couple of road bumps. What you're looking at here is a super, super simple web page, and what we're gonna be doing through the course is a couple of things. The first thing that we're gonna do is set up the site so that when there's no connection, when we're offline, we see this custom offline webpage. And then in later lessons we're gonna have this whole site available offline as well. So to get started the first thing that you're gonna need is your starter files, which is this little mini website, and this offline website. With your access to this course you should also have access to a bunch of source files. Grab your download of those and have a look in the folder named Starter Files, and you should see these files here. We have three HTML files, a background image, and a style sheet. Make yourself a folder to house the site that you're gonna be working on through this course, and then copy these images into that folder. I'm gonna be using VScode. Of course, you use any code editor that you want, and open up your working folder inside the code editor so that we can start looking at these files. So we're gonna begin by registering our service worker, and that's something that we need to do in our index.html page. We're gonna repeat the process later in the about page, but for now we'll just concentrate on the index.html. So we've just got some very simple content, not much is happening here, just a style sheet, Google font and a little bit of text. And down the bottom here is where we're going to register our service worker. So we'll need to start with a pair of script tags. And now the first thing that we're gonna need to do is to check to make sure that service workers are actually supported in the browser that the visitor is using. They are supported in all major browsers, but there are always edge cases and outdated browsers of course, so we're gonna need to do an if check. Just put this in place. And we'll put in our condition here. And what we're gonna do is look for serviceWorker in navigator. Basically the navigator is an object that contains some information about the browser. There will be a link in the notes below this video where you can read more about that. But as long as we do have serviceWorker inside this navigator object, then we're good to go. Now, let's do a quick test and make sure that this check is working, so we're gonna say console.log("service workers supported"). And now I have this live server extension installed here, it's very handy. And I'm gonna use its GoLive button here which is going to set up a local host server for us to check all of this code on, which will also be automatically refreshing. So now this is a local host server showing us a page that we're working on. And I can hit F12 to open up Dev Tools. Go into the Console, and there's our message, service workers supported, so that's all good to go. Now we need to decide when we're gonna register our service worker. And the best time to register it is when the window fires off its load event. It does that when the whole page is loaded and any associated resources. So that's gonna help us make sure that we're not trying to register our service worker too early. So we're gonna say window.addEventListener, that's gonna let us look out for this load event. And I'm just gonna finish that line and make space for the rest of the code we need to add. Listing for the load event, and when we get it, we're gonna set off a call back function. Let's put this closing curly bracket down here. And then in here is where we're gonna actually register our service worker. Now, service worker is a script, so we're just gonna make an empty JavaScript file to act as our service worker. This one we're gonna call sw_offlinepage.js. And we're giving it this name because the first service worker that we're gonna set up is going to be loading a custom offline page. We're going to create two other service workers later, and we'll name those differently. That can just stay empty for now, we don't actually need any code in order to register it. Now we're gonna reference that navigator object again. So navigator, and now, we're gonna go serviceWorker.register. And in here, we just need to provide the path to the serviceWorker file that we just created. We got sw_offlinepage.js. Now something that's really important to pay attention to here is where your service worker is located. Because the location of your service worker is going to determine its scope. Right now we've got our service worker file in our main directory. So that means that it can work with any of the other files in the main directory or any sub directories. However, if you have a JavaScript folder, and you put your service worker in the JavaScript folder and load it from there, now the service worker's scope is gonna be contained inside that JavaScript folder. And it's not gonna actually be able to work with all the rest of the files in your site. So that can be something that could trip you up if you're not aware and you're used to putting all your JavaScript files in a JavaScript folder. Generally speaking, the easiest thing to do is to put your service workers in your main directory so they have access to everything. And that by itself will actually register the service worker, but we're gonna chain on a couple of extra steps as well. So I'm gonna say then. In that line. Now we're gonna add in a callback function. And in our callback function here, we're going to pass registration. And this is gonna give us information about the service worker that we just registered. In our callback function, just make a little space. We're gonna output a couple of messages to the console. The first one is we're gonna fire off that the service worker has registered successfully. And while we're at it, we're gonna output, the scope, That the service worker has registered with by saying, registration, Scope. As I mentioned before, the way that you register your service worker affects the scope that it can access. So this little message is gonna let us double check and make sure that our scope is good. And then we're also gonna add on one more function. And this one, Is gonna fire off if the registration doesn't work. If it doesn't work, then we're gonna have it output a message saying that the service worker registration failed. Service worker registration failed. And, We'll have it print the error that was returned. So this can be really useful if you've made a mistake in the coding of your service worker. Or even just something simple like your filename is put in incorrectly, you're gonna get an error message here that will help you to bug check and solve whatever problem that you have. All right, so now that is all the code that we need to register our service worker. Let's jump into our demo and see if it's working. All right, so sure enough, our site here is refreshed automatically. It's giving us our support message confirmation, and it's telling us that the service worker has registered successfully. And here, it's giving us the scope that the service worker can interact with which is everything on our main domain. You can see that that matches up here, our main domain for our local host. Now, here is where you wanna start looking in the Application tab. This is where you're gonna spend a lot of time when you're working on service workers. You can see here we have this little area here for service workers. And it's showing us that our sw_offlinesite.js file is registered. It's also showing us that it's activated and running. And something here that is really, really important, is to make sure that you come in and you tick this box here, Update on reload. If you don't have this box checked, what's actually gonna happen when you refresh your page is, the last version the service worker that you loaded is still gonna be active. So any changes that you've made in your code are not gonna be reflected in your site. So then you're gonna think that your code isn't working, when it's probably working just fine, it just hasn't refreshed. And the other thing that you wanna be aware of, is that you should never, when you're developing a service worker, use the Hard Reload or Empty Cache and Hard Reload options up here. And the reason for that is whenever you use either of those options, the browser's going to completely bypass the service worker. And, once again, you're probably gonna think that your code is not working, when it is probably perfectly fine, it's just that using hard reload skips the service worker altogether. So just check this box instead, and just hit normal refresh on this Applications page. On the left here, you can see your cache storage, and we're gonna start working with this in the next lesson. But before we get there I just wanna show you, I have something in the cache here from working with the site earlier. Instead of using this to empty the cache, you can just come down here, right-click something that's in the cache and hit Delete. And now you're all good to just use that regular refresh button. All right, so now our service worker is registered and we're ready to start actually coding it up. So in the next lesson we're gonna write the first part of that service worker, which is going to grab our customer offline site that we have here, and it's gonna push it into this case storage. So we'll go through how you can that in the next lesson. I'll see you there.

Back to the top