PWAの manifest.json で実現できること

PWA（Progressive Web App）では manifest.json というファイルが肝になります。このファイルの有無と Service Worker 、そして manifest.json の記述内容によってアプリとしてインストールできるようになります。

今回は manifest.json の中でも、ぜひ知っておきたい設定を紹介します。

テーマカラーが指定できる

アドレスバーの部分をブランドに合わせたカラーリングにできます。

metaタグで <meta name="theme-color" content="#317EFB"/> といった形で指定するか、 manifest.json で theme_color を指定します。

最初に表示するURLを指定できる

manifest.json にて start_url として最初に表示するURLを指定できます。例えば index.html?pwa=true として、JavaScriptでパラメータを読み込むことで、PWA専用の画面構成に作り替えるといった操作もできます。

起動時のスプラッシュスクリーンが指定できる

manifest.json にて background_color を指定し、かつ 512x512pxのアイコン（PNG）を指定することで、起動時にスプラッシュスクリーンが表示できます。

ホーム画面にアイコンを設置できる

manifest.json の icons にて192x192pxのアイコンを用意するのがベストとされています。Webサイトをアプリのようにインストールすると、その際のアイコンとして使われます。

背景色が指定できる

manifest.json の background_color にてコンテンツが表示されるまでの背景色を指定できます。起動時にはスプラッシュスクリーンが表示され、その後最初の表示が行われるまでの画面遷移がスムーズになります。

アプリ名が決められる

manifest.json の name にてアプリとしてインストールされた際の名前を指定できます。なお、iOSでは名前はデフォルトであり、ユーザが変更できます。 name が長い場合には short_name を代替として利用します。

起動方法を指定できる

manifest.json の display にてアプリの立ち上げ方を決められます。 fullscreen 、 standalone 、 browser の3パターンがあります。

manifest.json の設定によって、インストールされる際の細かな挙動を変更できます。よりアプリらしく、よりユーザビリティの高い仕組みを提供するためにカスタマイズしてください。