ブラウザが受け入れるmanifest.jsonを書く

PWAのインストール、タスクバーのアイコン、スプラッシュの色——すべて1つのJSONで決まり、項目が壊れると黙って無視されます。

このガイドで使う道具

やりたいこと

Webアプリのmanifestは、アプリの名前・アイコン・色・表示モードをブラウザに伝えます。「ホーム画面に追加」の裏側にある仕組みです。アイコンサイズや色のhexが壊れても、その項目が黙って落ちるだけでエラーは出ません。

項目を埋める

nameとshort_name、start_url(「/」のようなパスかhttps URL)、displayモード(アプリらしい既定はstandalone)、テーマ色・背景色を#rrggbbで、アイコンはパスとサイズで指定します。192と512pxはどのプラットフォームも要求する組み合わせです。

具体例

name「Kitchen Timer」、short_name「Timer」、start_url「/」、display standalone、アイコン /icon-192.png 192x192 image/png——生成されたmanifest.jsonはindex.htmlの隣に置いて<link rel="manifest">で参照するだけです。

対応範囲

標準項目の有効なJSONを書くだけです。アイコンやスクリーンショットは実ファイルも必要で、存在しないPNGを指すmanifestはアイコンなしでインストールされます。構造の検証であって、Lighthouse監査ではありません。