Service Worker API

[00:00:00]
>> So instead of doing something like this, bringing the data I can do that, but instead of doing that, I can use the service worker, okay? So, the next step is to start talking about the service worker. So the service worker is a JavaScript thread. That we install, we register in users browsers, in users device, I will give you a quick and dirty definition that most developers don't like.

[00:00:32]
Mostly if you have experienced with service worker, but if you have never worked with service workers before you understand really quickly what it is. It's my definition quick and dirty. A service worker is a web server that we install client side or we install on user's device that will serve or can serve files only for our machine, only for our PWA.

[00:00:58]
So if you think about that definition that is not technically 100% true, but if you have never played with service worker before, it gives you a quick idea because now it will impersonate your server. So it's sitting in the middle between your PWA and your server, even cross-domain servers.

[00:01:18]
So every time the PWA is requesting a file from your server, the service worker is there in the middle and it says let me see what do you want? PNG lemme see, the service worker looks in the back in the cache and it says yeah, I have that okay, here you have the PNG requested, the image, the cappuccino image.

[00:01:39]
And the server now is never hidden, in that situation is never hid by an HTTP request. Because the service worker act in the name of the server, okay, of course that's not mandatory. You write the service worker and you decide what the service worker is going to do and how, okay, makes sense?

[00:02:01]
Well, so the next step is to write our first service worker. So we need to create the service worker file, but please don't create that file in the scripts folder. If you do that, that's gonna be the, script folder, it's gonna be the scope of your service worker and your service worker will be able to render content or to serve content only from that folder.

[00:02:24]
So that's why I'm going to create a new Finder root folder with the name sw or serviceworker.js. It's up to you any name will work and here we need to write some code to actually do that serve operation, okay? We're going to be a server now or a proxy and we are going to use the cache to see if the file that we need is actually in the cache or not.

[00:02:52]
So, from the service worker, we are going to add an event listener over the self option with the name fetch. So every time my PWA is making an HTTP request, this event will be fired, okay, every time, right? So, from here we are going to call event.respondWith. RespondWith, so we're going to respond with something.

[00:03:21]
RespondWith receives a promise or a function returning a promise. So from here, I can do something similar to what I did before, creating an immediately executable async function something like this. It can be a real function or not it's just the same and here I can go and try to see if the request, the request is available event.request.

[00:03:50]
Okay, so I can try to see if it's in the cache. Remember, this event is going to re fire every time my website needs a resource from the web, from anywhere, my server or other server. So remember, we are actually here, the PWA needs something from my server or from a CDN, I'm in the middle.

[00:04:19]
I'm catching that request and I can say, okay, let's see what you do. So we're writing code there, okay? So, back here, then I'm going to talk to my cache first, so lemme remove this for a second, we're going back there later. So we're going to try to see if there is a cached response, lemme hide the panel for a second because this is going to be a large line.

[00:04:51]
I'm going to wait for caches.match, again caches.match opens all or checks over all the caches available in my origin. If you don't wanna check on every cache, you can first open the cache with the name and then do a match, match is search, okay? It's checking if it can find that request and we saw before that if it's not in the cache it gives me undefined, right?

[00:05:25]
So I'm going to check if it exists, if it exists it means that we do have a cache response. So I'm going to return that object to whom, I'm going to return this to respond with, okay? So we are responding with the cash response, make sense? And if not, if it's not the cache, I'm going to return a fetch, so I'm actually saying, hey, we need to go to a network because we don't have this resource here in cache.

[00:06:01]
So if the file that you're requesting is not in the cache, what's happening is I'm responding with a fetch. That's the code, is the code making sense, kind of? This file the service worker, is still not attached to my website. Okay, so we still need to register that file, but before doing that, I wanna show you a diagram to see if you can finally understand what's going on with the algorithm that we have just coded.

[00:06:38]
So, your PWA is making a request, right? The service worker is catching that request, so it's not going directly to the network, is catching the request it first. So step two, is searching in the cache, in the cache's storage, right? If it's a cache hit, so it's there, it's responding with that cache response to the PWA.

[00:07:03]
And if it's a cache miss, so it's not in the cache, it's responding with a network request that finally will get back to the PWA, make sense? That's the algorithm that we have just created. So, now that we understand what's the idea, let's register the service worker. So I'm going back to VS code and let's go to app.js.

[00:07:33]
And any place, we're going to go navigator.serviceWorker, be careful with capital W, register and the name of the service worker file that I have just created. That's all, with that, okay, we are specifying that we wanna install that server, okay? That proxy. So going back to my browser, I'm going to refresh, how do I know if this is working?

[00:08:07]
Well first, there was something that was really small, probably you haven't seen that. You didn't even realize that there is something new from the previous runs. I do have this icon here, not sure if you realize, it wasn't there before, believe me, it wasn't there before, what is that icon?

[00:08:26]
The PWA installation icon on desktop. Chrome or Chromium, so that's also Edge, on desktop, when you have a PWA and you have a service worker, you are passing what is known as a PWA criteria. And it's inviting the user to install the PWA now, because it feels now your app will work offline.

[00:08:51]
So it says, okay, you are following all the requirements for the PWA. This is changing from Chrome 109 or it will change probably from Chrome 109, from Chrome 109 or 110. They are changing these requirements and now you will see that icon even if you don't have a service worker, so service worker won't be mandatory for PWA's in a couple of months.

[00:09:17]
Okay, so that's new. Anyway, if I actually see my service worker, I can go to the application tab. And the one where we were seeing the storages, and if we scroll to the top, there is a section for service workers. And if I click there I can see that I have a service worker, that is activated and running right now.

[00:09:39]
That means that now my images, it's difficult to see that, are my images being served from the service worker or from the network? How do I know? One way to know, is opening the network tab. In the network tab, where you see all the resources, okay, there is a size column.

[00:10:06]
Don't ask me why it's in the size column because it makes no sense. But in the size columns, it will tell you which assets were actually delivered from the service worker and not from the network. And you will see that on my PNG files, were served from the service worker.

[00:10:24]
Not the .js file or API.js file, why? Because it's not in the service worker. By the way, you can always go back to the application tab, I should move it, you can drag tabs, I'm not sure if you know that. So I can drag the application tab there, I can go to storage and you can see now that I have 1 megabytes in cache storage, 45k in indexedDB and some bytes on the service worker.

[00:10:54]
Right now my quota usage is 1.2 megabytes, but I can clear everything, so if you clear everything now, there is no service worker, there are no IndexedDB no cache storage, nothing. It's like the first time I'm visiting the website. So if I reload, now things were not coming from the service worker, okay?

[00:11:15]
So if I go into the network, you can see in the size column that you won't see service worker because the first time you access the website, you don't have the service worker, you don't have storage. But if I refresh now again, I should see the difference and now images are coming from the service worker.

[00:11:34]
So the logic is kind of working.