การกำหนดธีมแถบที่อยู่ของเบราว์เซอร์ให้ตรงกับสีของแบรนด์ของ Progressive Web App (PWA) จะทำให้ได้รับประสบการณ์ที่สมจริงยิ่งขึ้น
ความเข้ากันได้กับเบราว์เซอร์
ตั้งแต่เดือนธันวาคม 2022 เป็นต้นไป เบราว์เซอร์ที่ใช้ Android, Google Chrome และ Microsoft Edge จะรองรับธีมในแถบที่อยู่ของเบราว์เซอร์ โปรดดูความเข้ากันได้ของเบราว์เซอร์สำหรับการอัปเดต
การตรวจสอบสีธีม Lighthouse ล้มเหลวอย่างไร
Lighthouseจะทำเครื่องหมายหน้าที่ไม่ได้ใช้ธีมกับแถบที่อยู่:
การตรวจสอบจะไม่สำเร็จหาก 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 ของ Google
ขั้นตอนที่ 2: เพิ่มพร็อพเพอร์ตี้ theme_color ลงในไฟล์ Manifest ของเว็บแอป
พร็อพเพอร์ตี้ theme_color ในไฟล์ Manifest ของเว็บแอปช่วยให้มั่นใจว่าแถบที่อยู่จะแสดงแบรนด์เมื่อผู้ใช้เปิด PWA จากหน้าจอหลัก
คุณจะกำหนดค่านี้เพียงครั้งเดียวในไฟล์ Manifest ซึ่งต่างจากเมตาแท็ก 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)