Service Worker

[00:00:00]
>> Maximiliano Firtman: So, what's a service worker? It's a JavaScript file running in its own thread, that will act as a middleware offering a local installed web server or web proxy for your PWA, including resources and API calls. Let's try to simplify that. Anyway, this is my definition that is a bit extreme, because I'm talking about the web server, a web server that runs client side.

[00:00:28]
But actually, you can make a web server running client-side. And it's not the full definition, because there are more steps, such as, it will serve files in the name of the server. So it's responding in the name of the server. So, this is how it works. You have your PWA and your PWA is here.

[00:00:52]
It's connecting to a server or to cross-domain services. Can be a CDN, Google Analytics, anything, okay? Amazon, Azure, AWS, whatever. But the service worker is in the middle, so it's a proxy. Everything that goes to a network will go through the service worker. So, the service worker has a lot of power because now it can trap the request and it can say no, you know what?

[00:01:24]
You are not going to the real server. I will respond for the server locally, because remember, the service worker is in user devices, so it's in client-side, it's in your phone, okay? So the service worker that runs client-side in the browser's engine. HTTPS is required. We know at this point it's kind of a default, but just to remind that, with the exception of localhost, okay?

[00:01:49]
The localhost, we don't need the HTTPS. And the service worker is installed, actually, the term is typically registered, is registered by a web page. Any web page, so an HTML, actually a JavaScript within an HTML, will register a service worker. We will do that in a sec. It has its own thread and lifecycle compared with your page, okay?

[00:02:14]
It will act as a network proxy or a local web server in the name of the real server once it's registered and active. It has some abilities to run in the background. So you close the browser, you close the web app, you close the PWA, you close the browser, and the service worker can still be executing code.

[00:02:35]
There is no need for user's permission. Have you ever seen a message or a permission that you're saying do you want that as service worker? No, but let me do that. Let me do a test with you. Open Chrome, any Chrome that you have. If you have an Android, it can also be your Android phone.

[00:02:53]
And try this, chrome://serviceworker-internals.
>> Maximiliano Firtman: When you get there, you will find a list, probably a very long list, very long list of service workers that are actually installed in your Chrome. So these are web servers that are installed in your Chrome instance. Did it work? Do you see?

[00:03:30]
So, at first, it's kind of scary, right? Okay, so I've never accepted the installation of these files, okay? Now for example, this one, everyone has a scope. So it's discussions.apple.com, which sounds like a good name for a PWA course, okay? Let's discuss about Apple. So, discussions.apple.com. Right now it says, well it has an ID by internal self, but it says, installation status activated, or it's activated, so it's using my CPU without my knowledge because I'm not using that website.

[00:04:08]
But actually it says stopped, so it's not running, okay? But now, let me show you something, I will open a new window here, so we can see what happens like this. And I will go to discussions.apple.com, and before pressing Return, let me do this. I will say /steve-jobs/was-right/pwa-rocks, okay?

[00:04:40]
Something like that, of course, I guess that it's a 404, right? It should be a 404 server side, I don't know. But if I hit Return, now, you can see there is a client here going on. And actually it was so fast that we haven't seen it, but I can a stop but something appear here, appear a client, okay?

[00:04:59]
Looking for something in the Apple community. So it was really fast in this case because there is no fetch handler. It just does not exist. But you can see that it's connected, okay? There is a client there going on. Let me try another one. Let me look for one that do have, by the way, we can even see the script, those scripts are downloaded into your computer.

[00:05:22]
This is Google Drive. Let me try to find one that do have some sites, I don't know what they are, actually. So, firebase.google, let's try this one, so Google Firebase. So, again, look here, Running Status: STOPPED. Let's see if we can catch it. firebase.google.com, boom, starting running. So this is staying there.

[00:05:50]
So now it's running, okay? So serviceworker is running, the script is running. And there are two clients, you say, why two clients? I have only one. My guess is probably an iframe, because the iframe is another navigation, another document. So this page has an iframe, I can see the URL right here.

[00:06:12]
So what happens if I well, if I change the tab, it's still running, okay? What happens if I close the tab? What do you think? Well, now it's a stop. I say, hey, come on, my patient is still here. Running. Can you see? Do you see that? Stop running.

[00:06:28]
Say well, what happened? Let me close the tab. I closed the tab. And it's still running. You weren't probably expecting that. You were not expecting that. So why is that? Because it has its own life cycle separated from the client. It takes a couple of seconds, typically around 30 to 40 seconds in Chrome.

[00:06:49]
It depends on the browser, and if it's no there are no clients, no one is requesting files from that domain. Says, okay, I'm done, okay? Actually, it's not the service worker saying that, it's a browser saying you are done, okay? So the script is not responsible for that, and now it's a stop.

[00:07:08]
And waking up again in the future if there is another navigation to that domain. If a message has been received, a push notification message has been received. If there is a background sync operation, there are a lot of things that may happen and may turn on that JavaScript file in the background.

[00:07:29]
>> Audience: Are you going to talk about push notifications at all?
>> Maximiliano Firtman: So push notifications are on top of these service workers. Originally there is no direct relationship between progressive web apps and push notifications. It's just one feature, okay? So, we won't do that here. I can show you a quick idea if you want.

[00:07:53]
But, the other course, JavaScript in the Background, covers web push notifications, and we do a full sample on that.