クライアントデータベース-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の制限を超えるウィンドウと、それを増やす許可の質問を表示する必要があります。 しかし...悲しいかな。
これが貴重な時間の節約に役立つことを願っています。