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?
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:
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:
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
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
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.)
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
*/
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/
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
Related
i'm working on caching objects as JSON and i saw that indexedDB is a great place to do it but i'm wondering that if it has a size limit
is there any limit for indexedDB?
if it has,how can make it unlimited?
i'm using vanilla javascript
thanks a lot
As per the documentation, Chrome will reserve 1/3 of the disk for offline storage. This means if a disk is 99GB large, Chrome will reserve 33GB of storage for offline storage. I would imagine if the usable space is less than that that Chrome adjusts however much it claims to suit.
If an origin is not used often, in cases where the disk is running out of space, Chrome will delete an entire origins' offline storage. An origin can claim a maximum of 20% of the pool that Chrome has, meaning that on the aforementioned disk with 33GB of storage allocated to Chrome, you can only use 6.6GB of storage.
It's recommended though that you don't rely on having a lot of storage to play with. You should handle cases where Chrome denies you the ability to write offline storage, just like with any other app. Chrome will let you know when you attempt to write to offline storage, that you're out of storage.
This question already has answers here:
What is the storage limit for a service worker?
(5 answers)
Closed 6 years ago.
The size of Local Storage is limit to 5M, and is there any limit of Cache Storage when I used in Service Worker?
As of Aug 15 2016, Addy Osmani posted:
How much can you store? 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. 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. PouchDB track IDB storage behavior. Future facing:
For apps requiring more persistent storage, see the on-going work on
Durable Storage.
Where per origin means that API's like localStorage would be sharing storage space with API's like the service worker Cache.
The short answer is that it will be browser specific and as of now (August 30, 2016) most browsers haven't started support.
The long answer is that the Cache, provided for in the Service Workers spec is still a working draft. Check out w3 org service-worker spec for more info if interested:
https://www.w3.org/TR/service-workers/
The following, per Mozilla's documentation, lists browser compatibility with service workers as well as Cache API.
Web/API/Caches
https://developer.mozilla.org/en-US/docs/Web/API/Cache#Browser_compatibility
Service Worker API
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker#Browser_compatibility
As more browsers support these APIs, it will be easier to chart browser implementation to cache limitation to correctly address your question. I encourage others to improve this answer as developments occur.
For the time being Jake Archibald -- an editor of the service worker spec -- has provided the following site to help monitor and inform developers of readiness of service workers, including caches in various browsers:
Is Service Worker Ready?
Hope this helps
It depends on the end browser. Chrome allows you to ask for unlimited storage (limited by the users hard drive size online), by default it is 5 MB. Safari and Firefox both default to unlimited cache. Mobile devices are again different Chrome (Android) in the mobile defaults to unlimited while safari (iOS) limits to 10MB.
Source
I've got this JS application. All client side JS communicating with a third party stream server via web sockets. I have about 18 different web sockets open for one page. Firefox and Chrome handle this many open web sockets at once just fine. IE11 seems to have a limitation of 4 open web sockets at once. Once I open that 5th web socket, regardless of socket call to the third-party server, I get an error thrown by IE, which closes the socket and gives the general error "SecurityError" and expanding the proto section it gives me . Seems to be pretty generic errors from my searches. At first I thought there may be a trusted zone type issue with IE, but I've added the client site to my trusted zone as well as the server providing the data.
This post provides info on max number of websockets for Firefox & Chrome, but I don't see anything specific about IE. Are there any known limitations to IE and web sockets? Answered, see edit below.
This MDN site talks about increasing the max value, but again, I can't find anything about IE. Is there some IE setting to up the amount of open connections? Answered: see below edit.
EDIT: This site shows the max connections settings for IE. It looks like it's a registry setting in Windows that controls the amount of web socket connections. Interestingly enough, I don't have that registry Key anywhere, but there is still a limit for this. The page speaks of IE10, and I'm working with IE11 specifically. Does anyone know if there are registry settings for this in regards to IE11? Has anyone just added these feature web socket registry keys and solved this issue?
The MSDN documentation you referenced is clear on the default being 6 concurrent connections (which means if not specified in the registry, that's what you'll get); and, if the documentation doesn't specify differently, it's probably safe to assume newer versions of Internet Explorer act in the same way as version 10.
Try setting through group policy. It worked for me.
https://jwebsocket.org/documentation/reference-guide/internet-explorer-tips
Looking for advice/options for having persistent local storage using both Firefox and Chrome allowing me to save 50MB+ data. I would be storing dynamic terrain data for a WebGL game, so it wouldn't be necessary for the server to send the whole data every time the player connects. I could just update the old parts.
I thought about using an IndexedDB however Chrome doesn't allow you to increase the quota (unlike Firefox) so I wouldn't be able to store any large data. Chrome allows you to use the FileSystem API which would solve my issue however Firefox does not support it.
So it seems either way it wouldn't work. Is my only option to use the FileSystem API for Chrome and the IndexedDB for Firefox? Does anyone have any better ideas?
This info is what I've read from Mozilla's Blog and Google's Dev Site but that may be outdated now, so please feel free to correct me. Thanks!
I agree with the other comments about caching and the Chrome/Firefox marketplaces, and they may ultimately be better solutions for you. However, to answer your original question...
IndexedDB in Chrome is definitely not limited to 5 MB. You can store far more than 50 MB in IndexedDB in both Firefox and Chrome, assuming the user has enough hard drive space. Higher amounts of IndexedDB storage are regularly reached in this game I wrote. On my computer, I currently have over 500 MB stored in IndexedDB in Chrome for that one domain.
You did correctly link to https://developers.google.com/chrome/whitepapers/storage and it is quite confusing, but as I understand it, basically the upper limit is 10% of the free space on the hard drive. Another caveat described on that page is that IndexedDB is technically "temporary" storage that the browser might delete if space is running low, but in practice this seems to rarely happen (YMMV).
localStorage is limited to 5 MB (I think this was on Chrome) and you can request more space for every new 5 MB through dialog boxes.
Both localStorage and IndexedDb are created for interactive data. Because it looks like the data is not modified on the client-side your options are
Using the application cache (as mentioned in the comment)
Serving the data with cache forever HTTP headers (like 10 years), have unique URLs for new resource versions and let the browser re-download the data when it goes out of the cache (recommended)
Deploy your HTML5 application as a web app, downloads available from Chrome Store and Firefox Marketplace
If you open http://app.ft.com (the Financial Times mobile web app), you are prompted to add the app to your "home".
After doing this, when you open the app, you are prompted again to allow the localstoreage database size to be increased up to 50MB.
How can this be done? Is there some JavaScript API call? Permissions or whatever?
Is this iPad (iOS?) specific, or does it work on other Webkit browsers?
I happen to know something about this ;)
There's no API for requesting an increase in storage size for an existing database. There is one way to force an increase: write data to the database in such a size that an increase is required, prompting the user. However, this would be slow and there's no way to tell the currently allocated space, so it's not recommended.
Black Frog has part of this correct: the only neat way to do this is to request a very large database when it is opened, for example:
openDatabase('databaseName', '1.0', 'My Database', 50*1024*1024, …
… to request 50MB of space.
However, when the user first visits the site, you may not want to prompt them about a 50MB limit at once; so you might think that you could ask for 5MB at first, and then later re-open it with 50MB? Unfortunately, this doesn't work - the second open attempt, with an increased quantity, succeeds silently, not prompting for a size increase and not actually increasing the available size.
The FT app therefore starts off with a 5MB "preview" database, so that the user isn't prompted on first load. It tries not to exceed this 5MB limit, as any space assigned has to be shared across all databases.
If the user chooses to allow storage of more content, the app then tries to open a database with a different name with 40MB of space (for which the user is prompted to approve 50MB). This allows 40MB in that database, and 5MB in the original preview database, so neither should fail when inserting rows - as 50MB total is currently the limit on iOS.
All browsers currently handle database space limits differently, so if you're planning cross-platform, test carefully. Desktop Safari handles it rather nicely, allowing much larger; Chrome doesn't allow any increase at all; etc. Expect all "HTML5" implementations to differ in strange ways :)
This database is part of Web SQL Database API, which is not part of HTML5. Use the following the set the size of your database
function prepareDatabase(ready, error) {
return openDatabase('documents', '1.0', 'Offline document storage', 50*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
}
Introducing Web SQL Databases on HTML5 Doctor has a very quick tutorial on how all of this works.
I just tested with my offline app in iPad 2( iOS 5.1.1) that we do not need to do anything specific inside the app. For e.g., my app has about 18 MB of offline data. When the browser hit URL, browser popped up the message requesting increase in size to 25 MB and I accepted it and all is fine. Thanks
It's browser specific. Most have set it to 5MB and some give the option of increasing it through a setting somewhere. Not all browsers offer this though.
Huh — Dive into HTML5 says that no browser supported this as of February 2011, so I guess this might be an iOS 4.3 thing? (iOS 4.3 shipped in March 2011.)
I can’t find any references to it from a quick Google. Apple’s own developer documentation might mention it — I’m not sure if that’s available to non-SDK subscribers though.