กำหนดธีมแถบที่อยู่ของเบราว์เซอร์ให้เข้ากับสีของแบรนด์ ของ Progressive Web App (PWA) จะมอบประสบการณ์ของผู้ใช้ที่สมจริงยิ่งขึ้น
ความเข้ากันได้กับเบราว์เซอร์
ตั้งแต่เดือนธันวาคม 2022 เป็นต้นไป ระบบรองรับการกำหนดธีมแถบที่อยู่ของเบราว์เซอร์ใน เบราว์เซอร์ที่ใช้ Android, Google Chrome และ Microsoft Edge โปรดดู ความเข้ากันได้กับเบราว์เซอร์
วิธีที่การตรวจสอบสีธีมของ Lighthouse ล้มเหลว
Lighthouse ทำเครื่องหมายหน้าเว็บที่ไม่ได้ใช้ธีมกับแถบที่อยู่ ดังนี้
![การตรวจสอบ Lighthouse ที่แสดงแถบที่อยู่ไม่มีธีมตามสีของหน้าเว็บ](https://developer.chrome.com/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=19&hl=th)
การตรวจสอบจะไม่สำเร็จหาก Lighthouse ไม่พบเมตาแท็ก theme-color
ในหน้าเว็บ
HTML และพร็อพเพอร์ตี้ theme_color
ในไฟล์ Manifest ของเว็บแอป
โปรดทราบว่า Lighthouse ไม่ได้ทดสอบว่าค่าดังกล่าวเป็นค่าสี CSS ที่ถูกต้องหรือไม่
วิธีกำหนดสีธีมสำหรับแถบที่อยู่
ขั้นตอนที่ 1: เพิ่มเมตาแท็ก theme-color
ลงในทุกหน้าที่คุณต้องการสร้างแบรนด์
เมตาแท็ก theme-color
จะทำให้แถบที่อยู่มีแบรนด์เมื่อ
ผู้ใช้เข้าชมเว็บไซต์ของคุณในลักษณะหน้าเว็บปกติ
ตั้งค่าแอตทริบิวต์ content
ของแท็กเป็นค่าสี CSS ที่ถูกต้อง ดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
ดูข้อมูลเพิ่มเติมเกี่ยวกับเมตาแท็ก theme-color
ใน
รองรับ theme-color
ใน Chrome 39 สำหรับ Android
ขั้นตอนที่ 2: เพิ่มพร็อพเพอร์ตี้ theme_color
ลงในไฟล์ Manifest ของเว็บแอป
พร็อพเพอร์ตี้ theme_color
ในไฟล์ Manifest ของเว็บแอปช่วยให้แน่ใจว่าที่อยู่
จะมีการแสดงแบรนด์เมื่อผู้ใช้เปิด PWA จากหน้าจอหลัก
สิ่งที่แตกต่างจากเมตาแท็ก theme-color
คุณเพียงต้องใช้
เพื่อกำหนดสิ่งนี้เพียงครั้งเดียวในไฟล์ Manifest
ตั้งค่าคุณสมบัติเป็นค่าสี 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)