Ember.jsアプリをオフライン対応にする方法：サーバー同期アダプターの活用ガイド

はじめに

Ember.jsアプリケーションをオフライン環境でも動作させ、ネットワークが復帰した際に自動的にサーバーと同期させたいケースは多くあります。これを実現するには、クライアント側ストレージ向けのアダプターをData Storeに組み込むのが基本のアプローチです。

ember-localstorageアダプターを使う最も簡単な方法

手軽にオフライン対応を行うなら、「ember-localstorage」アダプターの利用がおすすめです。データをブラウザーのlocalStorageに保存するため、追加のバックエンドなしで永続化が可能になります。

App.store = DS.Store.create({
    revision: 11,
    adapter: DS.LSAdapter.create()
});

この設定だけで、モデルのレコードがlocalStorageに書き込まれ、ページを再読み込みしてもデータが保持されます。

IndexedDBアダプターによる実装例

より大容量のデータや構造化されたデータを扱う場合は、IndexedDBアダプターが適しています。クライアント側ストレージに使用するアダプターを定義し、保存対象のモデルとのマッピングを明示的に指定します。

App.Store = DS.SyncStore.extend({
    revision: 10,
    adapter: DS.IndexedDB.adapter({
        mappings: {
            person: App.Person,
            persons: App.Person,
            contact: App.Contact,
            contacts: App.Contact
        }
    })
});

上記の例では、PersonモデルとContactモデル（およびそれぞれの複数形キー）をIndexedDBにマッピングしています。DS.SyncStoreを継承することで、オフライン中の変更を追跡し、接続が回復したタイミングでサーバーへ同期する仕組みを構築できます。

アダプター選択のポイント

• localStorage： 実装が非常にシンプルだが、保存容量は約5MB程度と小さめ。小規模なデータや設定情報向きです。
• IndexedDB： 大容量データ・トランザクション処理に強く、本格的なオフラインアプリに適しています。
• SyncStore系の拡張： 同期ロジックを担うストアと組み合わせることで、オンライン復帰時の差分送信を実現できます。

まとめ

Ember.jsのオフライン対応は、用途に応じてlocalStorageかIndexedDBのアダプターを選択し、同期対応のストアと組み合わせることで実現できます。まずは小規模なデータでember-localstorageを試し、要件が拡大した段階でIndexedDBへ移行するのが現実的な進め方でしょう。