HTML5 Web Sql Database and Google Gears support with examples

We all value our time, and I want to help you (well, maybe not to you, but to someone for sure) to save it.
It's about client databases - Web Sql Database and Google Gears.

On duty, I do a web application using Local Database and Web Workers.

So, what we need:
')
1. SQL queries that select all data from the local database
2. Downloading data via Ajax in the background and writing them to a local database
3. Support Firefox, Google Chrome, Safari, IE
4. Support Win, Linux, MacOS, iPad

At first glance, it's okay, but with the second the problems begin.

Google gears

Support for Google Gears (SQL and Web Workers) is shown in the table below.
Main criteria:
± support local database,
± Web Workers support
± Local Database support from Web Worker
X - not checked
(I’ll say right away that Google Gears in all supported browsers supports either all or nothing, but for clarity, we’ll leave three values)

	Chrome	Firefox	Safari	IE
Win	+++	+++	---	+++
MacOS	---	+++	---	X
iPad	X	X	---	X
Linux	---	+++	---	X

Also for Safari (MacOS) there is a separate custom plugin for Google Gears, which works only when running Safari in 32-bit mode (Snow Leopard).

Everything is transparent and simple here, information and examples are a huge amount on the Internet.
We connect gears_init.js.

Examples of using Google Gears Sql

var connect = google.gears.factory.create('beta.database');
connect.open(dbName);
var result = connect.execute(query, fields);
while (result.isValidRow()) {
var id = result.fieldByName('id');
result.next();
}
connect.close();

Examples using Google Gears Workers

var workerPool = google.gears.factory.create('beta.workerpool');
var childWorkerId = workerPool.createWorkerFromUrl('worker.js');
workerPool.onmessage = function(a, b, message) {
switch (message.body) {
case 'EVENT_1':
break;
case 'EVENT_2':
break;
default:
break;
}
};
workerPool.sendMessage({event: 'START'}, childWorkerId);

worker.js:
var worker = google.gears.workerPool
worker.onmessage = function(a, b, message) {
//event message.body.event
worker.sendMessage('EVENT_1', message.sender);
}

---

HTML5 Web Sql Database

HTML5 Web Sql Database support is shown in the table below.
Main criteria:
± support local database,
± Web Workers support
± Local Database support from Web Worker
X - not checked

	Chrome	Firefox	Safari	IE
Win	+++	- + -	++ -	---
MacOS	+++	- + -	++ -	X
iPad	X	X	+ -	X
Linux	+++	- + -	X	X

Suddenly, another problem appears - Web Sql Database runs asynchronously. Those. it is impossible to execute a chain of requests just like that. You can also be 100% sure that when the next statement is executed after the sql query, the sql query will not be executed yet.
There are several solutions:

1) Perform nested actions. Those. we execute sql, after execution callback function is called, in which we do the actions we need. Not very comfortable.

2) Build a system of events. When executing a query, throw a certain event, successfully catch it and continue. Also not very convenient.

Web Worker Examples

var worker = new Worker("worker.js");

worker.onmessage = function (evt) {
switch (evt.data) {
case 'EVENT_1':
break;
default:
break;
}
};
worker.onerror = function (evt) {
alert('error: ' + evt.data);
};

worker.postMessage('START');

worker.js:

onmessage = function (event) {
switch (event.data) {
case 'START':
break;
default:
break;
}
postMessage('EVENT_1');
};


Examples of using Web Sql Database outside of Web Worker

var connect = window.openDatabase(dbName, "1.0", "", 1024*1024*5);
connect.transaction(function(db) {
//
db.executeSql("SELECT id FROM test", fields,
function(t, results) {
for (i = 0; i < results.rows.length; i++){
//results.rows.item(i)['id'];
}
},
function(t, error) {
alert(error.message);
}
);
});

Examples of using Web Sql Database in Web Worker

var db = openDatabaseSync('db', "1.0", "", 1024*1024*5);
db.transaction(function(db) {
//
var result = db.executeSql("SELECT id FROM test");
for (var i = 0; i < result.rows.length; i++) {
//result.rows.item(i)['id'];
}
});

There is also such a problem in Chrome - a hard limit of 5 MB for the database, which is currently not possible to extend with the usual js methods.
According to the specification, Chrome should show a window about exceeding the limit of 5 MB and the question of permission to increase it. But ... alas.

I hope this helps you save some precious time.