mBaaSを使ったPWAを作る（その3 データ表示のオフライン化） - FJCT_ニフクラ mobile backend（mBaaS）お役立ちブログ

f:id:mbaasdevrel:20180625093155p:plain

最近にわかに盛り上がっているのが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にアップロードしてあります。実装時の参考にしてください。

中津川篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。