What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

Storage Quotas

There were several attempts made, mostly by Google Chrome, to allow Web applications to query the system for the size of the storage space currently used and available for the application. The most recent one, Quota Estimation API, includes also a way to request the stored data to be persisted by the browser that would otherwise be wiped out in case the system signalled memory pressure. The permission to request this persistent storage capability might be granted by the browser based on the heuristic (i.e. Google Chrome) or might require explicit user consent (i.e. Firefox).

The older implementation, supported only in Chrome with webkit- prefix, maintained a separation between the temporary and persistent storage and allowed the Web applications to request for more storage space, if needed.

API glimpse

navigator.storage.estimate()
Returns a Promise resolved with the storage space estimated values; see below.
estimate.usage
Returns the estimated size of the storage currently used by the application, in bytes.
estimate.quota
Returns the estimated total size of the storage available for the application, in bytes, including already used.
navigator.storage.persisted()
Returns a Promise resolved with a boolean informing whether the persistent storage permission was already requested and granted.
navigator.storage.persist()
Requests the persistent storage capability. Returns a Promise resolved with a boolean informing whether the persistent storage permission was granted (either via heuristic or user consent).

Live Demo

Estimated storage usage is unknown bytes.

Estimated storage quota is unknown bytes.

Estimated usage is unknown%.

Persistent storage status is unknown.

  • if ('storage' in navigator && 'estimate' in navigator.storage) {
      navigator.storage.estimate()
        .then(estimate => {
          document.getElementById('usage').innerHTML = estimate.usage;
          document.getElementById('quota').innerHTML = estimate.quota;
          document.getElementById('percent').innerHTML = (estimate.usage * 100 / estimate.quota).toFixed(0);
        });
    }
    
    if ('storage' in navigator && 'persisted' in navigator.storage) {
      navigator.storage.persisted()
        .then(persisted => {
          document.getElementById('persisted').innerHTML = persisted ? 'persisted' : 'not persisted';
        });
    }
    
    function requestPersistence() {
      if ('storage' in navigator && 'persist' in navigator.storage) {
        navigator.storage.persist()
          .then(persisted => {
            document.getElementById('persisted').innerHTML = persisted ? 'persisted' : 'not persisted';
          });
      }
    }
  • <p>Estimated storage usage is <b id="usage">unknown</b> bytes.</p>
    <p>Estimated storage quota is <b id="quota">unknown</b> bytes.</p>
    <p>Estimated usage is <b id="percent">unknown</b>%.</p>
    <p>Persistent storage status is <b id="persisted">unknown</b>.</p>
    <p><button onclick="requestPersistence()">Request persistent storage</button></p>

Resources

Get in touch