My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
Taking your web apps offline: A tale of Web Storage, Application Cache and WebSQL
To make applications run fully offline, we should make ourselves familiar with three very interesting technologies: The HTML5 Application Cache, Web Storage and WebSQL Databases. This article looks at al three, showing how they can be used together to create an effective offline application.( Read the article )
Well, 1Mb means one mega bit. This is not correct.The size of the database has to be set in bytes. That is why we have defined the size as 1*1024*1024, which equals 1Mb.
1 * 1024 * 1024 equals 1 MiB.
Originally posted by Zajec:
Well, 1Mb means one mega bit. This is not correct.1 * 1024 * 1024 equals 1 MiB.
This is a contentious point Zajec - I have heard arguments either way on this. If you look at the Wikipedia article (http://en.wikipedia.org/wiki/Megabyte) it says that the definition is not clear cut: 1024 (2<sup>10</sup>) is the binary definition, whereas 1000 (10<sup>3</sup>) is the decimal definition. I think that erring on the safe side would be to use the higher value, so that you'll have slightly more space than you bargained for if anything, rather than less (which could cause problems).
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
One question in my mind is, doesn't this story (both web sql and indexed db) lack a chapter on data synchronization? If as a user, I'm going to seriously work offline in the context of a web app where, in all likelihood, it's my hosted data that normally feeds the online path, who will take care of replicating my offline work to the hosted storage, when I come back online?
The problem is that there is no description of what is the API that is supported. The documentation just points to the deprecated W3C document. And the specs are incorrect.
For example, it shows openDatabase as having 5 parameters, with the 5th one a creation callback, invoked like such:
openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
});
});
When I try it, neither Chrome, Safari, nor Opera makes any database. Indeed, I haven't found any examples of code online that include the 5th parameter, and the example on the W3C spec has serious errors. I can mangle it into working in Chrome and Safari, but Opera is closed-source and I haven't found how to make it work.
In this case, the 4-parameter call to openDatabase works. However, I wonder what else is or is not supported.
Originally posted by Biennium:
Is there a description anywhere of exactly what Web SQL functions are supported by Opera?
Unfortunately no - at least, nothing beyond this article.
Originally posted by Biennium:
For example, it shows openDatabase as having 5 parameters, with the 5th one a creation callback, invoked like such:openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }); });
The 5th parameter is optional, and as you've experienced, doesn't work as documented. You could change that code so that the transaction isn't wrapped in a callback.
var db = openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024);
db.transaction(
function (tx) {
tx.executeSql('CREATE TABLE docids (id, name)');
}
);
That should work in Opera just as it does in Chrome and Safari.
Originally posted by NovisM:
Very nice article, thanks!
One question in my mind is, doesn't this story (both web sql and indexed db) lack a chapter on data synchronization? If as a user, I'm going to seriously work offline in the context of a web app where, in all likelihood, it's my hosted data that normally feeds the online path, who will take care of replicating my offline work to the hosted storage, when I come back online?
Hi, nice question.
If you notice, my second example demo, called the 'Advanced Web Storage Demo' (http://people.opera.com/shwetankd/webstorage/demofolder/webstorage_advanced.zip) actually deals with this, and sends back to the server whatever you have typed till now, if you are online. This example is using web storage...but the same principle would apply to websql too.
With WebSQL (and also, later on indexDB) you'll have to pretty much do the same thing. In that case, you'll have to query all the rows (or if your app allows it, then be clever and somehow only detect the newly added rows, which would be especially appropriate if you have a lot of rows) and send them back to the server (probably using XHR) to sync after every few minutes. The way to do it would be similar to my second example which I talked about and linked to above.