Storage Estimate Practice

[00:00:00]
>> So, so far we've seen the persistent storage API that is actually inside navigator.storage. That navigator.storage object is known or is part of an spec in the W3C known as the StorageManager API. And persistent is just one part of it. The other part of it is about storage estimation.

[00:00:27]
So, on some browsers, Chromium-based and Firefox, so not WebKit at this time, you can actually ask for, on the same object, an estimation of the quota. And that will give you an object, in this case, q, that will give you the total quota and the current usage. And of course, typically you check if that API is available.

[00:00:52]
It's important to understand this is an estimation, while it's not really the number. Because there are many situations that browsers are actually sometimes faking the real data to avoid fingerprinting. So mostly when you are saving cross domain resources on cache storage, we'll talk about that later, trouble with fingerprinting actually they are faking the data.

[00:01:18]
So maybe the file is 100k but it says that it's using seven megabytes. So that's actually pretty common. So that's why it's an estimation, okay? And you can use this estimation to know, for example, how much quota you have left. In this case, make some decisions such as start clearing some data that you don't need right now so then you can replace that with data that you actually need, okay?

[00:01:42]
That's kind of the idea. So they will never give you exact data, have that in mind. That's why it's called estimate, okay? And remember that everything is promise-based, so that's why we have to use an async function. So back in our code, for example, we can try the estimation API.

[00:02:04]
So I'm going to add another async function like the persistent storage function. So I'm also going to add an async, the anonymous function. If you want, you can name that function just for debugging purposes, and you immediately execute that function. That's how you can quickly use a way that the top level before top level await is possible in all the browsers.

[00:02:33]
So, for example, here I can take that object from navigators. I'm going to await because it's a promise, navigator.storage.estimate. And the estimate is actually not Something that you use on every situation, okay? So you wanna use this only when you store a lot of data. I mean, 99% of the web apps out there, you won't need this because you have enough quota, right, and you're not going to store so much data.

[00:03:12]
So I'm going to call estimate. And for example here, we can just show some data to the console. So we can see what are available is from that q.quota. This is in bytes. So it's measured in bytes. So if you want them in kilobytes, okay, I should divide this by which number [INAUDIBLE] kilobytes, 1000?

[00:03:35]
>> [INAUDIBLE]
>> That's a nice question.
>> I'm not going to get into that discussion right now. But yeah, if it's kilobytes, it will be 1000, ask Google. And if it's kb bytes, okay, it's essentially four. Anyway, you use whatever you want, okay? So if you want megabytes, I'm sorry, so this is mevybytes, that's, I mean, the word we use.

[00:04:04]
Anyway, that's the available. And maybe the one that we used, there's not so much that we can use kilobytes or something like that. So I'm going to take q.usage/1024 in KiB bytes, okay, or kilobytes, it's up to you. And I should check if the API is available. For example, this API is not right now on WebKit.

[00:04:32]
So we have persistent storage, but we don't have this one, okay, estimation? So I should check if navigator.storage exist and also navigator.storage.estimate exist. So if that's the case, Then I will do this. Need to close the function And do something like that. So we're going to see this in the console right now just to see if that works.

[00:05:19]
So I'm going back to my browser, to Coffee Masters, I'm going to refresh. So opening the same PWA but in Chrome, we can see that right now my quota available is a lot of megabytes [LAUGH] and no quota used, which is okay, expectable, because we haven't used anything yet, okay?

[00:05:47]
But that's how you read that. And this is actually available on some browsers only.