לא מגדיר צבע עיצוב עבור סרגל הכתובות

שינוי העיצוב של סרגל הכתובות בדפדפן כך שיתאים לצבעי המותג של 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 זמין תמיכה ב-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)