アドレスバーのテーマの色を設定しません
Progressive Web App（PWA）のブランドカラーに一致するようにブラウザのアドレスバーにテーマを設定すると、より没入型のユーザー体験が提供されます。
ブラウザの互換性 #
この記事を書いた時点で、ブラウザのアドレスバーのテーマ設定は Androidベースのブラウザでサポートされています。最新情報は、Browser compatibility (ブラウザの互換性) を参照してください。
Lighthouse によるテーマの色の監査が失敗する原因 #
Lighthouseは、アドレスバーにテーマを適用しないページにフラグを立てます。
LighthouseがページのHTMLでtheme-colorメタタグを検出せず、Webアプリマニフェストでtheme_colorプロパティを検出しない場合、監査は失敗します。
Lighthouseは、値が有効なCSSカラー値であるかどうかをテストしないことに注意してください。
アドレスバーのテーマの色を設定する方法 #
ステップ1：ブランド化したいすべてのページにtheme-colorメタタグを追加します #
theme-colorメタタグは、ユーザーが通常のWebページとしてサイトにアクセスしたときにアドレスバーがブランド化されるようにします。タグのcontent属性を任意の有効なCSSカラー値に設定してください。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…theme-colorメタタグの詳細については、GoogleのAndroid向けChrome39でのtheme-colorのサポートをご覧ください。
ステップ2： theme_colorプロパティをWebアプリマニフェストに追加します #
Webアプリマニフェストのtheme_colorプロパティにより、ユーザーがホーム画面からPWAを起動したときに、アドレスバーがブランド化されます。 theme-colorメタタグとは異なり、マニフェストでこれを定義する必要があるのは1回だけです。プロパティを任意の有効なCSSカラー値に設定してください。
{
"theme_color": "#317EFB"
…
}マニフェストのtheme_colorで、ブラウザが自分のアプリのすべてのページのアドレスバーの色を設定します。