アドレスバーのテーマの色を設定しません

公開日 更新日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

Progressive Web App(PWA)のブランドカラーに一致するようにブラウザのアドレスバーにテーマを設定すると、より没入型のユーザー体験が提供されます。

ブラウザの互換性

この記事を書いた時点で、ブラウザのアドレスバーのテーマ設定は Androidベースのブラウザでサポートされています。最新情報は、Browser compatibility (ブラウザの互換性) を参照してください。

Lighthouse によるテーマの色の監査が失敗する原因

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

リソース

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.