CODEWITHSUNDEEP
javascriptprogressive-web-appsmicrosoft-edgechromiumindexeddb
Alex
Alex

Reputation: 5227

investigating indexeddb storage in chromium browser and cleaning it from javascript

I am developing PWA app where storage usage (for offline data) is a crucial factor to success. After checking the storage information in debug tools I see that more than 1 gb(!!!) is consumed by the indexedDb!

enter image description here

I went to investigate further, and it seems like this storage is being shared between all localhost environments: https://localhost:4173/, https://localhost:3000/. Same consumption is reported by both sites.

I went ahead and clicked on "Clear site data" button, but only 1mb of data was cleared (there are literary no databases or caches or anything like that for both websites). I even restarted the browser

I also ran the filesystem analyzer and was able to determine that this is in fact these 2 addresses that consume the space. 522.9mb each

enter image description here

In PWA users are able to see the space consumption estimate through the navigator.storage API:

    if ("storage" in navigator && "estimate" in navigator.storage) {
        return navigator.storage.estimate();
      }

So when the space grows more than let's say 100mg and users want to clean-up some space - it should be possible to clear it from the UI of the app.. right not I can't even clear it manually using the browser tools. I view this as a huge problem to both the customer experience and technical implementation if this space can not be freed..

So my question is - what kind of data is in there and more importantly how do I clear it from the javascript? Because I have done the cleaning for both the 4173 and 3000 ports manually and nothing has changed..

Any advices or solutions are welcomed. I am using the "Ms Edge v100" chromium-based browser.

Upvotes: 0

Views: 519

Answers (1)

Ilijanovic
Ilijanovic

Reputation: 14904

Did you try?

let req = indexedDB.deleteDatabase(databaseName);
req.onsuccess = function () {
    console.log("Deleted database successfully");
};
req.onerror = function () {
    console.log("Couldn't delete database");
};
req.onblocked = function () {
    console.log("Couldn't delete database due to the operation being blocked");

Also you can manually delete it like this:

enter image description here

Upvotes: 1

Related Questions