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

Мы все ценим свое время, и я хочу помочь вам (ну может быть не вам, но кому-то уж точно) его сберечь.
Речь пойдет о клиентских БД — 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 мб и вопрос на разрешение увеличить его. Но… увы.

Я надеюсь, это вам поможет сэкономить немного драгоценного времени.
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 11
  • +3
    Все бы хорошо, только поддержка и развитие Web Sql Database и Google Gears прекращены в пользу IndexedDB.
    • +4
      Да, но IndexedDB пока не реализована ни в одном браузере (я имею ввиду stable версии). Поэтому приходится поддерживать всевозможные версии. Как только будет реализована я обязательно напишу обзор.
      • +2
        Да, но в статье стоит указать, что фактически вы пишете о сырых и устаревших технологиях, которые не будут дальше развиваться и поддерживаться. То есть то, что работает сегодня в WebSQL в тех браузерах, где он поддерживается, завтра уже работать не будет.
        • +3
          Не знаю почему, но ваш диалог напоминает битву юмористов из передачи «Смех без правил» :)
          В одном из конкурсов — это одно из условий начинать фразу со слов «Да, но».
          Atyom Trityak, твоя очередь, а я за попкорном!
          • 0
            Да, но не было сообщений о том, что браузеры собираются отказываться от поддержки Web Sql Database. Поэтому логично предположить, что поддержка в данном виду будет продолжаться и дальше.
            • 0
              А не торопимся об'являють технологии устаревшими? Особенно те, которым сейчас альтернативы нет. Если бы каждая новая умная идея становилась сразу да и вообще — де-факто стандартом, это был бы иделаьный мир… никакого IE6 живущего лишние 10 лет и т.п. :)
        • 0
          Почему в таблице iPad, а не iOS — на iPhone иначе обстоят дела? Ну и прочие мобильные платформы (Android, WP7, WebOS) тоже интересно было бы увидеть в таблице.
          • 0
            А почему вы считаете коллбеки или события не удобными?
            • 0
              Зачастую требуется выполнить код последовательно. А callback вызовы и выбрасывание событий очень загромождают код, превращают цепочку sql запросов / действий в древовидный код, что усложняет рефакторинг.

              «Простое лучше, чем сложное» (с)
          • 0
            Есть другие способы оформить подобный код, многие описаны в habrahabr.ru/blogs/javascript/111634/.

            «Простота означает достижение максимального эффекта с минимальными средствами.» ©
            И в данном случае асинхронный код лучше, потому как любые тормоза могут привести к потери пользователя :)

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.