Sắp xếp thanh địa chỉ của trình duyệt theo giao diện để phù hợp với màu thương hiệu của Ứng dụng web tiến bộ (PWA) 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, tuỳ chỉnh giao diện cho thanh địa chỉ của trình duyệt sẽ được hỗ trợ trên Các trình duyệt trên Android, Google Chrome và Microsoft Edge. Xem Khả năng tương thích với trình duyệt để được cập nhật.
Cách không kiểm tra được màu sắc giao diện Lighthouse
Lighthouse gắn cờ các trang không áp dụng giao diện 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 thẻ
HTML và thuộc tính theme_color trong tệp kê khai ứng dụng web.
Lưu ý Lighthouse không kiểm tra xem các 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 mà bạn muốn gắn 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 vào 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 giá trị màu CSS bất kỳ hợp lệ:
<!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
Hỗ trợ 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 địa chỉ
thanh sẽ đượ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 URL này một lần, 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)