Offline Web Application必須アイテム「Web Storage」を使うためのハードルは？

Offline Web Applicationを開発するためのポイントがいくつかありました。

• Application Cache
• Web Storage

Application Cacheは静的な情報(HTML、CSS、JavaScript)をキャッシュする仕組みでありWeb Storageは動的な情報をキャッシュする仕組みと考えることができます。静的な情報をキャッシュするApplication Cacheについては特にフレームワークの利用は必要なく定義ファイルに記述さえすれば基本的には良いということになります。

しかしWeb Storageの場合はAjaxで処理していたロジックをWeb Storageへ保存するよう変更する必要があります。そのためにJavaScriptフレームワークを少なからず修正する必要があります。backboneの場合はsyncをカスタマイズする等の行為が必要ですが、メジャーなJavaScriptフレームワークにはプラグインが存在しますのでそれを利用するのが良いです。ではここのJavaScriptフレームワークについて見てみます。

backboneの場合はどうか

backboneはbowerコンポーネントにlocalstorage.Backboneというのが存在します。backboneのプラグインはあまり存在しませんので選ぶのに困ることはないでしょう。

利用方法も簡単で

    model = @collection.get
        id: $("#notes-id").val()
    model.save
  

のように記述することでlocalStorageを利用することが可能となります。ただしsessionStorageを対象とするものはないのでBackbone.localStorageをカスタマイズする必要があります。

Angularの場合はどうか

Angularもbackbone同様にbowerコンポーネントが多く存在します。どのプラグインを使うのが良いのか選定します。

今回はangularLocalStorageを見てみます。実装は容易です。具体的なところはangularLocalStorageのgithubを確認します。

// setting that key, value
storage.set('key','value');
// getting that value 
storage.get('key');
// clear all localStorage values 
storage.clearAll();

Senchaの場合はどうか

まずmodelにlocalStorageに保存することを定義します。

Ext.define('LogonCache', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['UserName'],
        proxy: {
            type: 'localstorage'
        }
    }
});

保存したmodelからデータ取得する場合は

    initialize: function () {
    var store = Ext.create('Ext.data.Store', {
        model: "LogonCache"
    });

    store.load();

    if (store.data.length > 0) {
        var UserName = store.getAt(0).get('UserName');
        Ext.getCmp('UserName').setValue(UserName);
    }
}

Senchaについてはこの記事を流用させて頂きました。

最後に

メジャーなJavaScriptフレームワークにはWeb Storageを利用するためのプラグインが用意されています。どのようなJavaScriptフレームワークを用いても簡単に取り込めますので活用した方が良いです。modelに登録したものは必ずAjaxで送信するとかメモリー上にバファリングするというだけでなく、ブラウザに「キャッシュ」することでコーティングの幅が広がります。Offline Web Applicationを構築する意外にも利用すべきと考えます。