通过设置浏览器地址栏的主题，来匹配您的渐进式 Web 应用 (PWA) 的品牌颜色，提供更加身临其境的用户体验。
浏览器兼容性
在撰写本文时，基于 Android 的浏览器已支持为浏览器地址栏设置主题。请参阅浏览器兼容性了解更新信息。
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元标记，当用户将您的网站作为普通网页访问时，地址栏会带有品牌标识。将标签的content属性设置为任何有效的 CSS 颜色值：
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…在 Google对 Android 版 Chrome 39 中的theme-color的支持中了解有关theme-color元标记的更多信息。
第 2 步：将theme_color属性添加到您的 web 应用清单
Web 应用清单中的theme_color属性，可确保在用户从主屏幕启动您的 PWA 时对地址栏进行品牌化。与theme-color元标记不同，您只需要在清单中定义一次。将该属性设置为任何有效的 CSS 颜色值：
{
"theme_color": "#317EFB"
…
}浏览器会根据清单中的theme_color为应用的每个页面设置地址栏颜色。
资源
Updated on • 改进文章