PWA
theme_color と background_color（マニフェスト）
Web アプリマニフェストでは、theme_color がインストール済みアプリ周囲の OS UI（ステータスバーとタイトル領域）に色を付け、background_color はアプリが読み込まれる間、あなたの CSS が適用される前に表示されるスプラッシュ画面を塗ります。別々の瞬間のための別々のフィールドです。<meta name="theme-color"> タグは、通常のブラウザタブに対して theme_color の仕事をします。
二つの色、二つの瞬間
theme_color はアプリの実行中に表示されます。OS はそれを使ってウィンドウ周囲のクローム、たとえばステータスバーやタイトル領域に色を付けます。background_color はもっと早く表示されます。アプリがまだ読み込まれている間、あなたの CSS が一切適用される前に OS が描くスプラッシュ画面の平坦な色です。
background_color をおおよそページの背景に設定すると起動がシームレスに感じられ、既定のままにすると、アプリが描画される前に白いフラッシュが出ます。
どちらがどれか
| フィールド | いつ表示されるか | 何を塗るか |
|---|---|---|
| theme_color | アプリの実行中 | OS UI、ステータスバー |
| background_color | 起動中 | スプラッシュ画面 |
マニフェストの色に関するよくある質問
theme_color と background_color の違いは？
theme_color は実行中のインストール済みアプリ周囲の OS UI に色を付け、background_color はアプリがまだ起動している間に表示されるスプラッシュ画面の色です。別々の表示面、別々の瞬間です。
なぜ私の PWA のスプラッシュ画面が違う色なのですか？
その色はマニフェストの background_color から来ます。CSS が読み込まれる前の耳障りなフラッシュが出ないよう、アプリの背景に合わせて設定してください。
meta の theme-color タグは今も必要ですか？
はい、通常のブラウザタブのためには。マニフェストの theme_color はインストール済みアプリにのみ適用されます。メタタグとマニフェストの値を同期させておきましょう。