bfcache

[00:00:00]
>> There is also a cache that has been with Safari and Firefox for a while, and it has just arrived into Chrome a few versions ago. It's called bfcache or back/forward cache. In this case, it's not about resources. It's about saving your page navigation in memory. So you are in frontendmasters.com, you have a session, you have a loaded, you have done a lot of stuff, and then you go to google.com, okay?

[00:00:28]
What happens when you go back, we press the back key to Frontend Masters? Normally, it was loaded again like a new navigation. With bfcache, no, it will just defreeze that page from memory. And of course, the performance of that is a lot better. When you go back and forward, then you don't need to reload the pages, okay?

[00:00:56]
In this case, it's automatic. So it's not an API, it's not something that we have to do. But there are some things that you can be doing in your website that can disable bfcache for you. For example, unload events or a kind of cache known as no-store. So you can say to the browser no-store, I don't want you to store the data.

[00:01:18]
If you say that, the browser will disable bfcache for your site. How do you know if that works or not? Using Chrome DevTools, you can go to Application, the Application tab, and within the Application tab, you will find, where is it? They changed it? No, here it is.

[00:01:42]
Within Background Services, Back/forward cache. So here, because it's local host, it's not giving you by default any information, but you can test it. So it says that it worked. So you're not using any weird tricks or things that will disable bfcache for your real user. So you can go to your website, make that test.

[00:02:06]
And if there is a problem, you will see a red with a list of problems that you should change in your code if you wanna enable bfcache for your websites. Does that make sense? So we're not in control of that. The only thing that we have is the ability to not use some APIs so the browser will increase the opportunity for enabling bfcache.

[00:02:26]
>> Does adding query parameters after a filename make a difference?
>> That's a good question. So the cache that we were seeing here, we were talking about here, we didn't see here how the database or the data storage works internally. But what's the key of that storage? Well, one key is the URL, but not the whole URL.

[00:02:53]
There are keys to the method if it's get or post. But let's simplify this only on get requests. Is the URL without the hash. So, what's the hash? So the URL has a protocol, has a host, the origin. It has a path, it can contain a query string and a hash.

[00:03:16]
Well, the hash is what goes after the pound symbol or the hash, that's not part of the key. But I think the question was that part is part of it. So if you have mydomain.com/css, and then query string 1 and query string 2, even if in the server it's the same file, from a browser's perspective, we are talking about two different assets.

[00:03:46]
Does it make sense? Because it's two different URLs, even if server-side is different. And we were using this technique actually a few years ago when we wanna change a file. So it's actually a hack. If you set the expiration date of your assets for 60 years in the future, but then tomorrow, you have to change your CSS.

[00:04:10]
So how can you force an update? Well, we go to your HTML and you add a timestamp or a version number, something like this here. And your users will see a new CSS file, not the previous one, because it's a different URL. Does it make sense? So, what goes after the question mark is actually part of the URL, and it will create unique URLs, Okay?

[00:04:38]
Cool, well, so how do you know if the user is going out or in the bfcache? Well, you have a Page Navigation API. And with that API, you can know when the user is getting out of your app, and you can open and restore connections, such as if you have a web socket.

[00:05:00]
Maybe you wanna close that web socket when the user is going out of your page. And if the user is going back, because it's being restored now, you need to reconnect to that web socket. If you wanna get deeper on that, check the other workshop on Frontend Masters that I also did on JavaScript in the background.

[00:05:21]
I will explain and do some examples on Page Navigation APIs on that workshop.