Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

マニフェストで背景色を指定する

監査が重要である理由

ユーザーのホーム画面からウェブアプリを起動する場合、アプリの読み込み中に、ブラウザは background_color プロパティを使用してブラウザの背景に色を付けます。 この処理によって、アプリを起動してからアプリのコンテンツが読み込まれるまでの画面遷移がスムーズに見えます。

監査に合格する方法

ウェブアプリ マニフェストに background_color プロパティを追加します。値には、有効な CSS 色を指定できます。

{
  ...
  "background_color": "cornflowerblue",
  ...
}

アプリに "Add to Homescreen" 機能を適切に実装して、テストを実施する方法については、マニフェストを使用するで紹介しているガイドをご覧ください。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

マニフェストに background_color プロパティが含まれていれば、監査に合格します。 なお、Lighthouse で取得するマニフェストは、Chrome がページで使用するマニフェストとは別のファイルであるため、正確な結果が出ない場合があります。 また、Lighthouse では、値が有効な CSS 色であることは確認しません。