Serving Resources Overview

[00:00:00]
>> So something that we need to do is to use that service worker to cache and serve the resources of our PWA. So the service worker has a local cache. In fact to be technically accurate, the cache is also available outside of the service worker. It's called the cache storage API.

[00:00:22]
With that storage, we can save all the resources that we need or just a few. We decide. Everything is heavily based in JavaScript promises. So please have in mind that we're going to see a lot of async/await or a lot of them when we are using this API.

[00:00:41]
Most of the common scenarios include the ability to prefetch on installation. That means, when you install a service worker, what will happen is that you're going to prefetch so you're going to download assets that you will need later. Also you can do cache on request. So instead of pre caching, you can cache a request.

[00:01:07]
So when you are actually getting into a section of the PWA, and you're downloading for the first time, the assets, you cache those assets at that point. So this is a big advantage over a classic native app development. Because that means that you decide here the algorithm that you wanna use in terms of the resources, HTML, CSS, JavaScript, JSON, videos, anything that you need for your PWA.

[00:01:37]
Most of the time we follow an app shell pattern. That means that we download at least all the files that are necessary to render the app shell. So the app shell is everything that you see in the user interface. Maybe there is a section that is not actually downloaded, but at least we have the basics to actually render an error message in case that's what we want.

[00:02:06]
After we cache the resources, we need to serve them, because remember, we are going to be a server. So in this case, the service worker will respond for every request that the PWA make. It can make a decision serve from the cache, forward the request to the network where you can even synthesize a response.

[00:02:31]
That means create a response on the fly as if we were Apache with PHP, okay if you want. So but in this case is JavaScript and it's executed client side. Any mixed algorithm is possible here. So you are in charge and that's an advantage but also responsibilities that we have that we didn't have before.

[00:02:56]
So a warning here, the serviceWorker API it's a low level API. So that means that we have a lot of power, but also we need to put out of work for some basic behavior. So the question is that, can we have a PWA that doesn't actually need a real server because the service worker can actually answer for all those requests?

[00:03:24]
So in theory, yes. The problem is who is serving the service worker the first time. So you actually need a server to serve the service worker and the HTML that register the service worker. And then probably the service worker will need someplace to download the resources the first time.

[00:03:43]
But after everything was registered and installed, then in theory, you could potentially shut down your real server. However, that's the theory. In practice, because the ServiceWorker is a middleware, you should always think that something will happen that will probably remove the data. It can be the user going to settings and deleting everything.

[00:04:13]
It can be the user buying a new device, you go and buy a new device, a new laptop, a new phone. Yeah, maybe you're you have the icon again because you are recovering your backup but you don't have the assets. So that's why we are not going to stop using the server.

[00:04:30]
So the server is always there. We are using the service worker as a middleware to help performance and offline abilities.