00:00 All right, so we've got a new problem and that is what if we decide, you know what, I don't want it to be this purple color, I want it to be red. We're just going to hard code it as red. And so now I'm going to refresh and the favicon isn't updated. I refresh over and over and over again, it's not being updated. And this is because of a cache. You'll see right here in our favicon

00:19 request, we have this disk cache is what it's showing under the size. That's because it's not actually asking our server for the updated file for our favicon. That's kind of annoying. If we look at our favicon.svg request right here, we'll see these general headers and things. And here we

00:39 see that it's from the disk cache. If we look at our response headers, we'll see the cache control header right here. It says public max age 3600. That's 3600 seconds. That's an hour. So we'll have to wait an hour, I guess before our users get our new favicon, which is a shame, and certainly not

00:55 something that our product manager is going to be happy with. So what we could do instead is maybe we come over here to our root, and we'll say favicon.svg. This is basically the key for our

01:07 cache. So the the URL for resource is how the browser stores that cache value. So if I just say add a query string, something that doesn't matter, this is version one or version two, it actually doesn't matter. So long as we just change the the URL, and that's going to change the cache value.

01:26 And the query string doesn't actually have any bearing on that file being served by our server. So if I save that, and then come over here and refresh, now we're going to get what we are expecting. And so that's good. If I decide, you know what, I want it to be green now. And I save

01:42 that. And then I come over here and say version three, and we're going to get HMR reloading this. And so here we get this favicon.svg version three. And now we're getting the cached version for this. But because we're changing the URL, we're getting the latest version. Now, that stinks. I hate that

02:00 a lot. And I would really like it very much if we could just automatically change that that version, string or something, change that URL in some way. So just having that happen

02:15 automatically whenever I change the file, so I don't have to remember to do this. On top of that, our current configuration for adding cache headers to our static assets has a couple of levels here.

02:32 So here we have the build directory that's under our public directory. So if I scooch this over, and we take a look, we have public and then build. So all of these files will be cached as immutable assets for one year. That sounds pretty good. The browser doesn't have to hit

02:51 our server, our server doesn't have to serve that asset. And the reason that we can reasonably do that is because everything that goes into this directory is going to get this special text that represents a hash of the contents of the file. So anytime the file contents change,

03:09 that text string is going to change as well. And so yeah, that would be really nice to just have that automatically happen for our favicon as well. And that's the reason that we can say immutable true and max age of one year. We also aggressively cache our fonts, which we'll get to

03:27 in a little bit. And we can do that because we really don't change our fonts very often. And if we ever do, we'll probably change the file name for those anyway. But then for everything else, we don't really have any guarantees. There's no convention, there's no fingerprinting like is happening here. And so the best we can do is just say, well, it's not immutable, but

03:47 you can cache it for an hour and hopefully that's good enough. So what your task is, is to use some of the utilities that Remix offers for importing static assets so that we can automatically get fingerprinted versions of all of our files, specifically our favicon. And then we don't

04:05 have to worry about keeping things up to date as we go through making changes to our favicon. So that's your task. I think you'll do great. And we'll see you on the other side.