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

Kayce Basques
Kayce Basques
X GitHub

Safari für iOS-Nutzer können progressive Web-Apps (PWAs) manuell zu ihrem Startbildschirm hinzufügen. Das Symbol, das auf dem iOS-Startbildschirm angezeigt wird, wenn eine PWA hinzugefügt wird, wird als Apple Touch Icon bezeichnet. In diesem Codelab erfahren Sie, wie Sie einer PWA ein Apple-Touch-Icon 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. Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.

  2. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

  3. Notieren Sie sich die URL Ihrer Beispiel-App. Sie sieht in etwa so aus: https://example.glitch.me.

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

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + 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 ausgewählt ist.
  4. Klicken Sie auf die Schaltfläche Bericht erstellen.

Im Abschnitt PWA Optimized (Für PWA optimiert) meldet Lighthouse, dass die Beispiel-App kein gültiges Apple-Touch-Symbol bereitstellt.

Stellt kein gültiges „apple-touch-icon“ bereit
Der Audit Stellt kein gültiges apple-touch-icon bereit
>

Beispiel-App zum iOS-Startbildschirm hinzufügen

Um zu demonstrieren, wie ein Apple-Touch-Icon für eine bessere Nutzerfreundlichkeit sorgt, fügen Sie die Beispiel-App zuerst dem Startbildschirm Ihres iOS-Geräts hinzu, wenn kein Apple-Touch-Icon angegeben wurde.

  1. Öffnen Sie Safari für iOS.
  2. Öffnen Sie die URL Ihrer Beispiel-App. Das ist die URL wie https://example.glitch.me, die Sie sich zuvor notiert haben.
  3. Tippen Sie auf Teilen Apple-Schaltfläche „Teilen“ > Zum Startbildschirm hinzufügen. Wahrscheinlich 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 ein Symbol für die Website aus den Inhalten der Seite.

Ein automatisch generiertes Startbildschirmsymbol.
Ein automatisch generiertes Startbildschirmsymbol.

Apple-Touch-Symbol zur Beispiel-App hinzufügen

  • Entfernen Sie die Kommentare zum <link rel="apple-touch-icon">-Tag unten im <head> von index.html.
    …
    <link rel="stylesheet" href="/https/web.developers.google.cn/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 (erneut) einem iOS-Startbildschirm hinzufügen

  • Versuche 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, sehen Sie auch, dass die Prüfung Does not provide a valid apple-touch-icon jetzt bestanden wird.
Das Apple-Touch-Symbol.
Das Apple-Touch-Symbol.