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ỉ:
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)