כשמשתמשי iOS Safari מוסיפים Progressive Web Apps (PWA) למסכי הבית שלהם, הסמל שמופיע נקרא סמל המגע של Apple.
כדי לציין באיזה סמל האפליקציה צריכה להשתמש, אפשר לכלול את התג <link rel="apple-touch-icon" href="/example.png">
ב-<head>
של הדף. אם אין בדף את תג הקישור הזה, מערכת iOS יוצרת סמל על ידי צילום מסך של תוכן הדף. במילים אחרות, מתן הוראה ל-iOS להוריד סמל יוצר חוויית משתמש מלוטשת יותר.
איך הבדיקה של סמל המגע של Apple ב-Lighthouse נכשלה
Lighthouse מסמן דפים ללא תג <link rel="apple-touch-icon" href="/example.png">
ב-<head>
:
![לא מוצג סמל apple-touch-icon חוקי](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png?authuser=2&hl=he)
מערכת Lighthouse לא בודקת אם הסמל קיים בפועל או אם הסמל בגודל הנכון.
איך מוסיפים סמל Apple Touch
הוסף
<link rel="apple-touch-icon" href="/example.png">
ל<head>
של הדף שלך:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
מחליפים את
/example.png
עם הנתיב עצמו לסמל.
כדי לספק חוויית משתמש טובה, חשוב לוודא את הפרטים הבאים:
- הסמל הוא 180x180 פיקסלים או 192x192 פיקסלים
- הנתיב שצוין לסמל חוקי
- רקע הסמל לא שקוף