Skip to content
学習する 測定する ブログ Case studies 概要
このページ内
  • Lighthouse によるテーマの色の監査が失敗する原因
  • アドレスバーのテーマの色を設定する方法
    • ステップ1:ブランド化したいすべてのページにtheme-colorメタタグを追加します
    • ステップ2: theme_colorプロパティをWebアプリマニフェストに追加します
  • リソース

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

May 4, 2019 — 更新済み Jun 17, 2020
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: PWA の監査
このページ内
  • Lighthouse によるテーマの色の監査が失敗する原因
  • アドレスバーのテーマの色を設定する方法
    • ステップ1:ブランド化したいすべてのページにtheme-colorメタタグを追加します
    • ステップ2: theme_colorプロパティをWebアプリマニフェストに追加します
  • リソース

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

リソース #

  • 監査のアドレスバーのテーマカラーを設定しない監査用のソースコード
  • Webアプリマニフェストを追加する
  • Android向けのChrome 39でtheme-color用のサポート
最終更新: Jun 17, 2020 — 記事を改善する
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.