We implemented our service worker to pre-cache the application shell. But of course, we want to dynamically build the URLs that we pre-cache. So, let's focus on that. Now, our primary objective is to essentially read the Vite manifest. So, we're going to have the path here. And that exists inside of the public folder. And we want build-manifest.json. And if we take a look at that file, you know, here it is right here. Let's leave it open just so that we can refer to it. I mean, really, the only thing that we care about in this particular case is the file property.

Let's leave it open just so that we can refer to it. I mean, really, the only thing that we care about in this particular case is the file property. Both for app.css and app.js. So, we want that value from the file property. So, we want to, first of all, get that manifest file. But, you know, really, we should check to see if it exists. So, let's do this. We'll have manifest. And we will check if the file exists. We'll pass in the manifest path.

And we will check if the file exists. We'll pass in the manifest path. And if it does, then we want to JSON decode file and then get that manifest path. That way, we have an array. And really, we should pass true here so that we get an associative array. But if it doesn't exist, then we want just an empty array. We want something to work with. And an empty array is going to work fine. Let's go ahead and let's pull in the file facade so that we have that. And then we are also going to need to output JSON.

Let's go ahead and let's pull in the file facade so that we have that. And then we are also going to need to output JSON. And we're going to need to do this a couple of different times. So, I want a variable called JSON flags. Because I want to output using JSON unencoded slashes and JSON unencoded or rather unescaped Unicode. The word code was somewhere in there. So, these are the JSON flags that we are going to use anytime that we output JSON. And then from there, we just need to essentially pluck out the file. So, we'll have Vite files.

And then from there, we just need to essentially pluck out the file. So, we'll have Vite files. We'll turn this into a collection. We'll pass in manifest. And as I said, we want to pluck the file property. Let's go ahead and let's call filter. We don't necessarily actually need to call filter in this particular case. But it's good for us to do that just in case to protect ourselves from some issues. So, we're going to leave that as filter. And then we essentially want to take each value from the file property and build a URL.

So, we're going to leave that as filter. And then we essentially want to take each value from the file property and build a URL. So, we will map the file value. So, that we will have slash build. And then we will concatenate that with file and then a slash. And I think that that's going to be okay. I don't think we need to, you know, trim or anything like that. Because the great thing about these manifest files is, you know, it's generated by a machine. So, it should be pretty consistent. We shouldn't have to worry about trimming or anything like that.

So, it should be pretty consistent. We shouldn't have to worry about trimming or anything like that. So, we are going to take build. We will concatenate the file and then a trailing slash. And that will be our list of Vite files. So, that then we will have, you know, our shell that we currently have. We want the roots, offline, the icons. And then, you know, we have these development resources. And we won't need these all of the time. In fact, the only time that we will need them is if we are in development mode.

And we won't need these all of the time. In fact, the only time that we will need them is if we are in development mode. In which case, we can do this. If we are in the local environment, then we want to essentially add those resources. So, we'll paste those here. Change some of the syntax. So, that we'll have shell equals. Okay. So, if we are in dev mode, we add those resources to our shell list. And then, we essentially want to merge these together.

So, if we are in dev mode, we add those resources to our shell list. And then, we essentially want to merge these together. Both the Vite files and our shell. So, we'll say URLs. And we're going to create a collection with our shell array. And we will merge it with our Vite files. However, there might be, you know, some duplicates there. So, let's call it unique. And we want the values. Let's put this on multiple lines.

And we want the values. Let's put this on multiple lines. Just so that it's a little bit easier to read. So, these are the URLs that we want to work with. These are essentially what we are going to provide to the response here. Instead of shell, we're going to have URLs. And, you know, we have those JSON flags now. So, we're going to output the JSON flags. However, we do need some kind of versioning. And really, that version should be based upon the URLs.

However, we do need some kind of versioning. And really, that version should be based upon the URLs. Because if the URLs change, then we want to update the version. So, let's do this. Let's create what we're going to call the version source. To where? We will take the manifest. And we want JSON flags here. And we will concatenate that with the JSON version of our URLs. Once again, using our JSON flags.

And we will concatenate that with the JSON version of our URLs. Once again, using our JSON flags. This is going to give us a somewhat unique value. So that we can essentially build a hash around this. And we can use that hash as our version. So, we're going to create an etag. We will call shaw1 and pass in our version source. So, this etag is what we are also going to supply with our response here. In fact, we can just go ahead and we can call etag or set etag with that value. Now, if you're not familiar with an etag,

In fact, we can just go ahead and we can call etag or set etag with that value. Now, if you're not familiar with an etag, you can think of it kind of like a fingerprint for a given response. This way, the browser can make a special kind of request to the server. And if the etag hasn't changed, then everything's fine. The browser assumes that the response hasn't changed. For something like this, it's a good thing to set an etag here. But the etag is a little bit long for a particular version. So, let's just take a substring. And that's not going to work.

So, let's just take a substring. And that's not going to work. We want to call substring. Passing in our etag. And let's just make this eight characters. That should be sufficient enough for different versions. So, that's going to be our version so that we can supply that with our JSON response. And yeah, we return the response and everything should be okay there. So, we are dynamically building our list of URLs based upon our manifest. I don't see any errors or at least any errors that jump out at me.

