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

Kayce Basques

Nutzer von Safari für iOS können ihrem Startbildschirm manuell Progressive Web-Apps (PWAs) hinzufügen. Das Symbol, das beim Hinzufügen einer PWA auf dem iOS-Startbildschirm erscheint, heißt Apple-Touchsymbol. In diesem Codelab erfahren Sie, wie Sie einer PWA ein Apple Touch-Symbol hinzufügen. Dabei wird davon ausgegangen, dass Sie Zugriff auf ein iOS-Gerät haben.

Messen

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

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

  2. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

  3. Notieren Sie sich die URL Ihrer Beispiel-App. Sie hat in etwa folgendes Format: https://example.glitch.me.

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

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem 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.

Im Bereich PWA optimiert gibt Lighthouse an, dass die Beispiel-App kein gültiges Apple Touch-Symbol enthält.

Stellt kein gültiges Apple-Touch-Symbol bereit
Die Prüfung Bietet kein gültiges Apple-Touch-Symbol

Beispiel-App zu einem iOS-Startbildschirm hinzufügen

Wenn Sie zeigen möchten, wie ein Apple Touch-Symbol die Nutzerfreundlichkeit verbessert, versuchen Sie zuerst, die Beispiel-App zum Startbildschirm Ihres iOS-Geräts hinzuzufügen, wenn kein Apple Touch-Symbol angegeben wurde.

  1. Öffnen Sie Safari für iOS.
  2. Öffnen Sie die URL Ihrer Beispielanwendung. Dies ist die URL wie https://example.glitch.me, die Sie zuvor notiert haben.
  3. Tippen Sie auf Teilen Apple-Schaltfläche „Teilen“ > Zum Startbildschirm hinzufügen. In der Regel müssen Sie 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 einfach aus dem Inhalt der Seite ein Symbol für die Website.

Ein automatisch generiertes Startbildschirmsymbol.
Ein automatisch generiertes Symbol für den Startbildschirm.

Apple Touch-Symbol zur Beispiel-App hinzufügen

  • Entfernen Sie das Kommentarzeichen des <link rel="apple-touch-icon">-Tags 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 zu 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 die Website generiert. Wenn Sie die Seite noch einmal mit Lighthouse prüfen, werden Sie außerdem feststellen, dass die Prüfung Bietet kein gültiges apple-touch-icon jetzt besteht.
Das Apple Touch-Symbol
Das Apple Touch-Symbol.