最近にわかに盛り上がっているのがPWA（Progressive Web App）です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
PWAは幾つかの技術の組み合わせですが、その一つにWeb App Manifestがあります。Web App Manifestはオフライン利用を可能にする仕組みで、Webアプリをオフラインでもある程度使えるようにします。
mBaaSを使うということは、間違いなくネットワーク接続を利用することになりますが、幾つかの技術を使うことでオフラインでも利用できるようになります。今回はそれらの技術を紹介します。
オンライン、オフラインの判定
まずmBaaSが使える状態にあるのかどうかを判別する必要があります。これは2つの方法があります。
- navigator.onLineの利用
- イベントの利用
navigator.onLineの利用
navigator.onLine にはオンライン時は true 、オフライン時は false が入っています。mBaaSへの処理を行う前に利用することでネットワークの利用可否を判別できます。
イベントの利用
オフラインになった、またはオンラインになったタイミングでイベントを受け取れます。これは次のように記述します。
// オンラインになった時
window.addEventListener('online', (e) => {
console.log('Online');
});
// オフラインになった時
window.addEventListener('offline', (e) => {
console.log('Offline');
});
注意点としては、このイベントはオンラインまたはオフラインになった時にコールされます。つまり最初は呼ばれません。そのため navigator.onLine が不要になる訳ではありません。
キャッシュ
データ取得の場合、オンライン時はネットワークアクセスし、オフライン時はキャッシュを読むようにしましょう。一度取得したデータの保存先としては、localStorageまたはindexedDBがお勧めです。ただし複雑なクエリを使った状態でのキャッシュは難しいかも知れません。カテゴリやステータスごとのキャッシュに留めるのが良いでしょう。
キャッシュはオンライン状態ながらも何らかのネットワークエラーが生じた場合にも使えます。
キュー
データの作成、更新、削除の場合はキャッシュが使えませんのでキューに入れておくのがお勧めです。新規作成データをキューに入れた場合は特別なIDを割り当てておき、オンラインに復旧した時に実行するのが良いでしょう。更新、削除の場合にはキューを実行するだけでOKです。
VueやReactといった表示するデータを変更すると即座に表示に反映されるタイプのフレームワークの場合はじゃっかんの注意が必要です。表示するデータにそのままmBaaSのデータを当てはめてしまうと更新が反映されない可能性があります。mBaaSのデータと表示データとを分けることで、ネットワークがオフラインの場合でもまず表示だけを変更する方法が利用できます。
キーの隠蔽
PWAはスマートフォンアプリのようにスマートフォンにインストールできますが、最初はWebブラウザでのアクセスになります。そのため、ソースコードを見ればmBaaSのキーが表示されてしまいます。
そこで使えるのが WebAssembly です。クライアントキーによる署名部分だけでも WebAssembly化すれば、署名処理やキーが難読化されるので、漏洩リスクが多少下がります。なお、PWAにする際にはデータの保存時にはACLの利用、そしてクラスごとの権限設定を正しく指定するのが必須です。
まとめ
これらの技術によってmBaaSをPWAで使えるようになります。ネットワーク前提の技術である以上、オンライン/オフラインの対応が一番のネックになるのではないでしょうか。とは言え、スマートフォンアプリにおいてもネットワークが切断された状態での運営は十分にあり得ます。PWAで培った技術はハイブリッドアプリでも活かせるはずです。
