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

Kayce Basques

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

מדידה

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

  1. לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.

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

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

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

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

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

הדף לא מכיל קובץ apple-touch-icon תקין
בדיקת הדף לא מכיל ‎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.