Create a Service Worker

[00:00:00]
>> So it's time to go back to the code and write our first service worker. I'm in VS code and now I'm going to create a new file. It's JavaScript file, so I'm going to create a new file, I'm going to save that file as serviceworker.js. Typically we have only one service worker per PWA.

[00:00:19]
As I mentioned before, you can have more than one if they are in different folders. That typically we don't wanna mess with that. So there are not so many use cases. So we put the file in the root folder of our project, and we can call that sw JS, or service worker JS, any name we work, but those are the typical names that we use.

[00:00:41]
And for now, I'm just going to say console.log. Hello from the ServiceWorker. Just understand how this works. It's a JavaScript file, but we are not going to use it or important as any other JavaScript. So in the HTML, then we are not going to run a script. So this is wrong I'm not going to call this script like this.

[00:01:07]
If we do this it will execute that ServiceWorker file in the main thread and we do not want that. Okay so that's not how it works. We actually need to register the service worker with its own API. So to do that I'm going to create another normal standard script just to separate these from the current app behavior.

[00:01:31]
So we can call this sw-register.js, SW ServiceWorker. So I'm going to create that file Ctrl click or Command click and here I'm going to register the serviceworker remember this is the main thread. So to register a service worker, we use navigator.serviceworker, be careful with a capital W there .register, and it receives as the first argument, the URL of the service worker.

[00:02:07]
So it's actually pretty simple. serviceworker.js. So we have, like 8% of the users right now browsing the web without support for service workers. And probably you already know this at this point. But what will happen if the service worker API is not available? This line will create an exception, so it's a good idea to check for service worker support before registering the file.

[00:02:39]
To do that, we can verify if the service worker property is available in the navigator option. So if that's true then we register the service worker. Please warning here be careful with in this case using camel case so be careful with that capital W because if not isn't gonna work.

[00:03:02]
Okay, so actually registering a service worker is pretty simple is this. So let's see this in action, and back here in Google Chrome and now we are going to pay attention to the second section within the application tab that says, service workers. So, if you click there right now, nothing appears.

[00:03:26]
So we don't have any anything there because we didn't have a serviceworker. But now I'm going to refresh. Whenever refreshing now you see that something appears here, we have a source, we have a timestamp. Also we have the current status it says it's activated and running. And I can stop it if I want to.

[00:03:49]
Okay, so it's currently running. If I go to the console, you can see the message saying hello from the service worker. It's coming from the service worker JS. Let me show you something. If you are execute code here in the console, by default, you're in the window. But also you can click in the top drop down and change the context.

[00:04:12]
And at the bottom you will find the service workers context and now if you do this you're in the service worker. So sometimes when you're in the dev tools you can pick if you want to execute code in the service worker thread. Or in the main UI thread and when you're in the service worker have in mind that after a few seconds of inactivity without any network activity, your thread will be terminated.

[00:04:40]
So you will see in a couple of seconds that serviceworker.js will actually not be there anymore and he will disappear. It's still active area, but at one point, it will just disappear. Okay so that also means that the service worker is not the right place to put some content or some logic.

[00:05:03]
For example, if you want to communicate with a server, like with a web socket or something like that, this is not the right place, because after 40 seconds of inactivity, your serviceworker is dead. So we don't want that so have in mind this the lifecycle of the service worker.

[00:05:22]
So now we do have a service worker but that doesn't mean that our app is passing the criteria in fact going back to application manifest? Now, we don't have the message saying that, that there is no serviceworker because we have a serviceworker. But the page doesn't work offline.

[00:05:43]
So we have a serviceworker but it's completely useless at this point.