根據品牌顏色設定瀏覽器的網址列 漸進式網頁應用程式 (PWA) 中,可提供更身歷其境的使用者體驗。
瀏覽器相容性
自 2022 年 12 月起,支援在瀏覽器網址列輸入主題, Android 瀏覽器、Google Chrome 和 Microsoft Edge詳情請見 瀏覽器相容性 。
Lighthouse 主題色彩稽核失敗方式
Lighthouse 標記未在網址列套用主題的網頁:
![顯示網址列並非根據網頁顏色主題的 Lighthouse 稽核](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=19&hl=zh-tw)
如果 Lighthouse 在網頁的theme-color
網頁應用程式資訊清單中的 HTML 和 theme_color
屬性。
請注意,Lighthouse 不會測試值是否為有效的 CSS 顏色值。
如何設定網址列的主題顏色
步驟 1:在要設定品牌的每個網頁上加入 theme-color
中繼標記
theme-color
中繼標記可確保網址列在加上品牌資訊時
使用者以一般網頁的形式造訪您的網站。
將標記的 content
屬性設為任何有效的 CSS 顏色值:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
進一步瞭解 Google 的 theme-color
中繼標記
支援 Android 版 Chrome 39 中的 theme-color
。
步驟 2:將 theme_color
屬性新增至網頁應用程式資訊清單
網頁應用程式資訊清單中的 theme_color
屬性可確保位址
當使用者從主畫面啟動 PWA 時,就會顯示為品牌標誌。
與 theme-color
中繼標記不同,您只需要
在資訊清單中定義這個值一次
將屬性設為任何有效的 CSS 顏色值:
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)