カケラの樹オフライン対応(utsunomiyaプロジェクト)に向けての調査
バージョン管理は未サポート
記述してアプリケーションキャッシュを定義
MIMEタイプはtext/cache-manifest
html要素のmanifest属性で場所を指定
<html manifest="http://www.foo.com/cache-manifest">
window.applicationCacheオブジェクトにcachedイベントが送られたらキャッシュのダウンロード完了。
http://developer.mozilla.org/ja/docs/nsIDOMOfflineResourceList#add.28.29
applicationCache.add()で動的にキャッシュの追加
CACHE MANIFEST #v1 #バージョン番号を書いておく。この値が変わった→マニフェストが更新された→Fx3はリソースが変更されたと判断→キャッシュ更新 #バージョン番号じゃなくて別にポエムでもいいけど。 CACHE: #ここは明示的セクション #キャッシュすべきリソースのURIを記述 http://www.example.com/foo.js FALLBACK: #代替セクション NETWORK: #オンラインホワイトリスト
http://developer.mozilla.org/ja/docs/Online_and_offline_events
オフライン/オンライン移行時に発生するイベント
オンラインに移行する場合はいいが、オフライン移行イベントもしくはonLine == falseとなることを監視してオフライン移行を知る場合、知った時点では既に接続は切断されている(可能性が高い)。
よって、オフライン移行時にデータの同期をやっておきたいといってもそれは無理。
同期ボタンをページ上に置くのが無難だろう。
プロパティ。オンラインかどうかがboolで格納される。
document.body.addEventListener(
"offline",
function(){
//オフライン移行処理
}
);
document.body.addEventListener(
"online",
function(){
//オンライン移行処理
}
);
HTML5 Client-side database storageはまだ。
http://developer.mozilla.org/ja/docs/DOM:Storage
Firefox2以降で利用可能。
HTML5標準への追加はリジェクト。将来的には廃止?
相当する物はlocalStorage。
要するにハッシュ。
globalStorage['kakera.yumenosora.net'][KEY] = VALUE; もしくは globalStorage['kakera.yumenosora.net'].KEY = VALUE;
データは全て文字列で保存されるので数値なんかを入れるならばキャストが必要。
http://www.whatwg.org/specs/web-apps/current-work/multipage/section-offline.html#appcache
Fx3の実装を参照。この仕様に準拠を目指している。
http://www.whatwg.org/specs/web-apps/current-work/multipage/section-storage.html
localStorage[KEY] = VALUE;
FirefoxのDOM Storage(globalStorage)の違いはドメイン名が要らないことか。ハッシュとして扱えるところは同じ。
使用前にgears_init.jsを読み込んでおくこと。
読み込んだ時点で、Gearsから「使用を許可するか?」と聞いてくる。
読み込み後、Gearsのインストール判定が可能になる。
if (!window.google || !google.gears) {
//Gearsがインストールされていない
}
JSで明示的にマニフェストを指定し、読ませる
//LocalServer生成
var localServer = google.gears.factory.create('beta.localserver');
//ストア生成
var store = localServer.createManagedStore('test-store');
//マニフェストを指定する
store.manifestUrl = 'site-manifest.txt';
//更新チェック
store.checkForUpdate();
JSON形式。
{
//マニフェストの(形式の)バージョン。Gearsのバージョンアップで変わる(はず)
"betaManifestVersion": 1,
//このマニフェストのバージョン。この値が変わればキャッシュが更新される
"version": "site_version_string",
//キャッシュすべきリソース群を指定
"entries": [
{ "url": "site.html" },
{ "url": "gears_init.js" }
]
}
entriesは次のキーを持つ
必須。キャッシュするリソースのURLを指定する。同一オリジンポリシーに従わなければいけない。
オプション。この値を与えると、そのURLから取得してキャッシュする。つまり、urlで'foo.js'と指定、srcに'http://example.com/foo.js'と指定すればhttp://example.com/foo.jsを同一ドメイン内のfoo.jsとして扱える。
redirectとは排他。
オプション。true or falseで指定。
これがtrueの場合、クエリストリングが無視される。つまり、'foo.js'がurlに指定されていれば"foo.js?bar=true"や"foo.js?date=20080401"などが全てfoo.jsとして扱われ、キャッシュされたfoo.jsがそのまま返る。
HTML5 Client-side database storageに似ているが、扱い方は少し違う。
//beta.databaseを生成
var db = google.gears.factory.create('beta.database');
//DBを開く
db.open('database-test');
SQL実行はdb.execute(SQL STRING);
var result = db.execute();
result.isValidRow()がfalseになるまでnext()しながらwhileループで結果を得れば良い
各カラムの値はfieldByName()で取得する、もしくはfield()にインデックス番号を与えて取得する