How can I request an increase to the HTML5 localst

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.