Serving Files with Network-First Policy

[00:00:00]
>> The only problem that we have is that this fetch is also cache first. And we already know what that means. This code is going to the cache first. If it's in the cache, it will serve it from the cache. But it will never update the cache. When is the cache being updated?

[00:00:22]
If I change my HTML, if I change my CSS, I changed the colors. Will I take the change? No, because after I cached the CSS, it will be there in the cache forever. So I also need to find a way to solve the problem. Remember that when we were using index vb, we use other algorithm also.

[00:00:48]
It was network first. Well, something similar happens here. You can also have network first. There are other design patterns as well. There is one known as stale-wide-revalidate. I'm not sure if you're have heard about it. So in that case, what you're doing is, you're always starting from the cache like this one, but also you go to a network and update the cache for the next time you need, that's fine.

[00:01:17]
But for here, we can go back to our companion website and I have a code here that makes Network-First. Actually, it's not so different, it's just changing a little bit the structure. So, for example, please don't keep both. This is not going to work, is one fetch even handler or the other one.

[00:01:44]
For this example at least I will comment the other one. So in this case, it's actually pretty similar to the network first we did for IndexedDB. So when there is a new fetch to the network, we respond with an async function. We first try to go to the network and return that network based response.

[00:02:06]
And only if it fails, we go to the cached version. And if you want here, also you can update the cache. Can you? Yes, it's not so complicated, we can do it if we want. So, we need to open the same, we need to open the cache. So, caches.open with the name.

[00:02:33]
I think, well, in this case we should know which one, because now we have two caches, the image cache, and we have the other one, okay? So, we need to look at the URL. Well, right now, let me do it quickly with just assets or let's call this updated assets.

[00:02:50]
So, I'm creating a new one for this, okay? Just to show you how it works. And what you do, you don't do add, you do put. Put, what it does is takes a request. I forgot the await here. So, that's the await created by Visual Studio was okay, but in a weird place, we take a request, and then the response, okay?

[00:03:18]
So, you typically we think that we can do something like this. So, this is my request and I will save the fetch response. The problem is that HTTP responses in JavaScript, they cannot be reused, okay, because they are streams. When you have an a stream type of object, when you consume the stream the stream is gone, the data is gone.

[00:03:47]
So I cannot return the response to the browser if I have already used it for the cache. Make sense? So I need to clone it. So I make a clone of that response for the cache. So then, I can return the original one to the browser. And so little tricky, okay?

[00:04:11]
This is a bonus, I wasn't expecting to do that but anyway. Make sense. So in that case you also update the cache. And that's how you do Network-First. And in in service workers, there many more diagrams, ideas, and algorithms that you can use. And if you don't want to write your own code for the service worker, typically you use a framework.

[00:04:33]
And there is one framework that is the king here, it's Workbox. Workbox comes with it's open source, it comes from the Chrome team, but it's multiplatform, okay? This is the name. So, it's a set of libraries for service workers. So a few years ago, someone said, it's the jQuery of service workers.

[00:04:57]
Yeah, but now it feels like if I say that, it's like something old, right? [LAUGH] Deprecated. So, anyway, but it's like the library for service workers. So, if you don't want to write your own service worker with your codes, it includes a lot of strategies already for caching, already done and ready for you to use.

[00:05:20]
You just specify which strategy you want for the folder images. You want another strategy for the folder data. And it will do the caching, the pre-caching and the serving for you. So here, you have the three more common caching strategies, cache first. So with cache first, you are prioritizing speed over freshness of the data.

[00:05:46]
Network first, you prioritize freshness over speed. And stay-while-validate that is trying to keep a balance between the other two okay? And the main challenge here is how to update the resources because files are saved in the client and updating files in the server one trigger any automatic change in the client.

[00:06:13]
We have already discussed this, okay? But just as a wrap up on this topic, so if you change something on the server, the client will never know. So we need to define and code an update algorithm, okay? So unfortunately, the API is not helping us with this. It's up to us, okay?

[00:06:31]
So, if you have a build process, typically, the build process will create with a hash, with a version number, with a timestamp. You can create like a manifest of resources, and versions or hashes of each resource. So then, client side, you can compare and update your code, make sense?

[00:06:53]
Developer is in full control on how to cache and serve the resources of the PWA and how to manage API calls, with the good and the bad of that, okay? Full responsibility we have on this.