カケラの樹 Logo オフラインサポートについて

カケラの樹オフライン対応(utsunomiyaプロジェクト)に向けての調査

使いたい機能

  • JSやCSS、HTMLをキャッシュしてオフライン時にもページを開けるように
  • サーバへデータ送信/サーバから取得する代わりにローカルにデータを保持
      • バージョン管理は未サポート

        • idle, checking, downloadingの3状況がある
        • オンラインホワイトリストに載せたURIのリソースは常にサーバから取ってくる(未実装)
        • 記述してアプリケーションキャッシュを定義

          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以降で利用可能。

        globalStorage

        HTML5標準への追加はリジェクト。将来的には廃止?

        相当する物はlocalStorage。

        要するにハッシュ。

        globalStorage['kakera.yumenosora.net'][KEY] = VALUE;
        もしくは
        globalStorage['kakera.yumenosora.net'].KEY = VALUE;
        

        データは全て文字列で保存されるので数値なんかを入れるならばキャストが必要。

  • 使用前に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を指定する。同一オリジンポリシーに従わなければいけない。


          "src"

          オプション。この値を与えると、そのURLから取得してキャッシュする。つまり、urlで'foo.js'と指定、srcに'http://example.com/foo.js'と指定すればhttp://example.com/foo.jsを同一ドメイン内のfoo.jsとして扱える。

          redirectとは排他。


          "redirect"

          オプション。これを指定した場合、urlで指定したリソースがリクエストされた時にローカルサーバは302リダイレクトで応答する。

          srcとは排他。


          "ignoreQuery"

          オプション。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()にインデックス番号を与えて取得する

トラックバック: http://kakera.yumenosora.net/document/show/250
presented by 雨上がりの青空を探して。