iOS 5 から WebWorker と Web SQL Database(同期) が使えます
モバイルブラウザでは、
- WebWorkers は利用できない
- Web SQL Database で定義されている 同期SQL (openDatabaseSync)も利用できない
と考えていましたが… やってみたら使えました。
デモ
以下は、現在時刻を WebWorkers 上でDBに保存/取得し表示するコードです。
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>WebWorker in SyncSQL example</title> <script> var worker = new Worker("worker.js"); worker.onmessage = function(event) { var result = event.data.result; alert(result); // Date.now() }; worker.postMessage({ command: "Date.now()" }); </script> </head><body></body></html>
worker.js
onmessage = function(event) { if (event.data.command === "Date.now()") { try { //var db = openDatabase("WWtestDB","1.0","WebWorker Test DataBase",10240); var db = openDatabaseSync("WWtestDB","1.0","WebWorker Test DataBase",10240); db.transaction(function(tr) { tr.executeSql("CREATE TABLE IF NOT EXISTS hoge2 (id TEXT PRIMARY KEY,data INTEGER)"); tr.executeSql("INSERT OR REPLACE INTO hoge2 VALUES(?,?)", ["id", Date.now()]); var result = tr.executeSql("SELECT id,data FROM hoge2"); // とりあえず全部もってくる var obj = result.rows.item(result.rows.length - 1); // last rows var id = obj.id; var data = obj.data; postMessage({ result: data }); }); } catch (err) { postMessage({ result: "err " + err }); } } }
WebWorkers + Web SQL Database(sync) 動作環境
Mac Chrome 23 | ○ |
Mac Safari 6.0.1 | ○ |
iPhone 4S (iOS 5.1) Safari | ○ |
iPhone 4S (iOS 5.1) Chrome | ○ |
Nexus7 (Android 4.2) Browser | × |
Nexus7 (Android 4.2) Chrome 18 | ○ |
容量の拡張はできない?
WebWorkers + SyncSQL は iOS 5++ で利用可能で、
openDatabaseSync() に与えられるDBサイズは残念ながら5MB以下のようです。
# 5MB以上の値を指定するとエラーになります。
この機能をどこで使うべき?
(後でデータを使用する目的での)データのプリフェッチ/キャッシュ コード構文のハイライト表示、その他のリアルタイムでのテキスト書式設定 スペル チェック 動画データや音声データの解析 バックグラウンド I/O やウェブサービスのポーリング 大きな配列や膨大な JSON 応答の処理 <canvas> での画像フィルタリング ローカル ウェブ データベースの行の大量更新
と提案されています。
画像のフィルター等は有望な気もしますが、
受け渡し可能なサイズの制限があったり、渡す際にコピーが走ってしまうようだと、なかなか使えない気もします。
WebWorkerのなかでなら!
- XHR を同期で使える!
- Object.definedProperty() ベースの拡張ライブラリも気兼ねなく使える!
という感じになりますね