7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Registering Service Workers

Service workers are where the PWA magic happens. In this lesson, you'll learn how to register them in your application.

2.4 Registering Service Workers

For a progressive web application, the service worker is where all of the magic happens. This is where we can cache files or use the push API to receive messages and some other stuff. So, in this lesson we are going to add a service worker to our application, so that we have an actual. Progressive web application. Now a service worker is really nothing more than a JavaScript file. And we can technically put it anywhere. But the easiest place is at the root of our application, which is gonna be the public folder. So, let's create a new file there. And it doesn't matter what we call this, but let's be simple and let's just call it to SW Dot j s. And the really cool thing about service workers is that it's completely event driven. We hook into events, and then do something when those events occur. Like for example, the first thing that we will need to do is register the service worker. And that is going to install it which is an event that we can listen for. And we can do something whenever the service worker is installed, so to do that, we say self, and then add event listener. We want to listen for the install event, and then we just have a function that executes when that occurs. So, in this particular case we could write a message to the console and say that the service worker is installed. Hooray, something along those lines. So, that's a great starting point, so now we just need to register this service worker and we can do that inside of our app JS file. So,here we need to be a little bit careful, because not every browser that is going to visit our application. Is going to support service workers, so we need to use a little progressive enhancement here and check to see if service worker is in navigator. If it is then of course, we want to register our service worker and we will do that using the navigator object. There is a service worker property that itself is an object that has a method called register. We pass in the URL to the file that's going to be our service worker. So, that is simply SW.JS and this returns a promise. So, we need to to do something whenever register is done, and we actually have two outcomes, either it's going to work or it's not. So we will use then here, this is to signify that the service worker was successfully registered. So, let's write that to the console success fully registered. But let's also have a catch, as well just in case something goes wrong, so that we can write something to the console if that indeed happens. And we'll just basically say that there was an error while registering service worker, so there we go. Pretty simple code to set up the service worker. So now, all we have to do is just go to the browser and reload the page. And let's go ahead and pull up the developer tools so that we can look at the console and see what happens. Well, we can see here. The great thing about this light server and of course it is configurable to not do this, but whenever we save a file, it's going to automatically reload the page. So, we can see right here that the service worker was successfully registered and it is installed. So, we have just added a service worker. So if we run our report, we should see that reflected there. So, let's go ahead. And let's do that, and we will see what the results are, now unfortunately, our progressive web application test is still returning. Well, nothing, but if you'll remember from the previous lesson, we saw a lot of errors about not having a service worker, well, those are gone because we have a service worker. And the developer tools give us the ability to look at all of the aspects of our application. So, if we go to the application tab, we can see the manifest and we can see some of the reports about the manifest. There's our theme color. That's nice to have. If we look at service workers, we can see that there is indeed a service worker that is running and we can stop it if we want to, or we can update or we can unregister it. But this clear storage is nice as well, because this gives us a readout of all of the data that we are using, as far as our application is concerned. And we can see what our storage quota is. That's quite a bit, but of course, we don't want to be downloading all of our assets and everything. The whole idea behind a service worker is so that we can also provide an offline experience. Now the offline experience is really dependent upon what we want to provide, some applications will just simply stay the message that you're offline. Our application is gonna work for you right now, whereas others will have little games or things like that to work. For our case. I would like for us to at least display the status report. And then have a message thing that you're currently offline, you need to reconnect in order to get updated data and we will get there, but we at least have a service worker. And so starting in the next lesson, we are going to cache some of our assets so that we can access them offline.

Back to the top