アドレスバーのテーマの色を設定しません
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
で、ブラウザが自分のアプリのすべてのページのアドレスバーの色を設定します。