82

Most of the browsers provide localStorage with the storage limit of 5MB per domain. Are there such memory limits/constraints with respect to service workers?

I know that web workers (on which service workers are based) don't have such limitations. But Web Workers are not exactly used for assets caching, instead they're used more for processing (so CPU is the main concern there).

If there's no limit on the memory size, could a badly designed website crash the browser?

Zaz
  • 46,476
  • 14
  • 84
  • 101
Nachiketha
  • 21,705
  • 3
  • 24
  • 32
  • Possible duplicate of [Maximum running web worker html5 at the same](http://stackoverflow.com/questions/11049797/maximum-running-web-worker-html5-at-the-same) – Eugene Hauptmann Feb 06 '16 at 15:42
  • So, are we just hoping that all the websites who implement service workers don't over use the cache? This problem isn't there with respect to web workers since they are not intended to asset caching. – Nachiketha Feb 06 '16 at 17:03
  • 1
    I would say it's a limit of the sandbox which specifies the amount of memory and CPU+IO resources available for each page at the time. And workers would share those resources across the sandbox. – Eugene Hauptmann Feb 06 '16 at 17:09
  • 1
    Storage space is different for different browser but most likely follows some generic rules like in here: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria – magiccrafter Jul 01 '16 at 15:56
  • 1
    I wrote a blog post about this a few weeks ago. I get asked this question all the time FWIW. https://love2dev.com/blog/what-is-the-service-worker-cache-storage-limit/ The answer is it varies, but is more or less dependent on how much free space the device has. There is nothing in the Cache API specification to control the quota. And now most browsers do allocate per origin across all the storage APIs. – Chris Love Nov 29 '17 at 20:02

5 Answers5

81

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.

Jed Fox
  • 2,979
  • 5
  • 28
  • 38
Nachiketha
  • 21,705
  • 3
  • 24
  • 32
  • 2
    Sharing storage space between APIs may only be true in Chrome and Opera. Check out the common questions section of Addy Osmani's post: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.8acehngnq – David Oct 13 '16 at 23:05
  • 1
    @DavidScales thanks for pointing out. Just updated the answer with article references. – Nachiketha Oct 14 '16 at 08:19
  • 1
    N.B. [storageQuota](https://developer.mozilla.org/en-US/docs/Web/API/StorageQuota) is only implemented for Chrome v55+ and Opera 42+ (which is basically Chrome anyway) – icc97 Mar 15 '17 at 15:46
  • @icc97 Correct. Quota Management API is still in draft status. Updated with link. Thanks – Nachiketha Mar 16 '17 at 16:45
8

There's no explicit limit. All modern browsers are multi-process or similar, so a badly-designed page (or SW) won't do anything worse than crash itself.

Note that the SW spec is very explicit about the browser being able to kill and restart the SW at any time, for any reason. (If DevTools is open on a page, Chrome purposely kills SWs for the page constantly, to encourage you to adopt good practices.)

Xanthir
  • 18,065
  • 2
  • 31
  • 32
1

On latests browser you can use StorageManager which is an implementation of a new standard for browser storage, take a look at this mozilla article.

let _storageStats = await navigator.storage.estimate();
console.log(_storageStats);
/*
  Will prompt something like this
  {quota: 15946471833, usage: 682}
  Which is a representation of quota/usage in bytes
  As you can see I get an insane quota of almost 16 GB
*/
Miguel Lattuada
  • 5,327
  • 4
  • 31
  • 44
1

More info about navigator.storage.estimate() and navigator.webkitTemporaryStorage.queryUsageAndQuota() is here https://developers.google.com/web/updates/2017/08/estimating-available-storage-space

Testing page is here https://thimbleprojects.org/startpolymer/361372/

Josef Ježek
  • 2,208
  • 2
  • 17
  • 10
-1

I'm not 100% certain, but I think you're limited entirely by what's available on the client machine. As in, there is no fixed upper limit

If someone was running a beast of a machine and the browser was the only active application, then you'd most likely have plenty of storage available

However, if it was an old limited machine that's barely chugging along; you'd have very little

It depends entirely on what you're trying to do really. You should only really be using service workers to store things vital to your page/application working

Ryuu
  • 596
  • 1
  • 5
  • 26