การกำหนดธีมแถบที่อยู่ของเบราว์เซอร์ให้ตรงกับสีแบรนด์ของ 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 จากหน้าจอหลัก
สิ่งที่แตกต่างจากเมตาแท็ก 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)