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

Kayce Basques

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

מדידה

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

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

  2. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.

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

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

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

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

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

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

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

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

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

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

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

  • בטל את התגובה לתג <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.