Pull to refresh

Поддержка HTML5 Web Sql Database и Google Gears с примерами

Reading time 3 min
Views 5.7K
Мы все ценим свое время, и я хочу помочь вам (ну может быть не вам, но кому-то уж точно) его сберечь.
Речь пойдет о клиентских БД — Web Sql Database и Google Gears.

По долгу службы я занимаюсь веб приложением, использующим Local Database и Web Workers.

Итак, что нам требуется:

1. SQL запросы, выбирающие из локальной БД всякие данные
2. Скачивание данных через Ajax в фоновом режиме и запись их в локальную БД
3. Поддержка Firefox, Google Chrome, Safari, IE
4. Поддержка Win, Linux, MacOS, iPad

С первого взгляда ничего страшного, но со второго начинаются проблемы.


Google Gears



Поддержка Google Gears (SQL и Web Workers) показана в таблице ниже.
Основные критерии:
± поддержка Local Database,
± поддержка Web Workers
± поддержка Local Database из Web Worker
X — не проверялось
(сразу скажу — Google Gears во всех поддерживаемых браузерах поддерживает или все, или ничего, но для наглядности оставим три значения)

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


Так же для Safari (MacOS) существует отдельный кастомный плагин для Google Gears, который работает, только при запуске Safari в 32-bit режиме (Snow Leopard).

Здесь все прозрачно и просто, информация и примеры — огромное количество в интернете.
Подключаем gears_init.js.

Примеры использования 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();


Примеры использование 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 показана в таблице ниже.
Основные критерии:
± поддержка Local Database,
± поддержка Web Workers
± поддержка Local Database из Web Worker
X — не проверялось

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


Внезапно появляется еще одна проблема — Web Sql Database работает асинхронно. Т.е. выполнить цепочку запросов просто так нельзя. Так же вы можете быть на 100% уверены, что когда выполнится следующий оператор после sql запроса, sql запрос еще не будет выполнен.
Есть несколько вариантов решений:

1) Выполнять вложенные действия. Т.е. мы выполняем sql, после выполнения вызывается callback функция, в которой мы делаем нужные нам действия. Не очень удобно.

2) Построить систему событий. При выполнении запроса, выбросить определенное событие, успешно его поймать и выполнить продолжение. Тоже не очень удобно.

Примеры использования Web Worker

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


Примеры использования Web Sql Database вне 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);
}
);
});


Примеры использования Web Sql Database в 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'];
}
});


Так же есть такая вот проблема в Chrome — жесткий лимит в 5 мб для БД, который на данный момент невозможно расширить обычными методами js.
По спецификации Chrome должен показать окно о превышении лимита в 5 мб и вопрос на разрешение увеличить его. Но… увы.

Я надеюсь, это вам поможет сэкономить немного драгоценного времени.
Tags:
Hubs:
+21
Comments 11
Comments Comments 11

Articles