So, we are dynamically building our list of URLs based upon our manifest. I don't see any errors or at least any errors that jump out at me. So, I think we're going to be okay. But I, of course, want to test this out as if we were in production, really. So, let's open up the .env file so that we can change our environment to production. I also want to kill the Vite development server. And let's fire up a new private browser session. So, tim at example.com. And then the password is password. Okay, nothing broke, thankfully.

And then the password is password. Okay, nothing broke, thankfully. But let's do this. Let's first of all check to see what we are getting with that pre-cache manifest.json file. So, we can see that we actually have a version here. And our URLs are based upon that static list that we typed in. But we also have our assets from the Vite manifest. So, that looks promising. Let's pull up the developer tools. Let's take a look at the application tab.

Let's pull up the developer tools. Let's take a look at the application tab. Let's refresh here. And we can see that, well, there's an error. So, let's see. We have a fail to execute add all on cache. And the request failed. Okay. I wonder what failed. If we are failing by adding something to the cache,

I wonder what failed. If we are failing by adding something to the cache, then that could be that there's an issue with CSS. And sure enough, I can see it right there. We have this trailing slash here, which makes sense. Because I put a trailing slash, didn't I? And wasn't thinking. All right. So, we want to take build and then file. Dirt.

So, we want to take build and then file. Dirt. Okay. So, we can go back to the browser. Let's refresh it. And I should have noticed that right there. But if we refresh this, then our URLs are correct. Which means that we should be able to come back to application. Let's unregister this. I always like to do a hard refresh.

Let's unregister this. I always like to do a hard refresh. And okay. So, we don't have any errors now. That's good. If we take a look at our cache storage. We can see that we have our meta pre-cache. Then we can see that we have an app shell. Now, notice that the version is different than it was before. I don't know if you paid attention.

Now, notice that the version is different than it was before. I don't know if you paid attention. But it's different. Because we have a different set of URLs. By removing those slashes, it changed the version there. But if we take a look at what we are actually caching. Well, we can see that we have, you know, those items being cached. And everything looks like that it's working okay. So, we should be able to go offline. And we should be able to go to any one of these URLs.

So, we should be able to go offline. And we should be able to go to any one of these URLs. And we see that we are offline. So, that is perfect. If we are back online, then of course, those links are going to work. And everything is fine. We are now dynamically building our pre-cache URLs. But of course, this is just for production. Which we could argue is the most important thing. But what about development?

Which we could argue is the most important thing. But what about development? Because we want to make our lives as developers as easy as possible. So, let's go back to our code. Let's go to our environment. Let's put it back to local. And that is, of course, going to change our manifest. Which, let's go ahead and let's take a look. So, the version is 9.8b. Just remember that.

So, the version is 9.8b. Just remember that. If we refresh this, then we can see that the version changes. Because our list of URLs changed. And notice that we have more URLs here. So, that's all well and good. Let's do this. Let's go to our application. Let's unregister that worker. I don't think we have anything else registered.

Let's unregister that worker. I don't think we have anything else registered. We don't. Let's do a hard refresh. And it looks like everything works okay. We can go back to our meter list. And we can navigate around like we normally could. But let's go offline. And if we attempt to view this, well, it looks like everything is okay. Except, you know, we have cached certain things.

And if we attempt to view this, well, it looks like everything is okay. Except, you know, we have cached certain things. If we go back and look at the cache. Now, notice that our cache list hasn't updated. If we refresh the caches, it still doesn't look like that it is updated. And this is a quirk with developer tools. I don't like it, unfortunately. Well, it's not unfortunate that I don't like it. I don't like it because, unfortunately, especially when it comes to the cache storage, what we actually see here isn't really a good representation of the cache.

I don't like it because, unfortunately, especially when it comes to the cache storage, what we actually see here isn't really a good representation of the cache. Because we should have a different cache now, shouldn't we? So let's close this so that we can open up a new browser session. And let's sign in. Let's open up the developer tools so that we can sign in as tim at example.com with our password. If we take a look at the application, well, we are still offline. That's unfortunate. So let's do a hard refresh. And we can see that we are trying to install.

So let's do a hard refresh. And we can see that we are trying to install. We ran into an error. If we take a look at what that error is, once again, failed to fetch. So let's take a look at the network tab. And what do we have here? So app CSS failed to fetch and app JS failed to fetch. That's why. Okay, so back inside of the browser. Let us, what do we want to do?

Okay, so back inside of the browser. Let us, what do we want to do? Let's unregister. Let's clear out any errors. Let's unregister everything so that we can hard refresh. Okay, we have our service worker. We don't have any errors. If we take a look at the cache storage, we have a new version here. And if we look at the list of caches, the list of caches, the list of files that are inside of the cache,

And if we look at the list of caches, the list of caches, the list of files that are inside of the cache, we are still caching our assets from the Vite manifest, which is fine. In development, those aren't really used. What is used are the resources here. But let's look at this. We refresh here. Let's go offline. And when we go offline and navigate to another page, we see the offline page, but it doesn't look anything like it should.

And when we go offline and navigate to another page, we see the offline page, but it doesn't look anything like it should. The CSS isn't loading. Now we can take a look at the network tab and we can see, of course, it's not loading. But there are some issues here. And it's not really apparent as to what those issues are. So in the next episode, we are going to investigate this particular problem. Because while it's not breaking our application, because yes, this is happening really only in the local environment as we are in developer mode, but it's still something that we want to fix.

this is happening really only in the local environment as we are in developer mode, but it's still something that we want to fix.