最近にわかに盛り上がっているのがPWA（Progressive Web App）です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
今回から何回かに分けて、mBaaSを使ったPWAを作っていきます。今回は最後に、これまで作ったTodoアプリをPWA化します。
- Vueはプラグインを使う
- PWA版を生成
- ソースの修正
- manifest.jsonの修正
- 試す
- Chrome for Androidの設定
- Chrome for Androidでアクセスする
- アプリを立ち上げる
- まとめ
Vueはプラグインを使う
今回はVue CLIを使っています。この場合、最初にインストールしたプラグインがPWA化周りは面倒見てくれます。
$ vue add @vue/pwa
PWA版を生成
このプラグインの場合、プロダクションビルドしないとPWAは生成しません。
$ npm run build
ソースの修正
筆者環境では以下のコードが自動修正されなかったので、編集します。ファイルは src/registerServiceWorker.js です。これは上記PWA版を生成した際に作られるファイルです。
register(`${process.env.BASE_URL}service-worker.js`, {
を変更します。
register(`/service-worker.js`, {
そしてもう一度ビルドします。
$ npm run build
manifest.jsonの修正
public/manifest.json というファイルが生成されているので、これを自由に編集してください。
試す
ファイルは dist フォルダ以下に生成されます。これを HTTPS 以下のサイトにアップロードすれば良いのですが、用意したり、編集する度にアップロードするのは面倒です。そこで使えるのが ngrok です。 ngrok はローカルの特定のポートをインターネット上に公開してくれるサービスです。無料版の場合は、実行する度にURLが変わってしまいますので注意してください。
ローカルのHTTPサーバを立ち上げる
ngrok で利用するローカルのHTTPサーバを立ち上げます。例えばRubyがインストールされているならば、以下のコマンドでサーバが立ち上がります。
$ ruby -run -e httpd . -p 8000
Pythonであれば以下のコマンドが使えます。
# 2系 $ python -m SimpleHTTPServer # 3系 $ python -m http.server 8000
PHPならば以下のようなコマンドです。
$ php -S 0.0.0.0:8000
いずれも http://localhost:8000/ でアクセスできます。これを dist フォルダの中で実行します。
ngrok で接続する
そしてngrokコマンドを実行します。
$ ngrok http 8000
そうすると以下のような表示になるでしょう。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account Atsushi Mint Nakatsugawa (Plan: Basic)
Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://9d3c6e16.ngrok.io -> localhost:8000
Forwarding https://9d3c6e16.ngrok.io -> localhost:8000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
この場合、 https://9d3c6e16.ngrok.io にアクセスします。
Chrome for Androidの設定
そしてこのURLにChrome for Androidからアクセスするのですが、PWAバナーを表示するためには5分以上の間隔を空けて2回以上といった制限があります。その制限を外すために、まずはアドレスバーに chrome://flags と入力します。エンターキーを押すと以下のような表示になるでしょう。
そして検索でappと入れると、Bypass user engagement checks という項目が確認できます。デフォルトでは Disabled になっていますので、Enable にします。これでバナーがすぐ出るようになります。Chromeを再起動したら設定が完了します。
Chrome for Androidでアクセスする
上記のngrokのURLにChrome for Androidからアクセスします。Todo管理の画面が表示されれば成功です。そして数秒待つとバナーがウィンドウ下部に表示されます。
さらにタップするとインストールの確認が出ます。
インストールするとホーム画面にアイコンが表示されます。これでインストールが完了しました。
アプリを立ち上げる
アイコンをタップするとブラウザのアドレスバーもない、アプリ風のUIが表示されます。
これまで作成した通り、オフラインでも利用できます。さらにオンラインに戻れば、データが自動的に同期されます。アプリ風に使えるのが分かるでしょう。
まとめ
ここまででPWAに対応したmBaaSアプリの開発が完了です。Vue CLIを使わずともできますが、Service Workerを使ったキャッシュ周りで若干苦労するかも知れません。
mBaaS対応のPWAを作る場合にはキーの取り扱いにご注意ください。WebAssemblyによって隠蔽化できれば、セキュリティ的にも安心して開発できるでしょう。オフライン、キーの隠蔽化、PWA化といったポイントを押さえて、ぜひ皆さんのWebアプリをPWA対応させてみてください。もちろん、PWA対応していればMonacaでスマホアプリ化するのも容易でしょう。
ここまでのコードはNCMBMania/PWA-NCMB at v7にアップロードしてあります。実装時の参考にしてください。
- その１ ベースの作成
- その２ タスク管理の完成
- その３ データ表示のオフライン化
- その４ 通信回数を減らす
- その５ タスク追加/更新/削除をオフライン化
- その６ WebAssemblyによるクライアントキーの隠蔽化
- その７ manifest.jsonとPWA化
