Manifest.json のメリット
Apple、Google、Microsoft は今も Web App Manifest に依存し続けています。一度きちんと埋めれば、アイコン・theme color・アナリティクスがあらゆる場所で収まります。
manifest で得られるもの
| メリット | 得られる内容 |
|---|---|
| ネイティブに感じられるインストールプロンプト | Chrome、Edge、Android が「アプリをインストール」バナーを表示するのは、manifest が icons、name、start_url、display モードを宣言している場合のみです。 |
| オフライン対応のスプラッシュスクリーン | manifest はスプラッシュ画像、背景色、maskable アイコンを制御できるので、オフライン起動が意図された見た目になります。 |
| あらゆる場所で一貫したメタデータ | 検索エンジンやソーシャルプラットフォームが manifest を調べると、あなたが整えたのと同じタイトル、theme color、アイコンを取得します。 |
現代的な manifest の解剖学
これらは、Lighthouse と Android がアイコンを表示する前に実際に調べるフィールドです。
| フィールド | 存在する理由 | プロのヒント |
|---|---|---|
| name & short_name | インストールバナーと、ランチャーのラベルテキストを制御します。 | Android のホーム画面で切り詰められないよう、short_name は 12 文字未満に保ちます。 |
| icons[] | どの PNG がインストール面、スプラッシュスクリーン、maskable ロゴを担うかを定義します。 | 最良のカバレッジのため、192・256・384・512 のサイズを purpose: "any maskable" とともに含めます。 |
| start_url | ユーザーが dock から起動したときに、どのルートが開くかを決めます。 | ?source=pwa を付加し、サーバー側で読み取ってアナリティクスを調整します。 |
| display | standalone、fullscreen、minimal-ui の各体験を切り替えます。 | ブランドの chrome に合わせるため、standalone と theme_color を組み合わせて使います。 |
manifest アイコンはどこから始まるか
スターター JSON
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}このファイルを /public/manifest.json に置いておけば、新しいセットをエクスポートするたびに Favicon Tools 内のジェネレーターがアイコン配列を最新に保ちます。
リリースチェックリスト
リブランディング後も manifest が正確なままであるよう、これをデプロイのダッシュボードに貼っておきましょう。
- 1
manifest を配信してリンクする
manifest を /manifest.json で配信し、<link rel="manifest" href="/manifest.json"> を通じて公開します。
- 2
すべてのアイコンが解決されるか確認する
参照しているすべてのアイコンが実際に CDN 上に存在し、宣言したサイズと一致していることを確認します。
- 3
ブラウザの chrome をそろえる
theme-color と background_color のメタタグを追加して、ブラウザの chrome をアイコンのパレットにそろえます。
- 4
リリース前に lint と監査を行う
manifest の欠落フィールドを検出するため、リリースごとに npx next lint と Lighthouse の PWA 監査を実行します。
- 5
インストール済みアプリのスコープを定める
インストール可能なショートカットが自分のドメイン内にとどまるよう、manifest の scope を主要なアプリ URL に向けます。
更新を自動化する
manifest のテンプレートを、アイコンの設定の隣に保管しましょう。CI が新しい favicon セットをビルドしたら、JSON を更新して一緒に再デプロイします。
ネイティブアプリのようにテストする
自分のサイトを iOS、Android、デスクトップ版 Chrome にインストールしてみましょう。スプラッシュスクリーン、アイコンのマスク、theme color が manifest の値と一致することを確認します。
QA チームはシンプルなチェックリストを好みます。インストールする、オフラインで起動する、アイコンの品質を検査する、アナリティクスのパラメータを確認する。