HTML5 Web SqlデータベースとGoogle Gearsのサポート例

私たちは皆、時間を大切にしています。私はあなたを助けたいと思っています。
クライアントデータベース-Web Sql DatabaseとGoogle Gearsについてです。

勤務中は、ローカルデータベースとWebワーカーを使用したWebアプリケーションに関与しています。

必要なもの：

1.ローカルデータベースからすべての種類のデータを選択するSQLクエリ
2.バックグラウンドでAjaxを介してデータをダウンロードし、ローカルデータベースに書き込む
3. Firefox、Google Chrome、Safari、IEのサポート
4. Win、Linux、MacOS、iPadをサポート

一見、大丈夫ですが、2番目からは問題が始まります。

Google Gears

Google Gears（SQLおよびWeb Workers）のサポートを以下の表に示します。
主な基準：
±ローカルデータベースのサポート、
±Web Workersのサポート
±Web Workerからのローカルデータベースサポート
X-未テスト
（すぐに言います-サポートされているすべてのブラウザのGoogle Gearsは、すべてまたは何もサポートしていませんが、明確にするために、3つの値を残します）

	クロム	Firefox	サファリ	IE
勝利	+++	+++	---	+++
MacOSの	---	+++	---	X
iPad	X	X	---	X
Linux	---	+++	---	X

また、Safari（MacOS）には、Google Gears用の個別のカスタムプラグインがあります。これは、Safariが32ビットモード（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 Workerの使用例

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データベース

HTML5 Web Sql Databaseのサポートを次の表に示します。
主な基準：
±ローカルデータベースのサポート、
±Web Workersのサポート
±Web Workerからのローカルデータベースサポート
X-未テスト

	クロム	Firefox	サファリ	IE
勝つ	+++	-+-	++-	---
MacOS	+++	-+-	++-	X
iPad	X	X	+-	X
Linux	+++	-+-	X	X

別の問題が突然現れます-Web Sql Databaseは非同期に実行されます。 つまり クエリチェーンを完成させることは不可能です。 また、次のステートメントがsql要求の後に実行されるときに、sql要求がまだ実行されないことを100％確信できます。
いくつかの解決策があります。

1）ネストされたアクションを実行します。 つまり sqlを実行し、実行後に必要なアクションを実行するコールバック関数を呼び出します。 あまり便利ではありません。

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 Workerの外部でWeb SQLデータベースを使用する例

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 WorkerでWeb SQLデータベースを使用する例

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 mbであり、現時点では通常のjsメソッドでは拡張できません。
仕様によると、Chromeは5 MBの制限を超えるウィンドウと、それを増やす許可の質問を表示する必要があります。 しかし...悲しいかな。

これが貴重な時間の節約に役立つことを願っています。