Ihrer Progressive Web-App ein Apple Touch-Symbol hinzufügen

Kayce Basques

Safari für iOS-Nutzer können progressive Web-Apps (PWAs) manuell ihren Startbildschirm. Das Symbol, das auf dem iOS-Startbildschirm angezeigt wird, wenn eine PWA hinzugefügt wird, heißt das Apple Touch-Symbol. In diesem Codelab erfahren Sie, wie Sie einer PWA ein Apple Touch-Symbol hinzufügen. Es wird davon ausgegangen, wenn Sie Zugriff auf ein iOS-Gerät haben.

Messen

Öffnen Sie die Beispiel-App in einem neuen Tab:

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.

  2. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

  3. Notieren Sie sich die URL Ihrer Beispiel-App. Sie sollte in etwa https://example.glitch.me sein.

Führen Sie für Ihre Beispiel-App in den Chrome-Entwicklertools eine Lighthouse-PWA-Prüfung durch:

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Lighthouse.
  3. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Progressive Web-App angeklickt ist.
  4. Klicken Sie auf die Schaltfläche Bericht erstellen.

Lighthouse meldet im Abschnitt PWA-Optimiert, dass die Beispiel-App keinen gültigen Apple Touch-Symbol:

<ph type="x-smartling-placeholder">
</ph> Kein gültiges Apple-Touch-Symbol vorhanden <ph type="x-smartling-placeholder">
</ph> Der Audit Bietet kein gültiges Apple-Touch-Symbol

Beispiel-App zu einem iOS-Startbildschirm hinzufügen

Um zu zeigen, wie ein Apple Touch-Symbol eine bessere Nutzererfahrung bietet, versuchen Sie zuerst, die Beispiel-App auf den Startbildschirm Ihres iOS-Geräts, wenn kein Apple Touch-Symbol angegeben wurde.

  1. Öffnen Sie Safari für iOS.
  2. Öffnen Sie die URL Ihrer Beispiel-App. Dies ist die URL https://example.glitch.me, die Sie bereits erwähnt.
  3. Tippe auf Teilen Apple Share Button > Zum Startbildschirm hinzufügen. Du musst wahrscheinlich nach links wischen, um diese Option zu sehen.
  4. Tippen Sie auf Hinzufügen.

Da für die Website kein Apple Touch-Symbol angegeben wurde, generiert iOS nur ein Symbol für die Website vom Inhalt der Seite entfernt.

<ph type="x-smartling-placeholder">
</ph> Ein automatisch generiertes Startbildschirmsymbol. <ph type="x-smartling-placeholder">
</ph> Ein automatisch generiertes Startbildschirmsymbol.

Apple Touch-Symbol zur Beispiel-App hinzufügen

  • Entfernen Sie das Kommentarzeichen <link rel="apple-touch-icon"> am Ende von <head> von 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>
  …

Beispiel-App wieder einem iOS-Startbildschirm hinzufügen

  • Versuchen Sie noch einmal, die Beispiel-App einem iOS-Startbildschirm hinzuzufügen. Dieses Mal wird ein passendes Symbol für auf der Website. Wenn Sie die Seite noch einmal mit Lighthouse prüfen, werden Sie feststellen, Wenn kein gültiger apple-touch-icon-Audit vorliegt, ist die Prüfung jetzt erfolgreich.
<ph type="x-smartling-placeholder">
</ph> Das Apple Touch-Symbol. <ph type="x-smartling-placeholder">
</ph> Das Apple Touch-Symbol.