Network First & Stale or Refresh

[00:00:00]
>> Maximiliano Firtman: Okay, so we've seen now and it's working our cache first. Another strategy for serving files is network first that you may understand by the name what it's doing. In this case, it's prioritizing the network. So in this case, my PWA is making a request, that's step one here, and the service worker drops the request and it's not going to the cache, it's actually going to the network.

[00:00:25]
And then if it's fetching that from the network, the third worker will say, okay, we'll just take that and answer that. But if the network fails, it will go to the cache. Why the network can fail, because maybe you're offline, okay? And so then if you're offline, the network is failing, you go to the cache and you return the response from the cache.

[00:00:48]
So this is network first. The advantage is freshness of the data. The disadvantage is performance, because now you are preferring the network, okay? You have the code there. In our project, if you wanna try it, it's difficult to see the difference actually. But if you go to the snippets, you have it there.

[00:01:10]
If you wanna try it, you just replace the fetch event handler with this one and that's all. And the same happens with the last one, a state while revalidate. So let me explain that strategy, because it's difficult to get the first time. So, a state while revalue is the other strategy.

[00:01:27]
And by the way, these are strategies, not APIs, which means you can create your own strategy with your own logic, okay? But this has a lot of things that are going in and out you, this is the thing. The PWA makes a request, okay? The second step, we search in the cache.

[00:01:46]
The second step, we go and search in the cache. Do we have it? Okay, this is a cache hit. We return the file and we are done. This is like cache first, okay? But what happens if it's not in the cache? So its a cache miss. We go and fetch from the network.

[00:02:04]
But instead of sending the response directly to the PWA, we trap the answer, we clone their response, here we clone the response for what? So we can update the cache.
>> Maximiliano Firtman: So this is kind of mixing both strategies at the same time. It's cache first, but also we go and fetch from the network at the same time.

[00:02:30]
Look at this. We have two and two. So at the same time, we search in the cache and also we fetch from the network all the time. But if it's in the cache, we use the version from the cache, but we also have an end word request, for what?

[00:02:45]
For updating the cache, for next load. So if you change the CSS, now, we're getting into Christmas. So we wanna put some bells on your logo. So you change your logo PNG, and actually when the user is loading the page, it will get the logo without the Christmas bells.

[00:03:05]
But in the background, the service worker is going to the logo of the server and downloading the logo PNG anyway and updating the cache. So next time you open the app, the logo with Christmas bells will be there. Okay, that's the idea. Again, you can create your own strategy.

[00:03:24]
And if you feel that this is too low level for what you are expecting, you can use a framework. And the framework for service workers that everyone is using, it was created by the Chrome team, is called Workbox. So, Workbox JS, it's a JavaScript library for progressive web apps.

[00:03:47]
It's actually a set of libraries. It's not just one library, it's a collection of libraries. And one of the libraries has to do with strategies, precaching, and then, you don't need to write the service worker yourself. You can use a higher level API that will help you, okay?

[00:04:12]
>> Student 1: So are we always lagged by one version compared to the network?
>> Maximiliano Firtman: With a state while revalidate, yes. Is there any way to update once you get the new version to do something? Well, actually, first, you need to know if there is a new version or not.

[00:04:29]
So the HTTP protocol doesn't have a way, or a simple way to know that. But also, if you already served one logo, they're always on the screen. So you could send messages from the service worker, you can send a message to the page, hey page, there is a new logo.

[00:04:47]
So then the page can request a new logo, but then the user will see some flashes on the page. So the logo is changing, the CSS is changing on the fly, it's kind of weird. So that's why typically when you are doing this, you are always one version, and there are patterns to detect that with JavaScript.

[00:05:05]
And you can even show a user a message saying, hey, there is a new version of the app. Do you wanna load it now? So instead of your app waiting for the next load, you could ask the user. So there are a lot of advanced techniques to get more information about that.

[00:05:24]
And that leads to this slide that says, if you wanna get more details, including how to do this upgrade message, JavaScript in the Background course Frontend Masters is what you're looking for. There we go over service workers with more time, such as a workshop on that topic, and we see all the possibilities that you have with more details.

[00:05:53]
>> Student 2: I'm just wondering about a use case for, I guess, especially the cache first model, because it makes sense, that you would want fresh information, updated information, and you'd wanna show something, but you might not want the flash of weird information.
>> Maximiliano Firtman: Do you have experience using libraries such as React or Angular?

[00:06:17]
Well, what happens with the assets that those libraries are generating? Do you remember the final name of your JavaScript? What's the final name of your JavaScript file, do you remember?
>> Student 2: J sir?
>> Maximiliano Firtman: No, the main Js or bundle Js, things like that. And CPL is not just main js or bundle js, it's bundle dash or dot, number, hash, .js, sure if you remember that.

[00:06:45]
So when you have that, if you change your JavaScript code, it will change the URL. So it's actually a different asset from a URL point of view. So, cache-first strategy means, I don't care about updating this URL because it will never be updated. It's actually an immutable URL.

[00:07:11]
So there are cases where your assets are immutable. You say, maybe I wanna change the CSS. But when you do that, it's gonna be a different CSS. Not that one. Maybe you can see what happens, then we are collecting CSS forever. Well, then we can talk about the storage permissions and storage quotas, but you can clean up things, but that's one case.

[00:07:35]
And also remember, you don't need to apply the same technique to all the resources. You can also say, okay, you know what? For the image folder, I'm going to use this strategy. For the other folder, I'm going to use another strategy.
>> Student 2: Okay, that's helpful.
>> Maximiliano Firtman: Okay, so then you can decide what are you going to do, that you are in charge.

[00:07:54]
You have complete control of request answer. You are kind of writing your own web server here.
>> Student 2: And if you are using a cache-first strategy for some things like logos or images that will probably be there for a long time, but then you update them.
>> Maximiliano Firtman: You can always send some kind of a signal from the server at some points, you can have a JSON file, for example, that's another strategy, use cache first.

[00:08:22]
But then, on every page load, you go and grab a manifest of JSON, not the manifest of JSON we have here, like assets manifest of JSON. You download that file and that file server side will have some flags saying, hey, update everything, or we have a new version of everything, or we have a new version of the logo.

[00:08:41]
So your service worker can say, okay, let's go grab the new version and update the version in the cache. So you can add your own logic. You need some kind of a protocol with your server that you need to create. Actually, if you're using a React or Angular or View on created PWAs with them, they create a service worker for you, and that service worker has some kind of that solution.

[00:09:05]
So every time you make a new bill, it creates an assets manifest with a hash, and the service worker will download that asset manifest and will check with. Okay, let's see our storage, do we have that logo? Yeah, we have that version. Okay let's see CSS, there is a new one, okay?

[00:09:22]
Let's go and download a new one. So that logic is already implemented on those service workers, and you can do that also with workbox JS, you can implement in that. So you can see it's a huge topic by itself.