読者です 読者をやめる 読者になる 読者になる

latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

iOS 5 から WebWorker と Web SQL Database(同期) が使えます

モバイルブラウザでは、

と考えていましたが… やってみたら使えました。

デモ

以下は、現在時刻を 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以上の値を指定するとエラーになります。

この機能をどこで使うべき?

ウェブ ワーカーの基本 - HTML5 Rocks では

(後でデータを使用する目的での)データのプリフェッチ/キャッシュ
コード構文のハイライト表示、その他のリアルタイムでのテキスト書式設定
スペル チェック
動画データや音声データの解析
バックグラウンド I/O やウェブサービスのポーリング
大きな配列や膨大な JSON 応答の処理
<canvas> での画像フィルタリング
ローカル ウェブ データベースの行の大量更新

と提案されています。

画像のフィルター等は有望な気もしますが、
受け渡し可能なサイズの制限があったり、渡す際にコピーが走ってしまうようだと、なかなか使えない気もします。

WebWorkerのなかでなら!

  • XHR を同期で使える!
  • Object.definedProperty() ベースの拡張ライブラリも気兼ねなく使える!

という感じになりますね