PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。
今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。
利用できるブラウザについて
Web App Manifestはまだ仕様が確定しておらず、一部のWebブラウザでしか使えません。Google Chromeはデスクトップ（アイコンのみ）、スマートフォンともに利用できます。また、iOSのSafariでは11.3からサポートを開始しています。デスクトップで利用できるのはEdgeくらいのようです。
要件
技術的には以下が必須になります。
- HTTPSサイトである
- Service Workerを使っている
- マニフェストファイルを配置している
Service Workerを使っている
Service Workerを使ってオンライン上のファイルをキャッシュします。まずWebブラウザ側のJavaScriptでService Worker用のJavaScriptを読み込みます。
Service Worker用のJavaScriptではキャッシュしたいファイルを読み込みます。
マニフェストファイルを設置している
マニフェストファイルは manifest.json という名前で作られることが多いようです。このファイルをHTMLのheadタグ内で読み込みます。
内容は次のようになります。縦向きで、アプリのようなUIで表示されます。また、テーマカラーであったり、スプラッシュスクリーンの背景色なども指定できます。
これをWebサイト上に配置します。
サイトを表示する
Google Chromeの場合は5分以上置いてアクセスするとインストールバナーが表示されるとあります。しかし体感としてはもっと空けるか、Webブラウザの設定を変更した方が良いのではないかと思います。
表示して少し経つとバナーが表示されます。
こういう小さいバナーの場合もあります。
バナーをタップすると、インストールの確認が出ます。
インストールするとホーム画面上にアイコンが表示されます。
アプリと同じなので、コンテクストメニューがブックマークとは異なります。
アイコンをタップするとアプリが表示されます。アプリのアイコンで192pxのものを用意しておくとスプラッシュスクリーンが表示されるようです。Service Workerを使っていますのでオフラインでも使えます。
Web App Manifestはまだブラックボックスな動作もあります（バナーが表示されるタイミングや再表示させる方法など）。アプリを一度アンインストールした後、再度インストールする方法も明文化されていません。
とは言え、Webアプリをネイティブアプリ化できるのは面白い技術で、通常のアプリストアを頼らない配布も便利です。業務アプリなどでも使えそうです。