PWA
Web アプリマニフェスト（manifest.json）
Web アプリマニフェストは、ページの head からリンクされる JSON ファイル（通常は manifest.json か site.webmanifest）で、サイトがホーム画面やランチャーにインストールされたときにどう振る舞うべきかをブラウザに伝えます。アプリ名、アイコンセット、テーマ色と背景色、表示モードを供給します。これが無いと、ブラウザはサイトを PWA としてインストールすることを提案しません。
マニフェストが宣言するもの
マニフェストは、<link rel="manifest"> でリンクされる小さな JSON ドキュメントです。ユーザーがサイトをインストールすると、ブラウザはそれを読んでアプリに名前を付け、アイコンを選び、スプラッシュ画面に色を付け、どれだけのブラウザクロームを表示するかを決めます。
これはインストール可能性とホーム画面の振る舞いにのみ関わります。通常のブラウザタブがそれを必要とすることはありません（ファビコンの link タグがそれをカバーします）。だからこそ、マニフェストを一切持たないサイトも数多くあるのです。
最小構成のマニフェスト
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111111",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}主要なフィールド
| フィールド | 目的 |
|---|---|
| name / short_name | フルネームとホーム画面用のラベル |
| icons | インストールとホーム画面のアイコンセット |
| display | インストール済みアプリがどれだけブラウザ UI を見せるか |
| theme_color | アプリ周囲の OS UI に色を付ける |
| background_color | 起動時のスプラッシュ画面の色 |
| start_url | インストール済みアプリが開くページ |
Web アプリマニフェストに関するよくある質問
Web アプリマニフェストは必要ですか？
サイトを PWA としてインストール可能にしたい、またはホーム画面での見え方を制御したい場合にのみ必要です。ファビコンだけの普通のウェブサイトには不要です。
manifest.json と site.webmanifest の違いは？
ファイル名以外に違いはありません。どちらも同じ Web アプリマニフェストで、ブラウザは <link rel="manifest"> が指すファイルを使います。
マニフェストはどこでリンクしますか？
ページの head で、<link rel="manifest" href="/site.webmanifest"> です。インストール可能にすべきすべてのページに、リンクを 1 つ。