Мы все ценим свое время, и я хочу помочь вам (ну может быть не вам, но кому-то уж точно) его сберечь.
Речь пойдет о клиентских БД — 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 (SQL и Web Workers) показана в таблице ниже.
Основные критерии:
± поддержка Local Database,
± поддержка Web Workers
± поддержка Local Database из Web Worker
X — не проверялось
(сразу скажу — Google Gears во всех поддерживаемых браузерах поддерживает или все, или ничего, но для наглядности оставим три значения)
Так же для Safari (MacOS) существует отдельный кастомный плагин для Google Gears, который работает, только при запуске Safari в 32-bit режиме (Snow Leopard).
Здесь все прозрачно и просто, информация и примеры — огромное количество в интернете.
Подключаем gears_init.js.
Примеры использования Google Gears Sql
Примеры использование Google Gears Workers
worker.js:
Поддержка HTML5 Web Sql Database показана в таблице ниже.
Основные критерии:
± поддержка Local Database,
± поддержка Web Workers
± поддержка Local Database из Web Worker
X — не проверялось
Внезапно появляется еще одна проблема — Web Sql Database работает асинхронно. Т.е. выполнить цепочку запросов просто так нельзя. Так же вы можете быть на 100% уверены, что когда выполнится следующий оператор после sql запроса, sql запрос еще не будет выполнен.
Есть несколько вариантов решений:
1) Выполнять вложенные действия. Т.е. мы выполняем sql, после выполнения вызывается callback функция, в которой мы делаем нужные нам действия. Не очень удобно.
2) Построить систему событий. При выполнении запроса, выбросить определенное событие, успешно его поймать и выполнить продолжение. Тоже не очень удобно.
Примеры использования Web Worker
worker.js:
Примеры использования Web Sql Database вне Web Worker
Примеры использования Web Sql Database в Web Worker
Так же есть такая вот проблема в Chrome — жесткий лимит в 5 мб для БД, который на данный момент невозможно расширить обычными методами js.
По спецификации Chrome должен показать окно о превышении лимита в 5 мб и вопрос на разрешение увеличить его. Но… увы.
Я надеюсь, это вам поможет сэкономить немного драгоценного времени.
Речь пойдет о клиентских БД — 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 мб и вопрос на разрешение увеличить его. Но… увы.
Я надеюсь, это вам поможет сэкономить немного драгоценного времени.