PWAの基礎知識（その6）「Web App Manifest作成の便利テクニック」

PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Web App Manifestを作る時に便利なテクニックを紹介します。

Web App Manifestとは？

Web App ManifestはWebアプリをスマートフォンアプリのようにインストールできる技術です。アプリストアを経由せずに配布できるのが魅力です。

検証

Web App Manifestではmanifest.jsonというファイルを作成しますが、これが正しく作れているかどうかが確認しづらいという問題があります。そこで使ってみて欲しいのがGoogle Chromeの開発者ツールです。アプリケーションタブにManifestという項目が追加されています。これを見ると設定内容が正しく認識されているか一目で分かります。

また、Add to HomescreenというリンクをクリックしてChromeアプリにすることもできます。これはほぼブックマークですが、Chromeのブックマークバーよりアプリと言うリンクをクリックすると一覧で表示できます。

さらに詳しい検証

もっと詳しい情報を知ったり、 Web App Manifestに限らずPWAが正しく設定できているか確認するためにはLighthouseという機能拡張が便利です。PWAにしたいWebサイトを表示した状態で実行すると、レポート生成してくれます。

主なチェックポイントとしては次の通りです。

• Service Workerを登録しているか
• オフラインでも200のレスポンスを返すか
• HTTPSを使っているか
• スプラッシュスクリーンが使えるか
• アドレスバーの色設定が行われているか
• HTTPへのアクセスがHTTPSにリダイレクトされるか
• 3G回線でも十分に速いか
• メタタグでviewport設定を行っているか

Google Chromeの設定

開発中はインストールバナーが表示されるタイミングが非常に分かりづらく、何度も再読込を繰り返すことになるかと思います。そこでAndroidのGoogle Chromeにて、フラグの設定をします。 chroke://flags を表示して、Bypass user engagement checksを有効にします。これでバナーがすぐに出るようになります。

なお、アプリをインストールした後に削除し、再度バナーを出す場合にはアプリのデータをすべて削除し、再度Bypass user engagement checksを有効にすると表示されるようです。

Web App Manifestはまだ対応しているブラウザが少なく、利用されるとしてもAndroidがメインデバイスになるかと思います（Safariはまだ中途半端にしか対応していないため）。まだ機能的に不十分な感はありますが、幾つかのテクニックを駆使して効率的な開発に努めてください。