Check out a free preview of the full Web Storage APIs course

The "Persistent Storage Request" Lesson is part of the full, Web Storage APIs course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano demonstrates using an API to request permission or check the status of persistent storage in a browser. Firefox will ask the user and Chromium will grant or deny based on engagement with that origin among other criteria.

Preview
Close

Transcript from the "Persistent Storage Request" Lesson

[00:00:00]
>> How can I work with persistent storage? Well, we can use an API. We should use an API. The API is actually pretty simple, it's navigator.storage.persist. It will return as a promise, and it will give us a hint saying if it was granted or not. This API is today working in Chrome, in Firefox, and recently also in Safari.

[00:00:34]
So even if the user is not installing your PWA, you can request persistent storage. Firefox is the only browser that will ask the user, we will see that in action in a minute. So the user will see a dialogue saying, hey, do you want persistent storage for this website?

[00:00:54]
Chrome or Chromium will grant or deny persistent storage based on a criteria that changes with time, that has to do with engagement with that origin, and many other rules. For example, if the user has installed a PWA, typically it will grant you persistent if you ask. If the user has subscribed to web push notifications, it will grant you persistent.

[00:01:22]
Because hey, if the push message arrives, there should be a service worker to attend that message. So we don't want that service worker to be evicted, okay? But if you don't request persistent storage, okay, if you don't request explicitly, it's best effort by default. Okay, makes sense? Also, you can ask, will persist, look at the last ed, and that will not request persistent, will check if it is granted or not.

[00:02:02]
So let's get out of here for a second and let's open a browser. For example, let's start with Firefox. So here in the console, I can try, okay, and say navigator.storage.persist or persisted. Persisted will give me a promise, and it will tell me if it's currently persisted and I can wait for it, okay, and now it's false.

[00:02:32]
Well, I'm here in Firefox, so for example, if I wanna see if I do have persistent storage or I'm not. So if I wanna request permission for store the data persistently, I'm going to say, navigator.storage.persist, and that will open a dialog, asking the user allow google.com to store data in persistent storage.

[00:02:59]
So in this case, the user is in charge. This is the only browser doing this, okay? If I say Allow, now it's true so now if I ask again, I'm persisted. What about Chrome? So back in Chrome, if I try google.com, for example, I open my inspector and I try await navigator.storage.persistent, it's false.

[00:03:35]
And if I'm asking, I'm requesting persistent storage, it give me an immediate true, but not for every website, it's google.com that, yeah, well, it's google.com, it's Chrome, Google, right? Anyway, it's supposed to be based on your engagement with that origin. If it says false, there is nothing you can do about that, okay?

[00:04:00]
So if the browser is denying you persistent storage, I mean, you can try to ask again next time, and that's what you typically do when the page loads your requests persistent storage. Remember, what's the advantage here that if we are granted persistent storage, my storage won't be a bit on storage pressure or after end days of inactivity.

[00:04:26]
Make sense? So only if the user goes explicitly to clear the data.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now