עיצוב של סרגל הכתובות בדפדפן כך שיתאים לצבעי המותג של Progressive Web App (PWA) מספק חוויית משתמש סוחפת יותר.
תאימות דפדפן
החל מדצמבר 2022, הוספת סרגל הכתובות לדפדפן נתמכת בדפדפנים מבוססי-Android, ב-Google Chrome וב-Microsoft Edge. לעדכונים, קראו את המאמר תאימות דפדפן.
איך בדיקת צבע העיצוב של Lighthouse נכשלה
Lighthouse מסמן דפים שלא חלים עליהם עיצוב בסרגל הכתובות:
הבדיקה נכשלת אם מערכת Lighthouse לא מוצאת מטא תג theme-color ב-HTML של הדף ובנכס theme_color במניפסט של אפליקציית האינטרנט.
הערה: מערכת Lighthouse לא בודקת אם הערכים הם ערכי צבעים חוקיים של CSS.
איך להגדיר צבע עיצוב בסרגל הכתובות
שלב 1: מוסיפים מטא תג theme-color לכל דף שרוצים למתג
המטא תג theme-color מבטיח ששורת הכתובת תהיה ממותגת כשמשתמש מבקר באתר כדף אינטרנט רגיל.
מגדירים את המאפיין content של התג לכל ערך חוקי של צבע CSS:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
מידע נוסף על המטא תג theme-color זמין בתמיכה של Google ב-theme-color ב-Chrome 39 ל-Android.
שלב 2: מוסיפים את הנכס theme_color לקובץ המניפסט של אפליקציית האינטרנט
המאפיין theme_color בקובץ המניפסט של אפליקציית האינטרנט מבטיח שסרגל הכתובות ממותג כשמשתמש מפעיל את ה-PWA ממסך הבית.
בניגוד למטא תג 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)