הוספת סמל מגע של Apple ל-Progressive Web App

Kayce Basques

משתמשי Safari ל-iOS יכולים להוסיף ידנית Progressive Web Apps (PWA) אל במסך הבית שלהם. הסמל שמופיע במסך הבית של iOS כשמוסיפים PWA, נקרא סמל המגע של Apple. ה-Codelab הזה מראה איך להוסיף סמל Apple Touch ל-PWA. ההנחה היא שיש לך גישה למכשיר iOS.

מדידה

פותחים את האפליקציה לדוגמה בכרטיסייה חדשה:

  1. לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.

  2. כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.

  3. שימו לב לכתובת ה-URL של האפליקציה לדוגמה. זה יהיה משהו כמו https://example.glitch.me.

מריצים בדיקת PWA של Lighthouse על האפליקציה לדוגמה בכלי הפיתוח ל-Chrome:

  1. מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  2. לוחצים על הכרטיסייה Lighthouse.
  3. מוודאים שתיבת הסימון Progressive Web App מסומנת ברשימה קטגוריות.
  4. לוחצים על הלחצן יצירת דוח.

בקטע אופטימיזציה מסוג PWA, מופיע דיווח מ-Lighthouse על כך שהאפליקציה לדוגמה לא מספקת ערך תקין של סמל המגע של Apple.

הוא לא מספק סמל מגע חוקי של אפל
הביקורת לא מספקת ביקורת חוקית של apple-touch-icon

איך מוסיפים את האפליקציה לדוגמה למסך הבית ב-iOS

כדי להראות איך סמל המגע של Apple מספק חוויית משתמש מלוטשת יותר, כדאי לנסות קודם להוסיף האפליקציה לדוגמה במסך הבית של מכשיר ה-iOS שלך כשלא צוין סמל מגע של Apple.

  1. פותחים את Safari ל-iOS.
  2. פותחים את כתובת ה-URL של האפליקציה לדוגמה. זוהי כתובת ה-URL כמו https://example.glitch.me ש שציינו קודם.
  3. מקישים על שיתוף לחצן השיתוף של Apple > הוספה למסך הבית. כדי לראות את האפשרות הזו, סביר להניח שתצטרכו להחליק ימינה.
  4. מקישים על הוספה.

מאחר שבאתר לא צוין סמל מגע של Apple, מערכת iOS רק יוצרת סמל לאתר מתוכן הדף.

סמל של מסך הבית שנוצר באופן אוטומטי.
סמל של מסך הבית שנוצר באופן אוטומטי.

הוספת סמל מגע של Apple לאפליקציה לדוגמה

  • ביטול התגובה של התג <link rel="apple-touch-icon"> בחלק התחתון של <head> של index.html.
    …
    <link rel="stylesheet" href="/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

הוספה של האפליקציה לדוגמה למסך הבית ב-iOS (שוב)

  • אפשר לנסות שוב להוסיף את האפליקציה לדוגמה למסך הבית של iOS. הפעם, נוצר סמל מתאים עבור באתר. אם בודקים את הדף שוב באמצעות Lighthouse אפשר לראות גם לא כולל אישור תקין של ביקורת apple-touch-icon.
סמל המגע של Apple.
סמל המגע של Apple.