Serving Resources with a Service Worker

[00:00:00]
>> To serve the files, what we need to do is to listen for another event. It's called fetch, the fetch event handler. And this is how it looks like. What we're going to do, is the event argument that we received has a method called respondWith. It receives as an argument or an HTTP response, or a promise of an HTTP response.

[00:00:35]
So it can be a sync response or an async response. So for example, just for testing this, I can create my own response like this. Now, JavaScript because now we can create web servers or kind of web servers, I'm going to create a new response object. So we have a constructor or a class if you want, responseR that receives a content like hello, I'm a response, okay?

[00:01:05]
So I'm going to respond with that response. So this is like if you have experienced with node JS, this is like serving like the rest don't write something like that, on node JS. So let's see what happens. I'm going back to Chrome, I'm going to refresh. And now I see hello, I'm in response, I'm not even seeing my HTML.

[00:01:37]
Where is my HTML? Well, now the server, that is the service worker says, this is the content that you want. So any URL that we try, any URL, even URLs that we know that they don't exist, will actually answer hello, I'm a response, that's all. So we can just kill our website in one second.

[00:02:06]
So if you upload the service worker to an actual real website, your website will not work. And it will say, hello, I'm a response on every URL. There is one trick though, without using that tools. If you do shift+refresh, it will bypass the service worker. So Shift+Refresh will give me a 404, a real 404 because yeah, now it's bypassing the service worker, the middleware.

[00:02:34]
And if I try the homepage will Shift+Refresh you can see my HTML is there. But if I refresh, normal refresh without Shift, my service worker will respond. So this is how you synthesize responses with a service worker, you shall say respond in one. So do we have any tool to know if there are assets in the cache or not?

[00:03:00]
We have an API and we're going to see the API in a couple of minutes. So we can query the cache to see if an asset is there or not. As a developer the tool to check is this one, exactly this one. So you go to Dev Tools application, cache storage and you can see if the asset is there or not.

[00:03:18]
And in terms of libraries, if you don't wanna write your own service worker, the the one that you're looking for is called workbox. Workbox, it's a library by the Chrome team, workbox JS, that will actually make this easier, okay? So it's like, someone told me once, is like the jQuery of service worker, okay?

[00:03:46]
It's the library that you wanna use when you're doing mid to large PWAs. And actually, if you're using the Angular CLI, the Vue CLI, or the create-react-app CLI, and you're creating progressive web apps with those build chain tools. Actually, they're using workbox behind the scenes. So this is probably the library that you are looking for.

[00:04:12]
So of course, these response can actually be different. For example, I can change this to a template of string, and I can ask for the URL, the event has a request option. And that request option has a URL. So this is actually similar to one in node JS, you receive the request and you return a response.

[00:04:39]
Well, you have all the option, you have the headers, the cookies, everything because, you are acting in the name of a server, so you can see everything the server can see. So now the difference is that if I refresh, Now, I see the URL, so any URL that I'm trying to load, it's actually part of the response.

[00:05:00]
So I'm like echoing the URL, okay? Of course, this is useless, but I think that you can get an idea of how powerful the service worker is. Because now using that URL, you can serve something different for example, if the URL is /fake, I'm going to use this code.

[00:05:26]
And if not, I will just leave it as it is. So I'm not going to respond with in that case, it will bypass the service worker and it will go into the next work. So with this code, now, if I look for the CSS, I'm getting the CSS, and if I'm getting the homepage, I'm getting the PWA.

[00:05:47]
So if I try /fake, I might still get a 404. So the service worker is not acting because the URL is always absolute. So I need to actually say, localhost 5000 fake. If you don't wanna do that, there is a URL API in JavaScript, so you can actually take each part and look for the path only.

[00:06:14]
And now /fake will give me the synthesize response. So when you're writing your own service worker, you need to be very careful about what you're doing, right? Because you can actually mess with the navigation of your app. Fortunately for you, you just need to upload a new version, if you have a bug or something and the browser has an update algorithm.

[00:06:38]
So without that they don't reload there is an update algorithm going on here. So when the browser realized that there is a new version, it will prepare that new version for the next user. So you always have one version of the service worker that will be old but then on the next load, like in one minute after the old one was killed.

[00:07:01]
On the next one, you will see the new one, the new service worker instance. So the service worker is a new paradigm on the web, is really powerful but you need to know what you're doing because if not, you will have problems.