What is the storage limit for a service worker?

by

Update Jan 15 2018

The StorageManager interface of Storage API is becoming a standard for all storage related api queries. As mentioned by @miguel-lattuada, the estimate API would provide an estimate of the storage used a web app the available storage. Also, note the QuotaExceededError exception which would help us in handling error scenarios.

eg code:

if ('storage' in navigator && 'estimate' in navigator.storage) {
  navigator.storage.estimate().then(({usage, quota}) => {
    console.log(`Using ${usage} out of ${quota} bytes.`);
  }).catch(error => {
    console.error('Loading storage estimate failed:');
    console.log(error.stack);
  });
} else {
  console.error('navigator.storage.estimate API unavailable.');
}

For more info, refer the following 2 great articles:

March 16 2017 (keeping it just for reference/history)

Recently I came across this article: offline-cookbook which states as below:

Your origin is given a certain amount of free space to do what it wants with. That free space is shared between all origin storage: LocalStorage, IndexedDB, Filesystem, and of course Caches.

The amount you get isn’t spec’d, it will differ depending on device and storage conditions. You can find out how much you’ve got via:

navigator.storageQuota.queryInfo("temporary").then(function(info) {
   console.log(info.quota);
   // Result: <quota in bytes>
   console.log(info.usage);
   // Result: <used data in bytes>
});

The above code might not work in all the browsers. (for eg: in chrome<48 one might have to look for webkitPersistentStorage etc)

Other useful info/resources

  1. As per Offline Storage for Progressive Web Apps by Addy Osmani

    In Chrome and Opera: Your storage is per origin (rather than per API). Both storage mechanisms will store data until the browser quota is reached. Apps can check how much quota they’re using with the Quota Management API (as described above).

    Firefox no limits, but will prompt after 50MB data stored

    Mobile Safari 50MB max

    Desktop Safari unlimited (prompts after 5MB)

    IE10+ maxes at 250MB and prompts at 10MB

  2. A more detailed guide on Working with quota on mobile browsers by Eiji Kitamura.

For now these are the most relevant articles/solutions found for my problem. If anyone knows some better article or specifications please share.

More Related Contents:

  1. Options for testing service workers via HTTP
  2. Can service workers cache POST requests?
  3. Service worker is caching files but fetch event is never fired
  4. Best practices for detecting offline state in a service worker
  5. Is it possible to make an in-app button that triggers the PWA “Add to Home Screen” install banner?
  6. What limitations apply to opaque responses?
  7. How can I remove a buggy service worker, or implement a “kill switch”?
  8. Understanding Service Worker scope
  9. How to clear cache of service worker?
  10. “Status Code:200 OK (from ServiceWorker)” in Chrome Network DevTools?
  11. What causes a Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode error?
  12. Firebase: change the location of the service worker
  13. How to alter the headers of a Request?
  14. Can’t find serviceWorker in navigator anymore
  15. Service Worker registration error: Unsupported MIME type (‘text/html’)
  16. Service Worker Registration Failed
  17. What can service workers do that web workers cannot?
  18. What does ‘:’ (colon) do in JavaScript?
  19. How do I correctly detect orientation change using Phonegap on iOS?
  20. Prevent Page Load on Jquery Form Submit with None Display Button
  21. Resolving require paths with webpack
  22. How to add/subtract dates with JavaScript?
  23. Restricting character length in a regular expression
  24. JS – get image width and height from the base64 code
  25. Best way to convert string to array of object in javascript?
  26. What does “./bin/www” do in Express 4.x?
  27. Generate random password string with requirements in javascript
  28. Rock, Paper, Scissors, Lizard, Spock in JavaScript
  29. What does the Array method `reduce` do?
  30. useMemo vs. useEffect + useState

Leave a Comment