Việc sắp xếp giao diện cho thanh địa chỉ của trình duyệt cho khớp với màu thương hiệu của Ứng dụng web tiến bộ (PWA) sẽ mang lại trải nghiệm người dùng sống động hơn.
Khả năng tương thích với trình duyệt
Kể từ tháng 12 năm 2022, tính năng tuỳ chỉnh giao diện cho thanh địa chỉ của trình duyệt được hỗ trợ trên các trình duyệt dựa trên Android, Google Chrome và Microsoft Edge. Hãy xem phần Khả năng tương thích của trình duyệt để biết thông tin cập nhật.
Cách quy trình kiểm tra màu giao diện Lighthouse không thành công
Lighthouse gắn cờ các trang không áp dụng chủ đề cho thanh địa chỉ:
![Kiểm tra Lighthouse cho thấy thanh địa chỉ không theo chủ đề theo màu của trang](https://developer.chrome.com/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=5&hl=vi)
Quá trình kiểm tra sẽ không thành công nếu Lighthouse không tìm thấy thẻ meta theme-color
trong HTML của trang và thuộc tính theme_color
trong tệp kê khai ứng dụng web.
Lưu ý rằng Lighthouse không kiểm tra xem giá trị có phải là giá trị màu CSS hợp lệ hay không.
Cách đặt màu giao diện cho thanh địa chỉ
Bước 1: Thêm thẻ meta theme-color
vào mọi trang bạn muốn xây dựng thương hiệu
Thẻ meta theme-color
đảm bảo rằng thanh địa chỉ được gắn thương hiệu khi người dùng truy cập trang web của bạn như một trang web thông thường.
Đặt thuộc tính content
của thẻ thành bất kỳ giá trị màu CSS hợp lệ nào:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Tìm hiểu thêm về thẻ meta theme-color
trong phần Hỗ trợ của Google dành cho theme-color
trong Chrome 39 dành cho Android.
Bước 2: Thêm thuộc tính theme_color
vào tệp kê khai ứng dụng web
Thuộc tính theme_color
trong tệp kê khai ứng dụng web của bạn đảm bảo rằng thanh địa chỉ được gắn thương hiệu khi người dùng chạy PWA của bạn từ màn hình chính.
Không giống như thẻ meta theme-color
, bạn chỉ cần xác định một lần duy nhất trong tệp kê khai.
Đặt thuộc tính thành bất kỳ giá trị màu CSS hợp lệ nào:
{
"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)