通过设置浏览器地址栏的主题,来匹配您的渐进式 Web 应用 (PWA) 的品牌颜色,提供更加身临其境的用户体验。
浏览器兼容性
在撰写本文时,基于 Android 的浏览器已支持为浏览器地址栏设置主题。请参阅浏览器兼容性了解更新信息。
Lighthouse 主题颜色审计失败的原因
Lighthouse 会标记出没有为地址栏设置主题的页面:
![Lighthouse 审计显示地址栏的颜色与页面颜色不匹配](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YadFSuw8denjl1hhnvFs.png?auto=format)
如果 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).
如何为地址栏设置主题颜色
theme-color
元标记添加到您想要品牌化的每个页面
第 1 步:将通过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
元标记的更多信息。
theme_color
属性添加到您的 web 应用清单
第 2 步:将Web 应用清单中的theme_color
属性,可确保在用户从主屏幕启动您的 PWA 时对地址栏进行品牌化。与theme-color
元标记不同,您只需要在清单中定义一次。将该属性设置为任何有效的 CSS 颜色值:
{
"theme_color": "#317EFB"
…
}
浏览器会根据清单中的theme_color
为应用的每个页面设置地址栏颜色。
资源
Updated on • 改进文章