Requesting Persistence Practice

[00:00:00]
>> So something that we can do now, for example, is we can open up JS. That's like an entry point, okay? And now we are going to get into, if you would like to follow along with the instructions from the website, we will be now in Storage Manager, Requesting Persistence, okay?

[00:00:23]
So we're gonna I'm going to write something like this code now here, but I'm going to write it from scratch so I will explain what I'm doing here from scratch. So I'm going to request persistence. Storage. Okay. That's kind of the idea. So persistent distortion. That was actually break Simple, Okay, was navigator.storage.persistence.

[00:00:53]
The problem is that we have a couple of problems. Okay, I will do some kind of refactor to that code. So the problem is that first this is returning a promise. So if I want to get the return the Return Value to see if it worked or not, I can use then.

[00:01:08]
Or I can await for this, okay? Make sense? So I can await for the result of that operation. The problem is that this is a top-level await. It's not gonna work on every browser. So if you want to be compatible with everything top level, doesn't work everywhere. I'm not sure if you know that it will work in some situations on some browsers.

[00:01:37]
So I need, what do I need if I'm using a weight? An async function. So something quick that we can do is we can create an anonymous function. I will convert this to an async function. Now, what I can do with this function is to immediately execute the function.

[00:02:00]
So I can wrap this in parentheses and execute the function. Okay, I'm not sure if you like that, but that works, okay? So that's a simple way to get over get rid of the limitation of the top level await. So, Now I can just check I can do a console log, something like saying the persistence request, return, and I can use the resulting just a Boolean.

[00:02:30]
So it's actually pretty simple. Okay? In this case, I'm requesting persistence always On every page load. If I wanna be more performance here, I mean, it's not gonna be a big deal, but I could check. If it's already granted maybe I don't need to request again. Make sense?

[00:02:53]
So could also check if navigator.storage.persistent. This is a function, not a property, be careful. So, parentheses because it's a function, we need to execute the function and then we're going to await for the value. So, this is going to be me true. So I can say if not persisted, okay, I will execute this.

[00:03:24]
And to finish this we should check if the API is available because maybe there are still some browsers out there where this API is not available. So you should check it. There are many ways to check API compatibility. But if the storage object in the Navigator exists, and navigator.storage.persist exist, okay?

[00:03:47]
And that's kind of like a proper final code for requesting persistent storage. Do you need to do it in every web app? No, just on the web app where you feel like requesting persistent storage will make a difference. Okay? But if it's granted, then you have a better opportunity for your data to be there in the future in the next session.

[00:04:21]
We have any question? We can try this,so I will open in my browser My web app. Let's open the console. And despite the errors they have there that has to do with applying persistent requests return true. local host typically give you a true always. Okay. If I try this on Firefox Localhost 3000.

[00:04:51]
It's asking me it's asking the user yes or no. So have in mind that from a US perspective, okay, that's on Firefox. That will appear immediately. So that another idea will be that if it's in Firefox, maybe you can wait to a moment where it will make sense for the user to allow you that, okay?

[00:05:18]
It's up to you and now that is persisted everything that we will do from now on that will be more workshop mode from this part of the workshop. Will actually be stored client-side and is not going to be deleted by storage pressure.
>> Someone in the chat said that they got false and asked why that might happen in Chrome.

[00:05:41]
>> If you have false, check if you're using localhost or your IP address. If you're using your IP address instead of the local host word, that might be one case. And can you do anything with a false? Nope. The only thing you can do is try again next time, until Chrome will say OK, now I will grant you persistent.

[00:06:05]
Storage, but you get a false, there is nothing you can do about that. So, more than trying again next time, okay? Because the heuristics about that are private to the browser. So the browser says, No, I don't trust you yet, so I'm not going to give you Persistent storage.