最近にわかに盛り上がっているのがPWA(Progressive Web App)です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
何回かに分けて、mBaaSを使ったPWAを作っていきます。今回は前回まで作ったTodo管理アプリを一部オフライン対応させます。
データ検索処理について
Todo管理アプリではデータを一覧表示するのみですが、主に二つのデータが存在します。
- アクティブなタスク一覧
- 終了にしたタスク一覧
データは同じクラスにあり、statusがactiveまたはdoneの違いだけです。
ストレージについて
今回は localStorage を使っています。複雑なものであればIndexedDBを使っても良いでしょう。今回はトランザクションを使ったりすることもないので、簡易的な localStorage としています。
データ取得の変更
これまでは直接 mBaaS を読み込んでいましたが、オンライン状態によって処理分けをします。また、取得したデータをlocalStorageに保存しておきます。
async fetch() { // オンライン状態によって取得元を分ける const tasks = await (navigator.onLine ? this.onlineFetch() : this.offlineFetch()); const cache = this.getCache(); cache[this.status] = tasks; localStorage.setItem('tasks', JSON.stringify(cache)); Vue.set(this, 'tasks', tasks); },
オンライン状態の取得
ネットワークに繋がっているのであれば、これまでと変わりません。
async onlineFetch() { return await Task .equalTo('status', this.status) .fetchAll(); },
オフライン状態の取得
オフラインの場合は localStorage からデータを取得または初期化し、さらに取得したデータをmBaaSのクラスとして復元します。復元したデータはlocalStorageに保存します。
// オフラインでのデータ取得 async offlineFetch() { return this.getCache()[this.status]; }, // キャッシュから復元 getCache() { const str = localStorage.getItem('tasks'); const tasks = str ? JSON.parse(str) : {}; tasks.active = this.jsonToClass(tasks.active || []); tasks.done = this.jsonToClass(tasks.done || []); return tasks; }, // クラスデータとして復元 jsonToClass(tasks) { for (let i = 0; i < tasks.length; i += 1) { const data = tasks[i]; const task = new Task; tasks[i] = task .set('objectId', data.objectId) .set('text', data.text) .set('status', data.status) .set('acl', this.getAcl()) } return tasks; }, getAcl() { const acl = new ncmb.Acl(); const user = ncmb.User.getCurrentUser(); return acl .setUserReadAccess(user, true) .setUserWriteAccess(user, true); },
まとめ
このようにオンライン、オフラインの処理分けをすることで、ネットワークがない状態でも既存のタスクを見られるようになります。mBaaSでPWAを作る時には、キャッシュを使ってデータ取得を行うようにしましょう。
ここまでのコードはNCMBMania/PWA-NCMB at v3にアップロードしてあります。実装時の参考にしてください。