FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

mBaaSを使ったPWAを作る(その7 manifest.jsonとPWA化)

f:id:mbaasdevrel:20180625094901p:plain

最近にわかに盛り上がっているのがPWA(Progressive Web App)です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。

今回から何回かに分けて、mBaaSを使ったPWAを作っていきます。今回は最後に、これまで作ったTodoアプリをPWA化します。

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 と入力します。エンターキーを押すと以下のような表示になるでしょう。

f:id:mbaasdevrel:20180625094728p:plain

そして検索でappと入れると、Bypass user engagement checks という項目が確認できます。デフォルトでは Disabled になっていますので、Enable にします。これでバナーがすぐ出るようになります。Chromeを再起動したら設定が完了します。

Chrome for Androidでアクセスする

上記のngrokのURLにChrome for Androidからアクセスします。Todo管理の画面が表示されれば成功です。そして数秒待つとバナーがウィンドウ下部に表示されます。

f:id:mbaasdevrel:20180625094746p:plain

さらにタップするとインストールの確認が出ます。

f:id:mbaasdevrel:20180625094757p:plain

インストールするとホーム画面にアイコンが表示されます。これでインストールが完了しました。

f:id:mbaasdevrel:20180625094838p:plain

アプリを立ち上げる

アイコンをタップするとブラウザのアドレスバーもない、アプリ風のUIが表示されます。

f:id:mbaasdevrel:20180625094901p:plain

これまで作成した通り、オフラインでも利用できます。さらにオンラインに戻れば、データが自動的に同期されます。アプリ風に使えるのが分かるでしょう。

f:id:mbaasdevrel:20180625095008g:plain

まとめ

ここまででPWAに対応したmBaaSアプリの開発が完了です。Vue CLIを使わずともできますが、Service Workerを使ったキャッシュ周りで若干苦労するかも知れません。

mBaaS対応のPWAを作る場合にはキーの取り扱いにご注意ください。WebAssemblyによって隠蔽化できれば、セキュリティ的にも安心して開発できるでしょう。オフライン、キーの隠蔽化、PWA化といったポイントを押さえて、ぜひ皆さんのWebアプリをPWA対応させてみてください。もちろん、PWA対応していればMonacaでスマホアプリ化するのも容易でしょう。

ここまでのコードはNCMBMania/PWA-NCMB at v7にアップロードしてあります。実装時の参考にしてください。

中津川 篤司

中津川 篤司

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