Web App Manifest は、Webアプリをアプリらしく起動・表示するための情報をブラウザに伝えるJSONファイルです。
PWA では、アプリ名、短い名前、アイコン、起動URL、表示モード、テーマカラーなどを定義するためによく使われます。
初心者向けに言うと、Web App Manifest は このWebアプリを端末に追加したとき、どんな名前・アイコン・見た目で起動するかをまとめた設定ファイル です。
Manifestが雑だと、ホーム画面に追加したときの見た目も雑になりやすいです。
どんな情報を書くか
Web App Manifestでは、たとえば次のような情報を指定します。
- アプリ名
- 短いアプリ名
- 起動URL
- アイコン画像
- 表示モード
- テーマカラー
- 背景色
代表的には、manifest.webmanifest や site.webmanifest のようなファイル名で公開し、HTMLからリンクします。
アイコンサイズが足りなかったり、起動URLがずれていたりすると、インストール体験が悪くなります。
注意点
Web App Manifestは、用意しただけでPWAが完成するものではありません。
ホーム画面追加やアプリらしい表示には関係しますが、オフライン対応やキャッシュ制御には Service Worker が関わります。
また、アイコン、背景色、アプリ名はユーザーの第一印象に直結します。
特にスマホでは、アイコンがぼやける、名前が長すぎて切れる、起動時の色がサイトの雰囲気と合わない、といった小さな違和感が残りやすいです。
実務では、Manifestを作ったあとに、実際にスマホのホーム画面へ追加して確認するのが大事です。
PWA全体の考え方は、PWAとは？できること・向いている場面・実装時の注意点を初心者向けに解説 の記事でまとめています。