最近にわかに盛り上がっているのがPWA(Progressive Web App)です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
今回から7回に分けて、mBaaSを使ったPWAを作っていきます。まず今回はベースになるアプリを作ります。
- 全体の目次
- 利用技術
- Vue CLIでベースを作る
- Vue対応版のNCMBをインストールする
- PWAプラグインのインストール
- NCMBの読み込み
- コンポーネントで利用する
- 全体の処理
- PWA化
- まとめ
全体の目次
全7回の工程は下記のようになっています。
- その1 ベースの作成
- その2 タスク管理の完成
- その3 データ表示のオフライン化
- その4 通信回数を減らす
- その5 タスク追加/更新/削除をオフライン化
- その6 WebAssemblyによるクライアントキーの隠蔽化
- その7 manifest.jsonとPWA化
利用技術
- Vue
- Vue CLI
- mBaaS
今回はVue CLIを使っています。現在3.0.0-RC3となっており、間もなく正式版が出ます。
Vue CLIでベースを作る
Vue CLIをインストールし、さらにコマンドでベースを生成します。
$ npm install -g @vue/cli $ vue create pwa
Vue対応版のNCMBをインストールする
VueなどのWebpackでは公式のJavaScript SDKは使えません。そこで、対応版をインストールします。
$ npm install github:NCMBMania/ncmb_js#master --save
PWAプラグインのインストール
さらにVueアプリをPWAに対応させるプラグインをインストールします。
$ vue add @vue/pwa
NCMBの読み込み
NCMBをインポートする部分を作ります。アプリケーションキー、クライアントキーは src/config.json
として作成します。内容は次のようになります。
{ "applicationKey": "YOUR_APPLICATION_KEY", "clientKey": "YOUR_CLIENT_KEY" }
そして src/ncmb.js
を次のように作ります。
require('ncmb'); const config = require('./config') const ncmb = new window.NCMB(config.applicationKey, config.clientKey); export default ncmb;
これで他のファイルからは ncmb.js
をインポートするだけで使えます。
コンポーネントで利用する
src/components/HelloWorld.vue
を編集します。まずテンプレート部分を次のようにします。Todoアプリなので、タスクの追加ができるようにします。
<template> <div class="hello"> <h1>タスク管理</h1> <input type="text" v-model="task.text" /> <button @click="add">追加</button> <ul> <li v-for="task in tasks" :key="task.objectId"> {{ task.text }} </li> </ul> </div> </template>
次にスクリプトです。 ncmb.js
を読み込んで、Taskというデータストアのクラスを定義します。
<script> import ncmb from '@/ncmb' import Vue from 'vue' const Task = ncmb.DataStore('Task'); // 省略 </script>
画面が構築された時のイベント、createdで既存のデータをmBaaSの既存データを読み込みます。もちろん最初は何もありません。一点、ポイントとしてはasyncで定義することで、非同期処理をawaitによって同期処理であるかのように扱っていることです。mBaaSは基本的に非同期処理なので、async/awaitが活躍します。
また、ログインしていない場合は loginAsAnonymous を使って匿名ユーザを作成しています。これによって、データをAclで安全に保存できます。
export default { name: 'HelloWorld', props: { msg: String }, data() { return { tasks: [], task: { text: null } } }, async created() { if (!ncmb.User.getCurrentUser()) { await ncmb.User.loginAsAnonymous(); } const tasks = await Task .equalTo('status', 'active') .fetchAll(); Vue.set(this, 'tasks', tasks); }, // 省略 }
文字を入力し、タスクを追加する処理は add として定義しています。こちらもasync/awaitで非同期処理を簡単にしています。また、ACLを使って使っている匿名ユーザだけが読み書きできるデータとしています。
methods: { async add() { const text = this.task.text; const user = ncmb.User.getCurrentUser(); const acl = new ncmb.Acl(); acl .setUserReadAccess(user, true) .setUserWriteAccess(user, true); let task = new Task; task = await task .set('text', text) .set('status', 'active') .set('acl', acl) .save(); this.tasks.push(task); } } }
全体の処理
ここまででmBaaSにデータを登録し、再読込時にはデータを表示するといった一連の処理ができました。もちろんオフラインにするとHTMLも表示できなくなります。
PWA化
PWA化する際にはService Workerによるキャッシュ処理が必要になります。vue/pwaの場合、開発版ではなくプロダクション版だとService Workerが生成されます。
$ npm run build
として実行後、 dist
ディレクトリ内にService WorkerのあるHTMLファイル群が生成されます。
まとめ
まずオンライン利用前提のタスク登録機能ができあがりました。次回はもう少し手を加えて、タスクの編集と削除をできるようにします。
ここまでのコードはNCMBMania/PWA-NCMB at v1としてアップロードしてあります。実装時に参考にしてください。