What is the storage limit for a service worker?

Service Worker 本身并不提供存储功能，但它常常与浏览器中的缓存 API 配合使用，来缓存应用资源。Service Worker 的缓存容量并不是由 Service Worker API 本身强制规定的，而是取决于浏览器的实现和用户设备的可用空间。

每个浏览器可能有不同的存储限制政策，并且这些政策可能会随着时间而改变。大多数现代浏览器都采用启发式方法动态管理每个原始站点（origin）的存储限额。通常，浏览器允许单个原始站点使用的存储量在几十到几百兆字节之间，这取决于用户设备上的总可用空间。

例如，Chrome 浏览器为所有网站的存储限制提供了一个动态配额，它通常是基于每个原始站点可用磁盘空间的一部分。这一部分可能在总磁盘空间的2-5%之间，但这个数字是不固定的，并且可能会根据不同的设备和用户的存储使用情况而变化。

为了给您一个实际的例子，假设用户设备上的可用空间为100GB，Chrome可能会为一个原始站点分配2GB作为最大存储限额。但请记住，这个限额是动态计算的，用户的存储使用情况和浏览器的策略会影响这个值。

总的来说，Service Worker 的缓存大小限制并不是固定不变的，它受多种因素影响，包括浏览器实现、设备存储容量、其他网站的存储使用情况等。开发者可以通过浏览器的配额管理 API 来检查可用存储量，并相应地管理缓存策略。

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:

shell
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.');
}

Run code snippetHide results

Expand snippet

For more info, refer the following 2 great articles:

• MDN Web docs - Storage API
• Google Developers: Estimating Available Storage Space

---

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:

shell
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.

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:

shell
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.');
}

Run code snippetHide results

Expand snippet

For more info, refer the following 2 great articles:

• MDN Web docs - Storage API
• Google Developers: Estimating Available Storage Space

---

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:

shell
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.

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.)

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.)

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.

shell
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
*/

Run code snippetHide results

Expand snippet

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/

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/