Progressive Web App（PWA）のブランドカラーに一致するようにブラウザのアドレスバーにテーマを設定すると、より没入型のユーザー体験が提供されます。
ブラウザの互換性
この記事を書いた時点で、ブラウザのアドレスバーのテーマ設定は Androidベースのブラウザでサポートされています。最新情報は、Browser compatibility (ブラウザの互換性) を参照してください。
Lighthouse によるテーマの色の監査が失敗する原因
Lighthouseは、アドレスバーにテーマを適用しないページにフラグを立てます。
LighthouseがページのHTMLでtheme-colorメタタグを検出せず、Webアプリマニフェストでtheme_colorプロパティを検出しない場合、監査は失敗します。
Lighthouseは、値が有効なCSSカラー値であるかどうかをテストしないことに注意してください。
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
アドレスバーのテーマの色を設定する方法
ステップ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で、ブラウザが自分のアプリのすべてのページのアドレスバーの色を設定します。
リソース
更新日 • 記事を改善する