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:
Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus.
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:
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Achten Sie darauf, dass in der Liste Kategorien das Kästchen Progressive Web-App angeklickt ist.
- 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](https://web.dev/static/articles/codelab-apple-touch-icon/image/does-provide-valid-appl-3f357b1a31581.png?authuser=6&hl=de)
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.
- Öffnen Sie Safari für iOS.
- Öffnen Sie die URL Ihrer Beispielanwendung. Dies ist die URL wie
https://example.glitch.me
, die Sie zuvor notiert haben. - Tippen Sie auf Teilen
> Zum Startbildschirm hinzufügen. In der Regel müssen Sie nach links wischen, um diese Option zu sehen.
- 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.](https://web.dev/static/articles/codelab-apple-touch-icon/image/an-auto-generated-home-sc-3fae3a26906d9.png?authuser=6&hl=de)
Apple Touch-Symbol zur Beispiel-App hinzufügen
- Entfernen Sie das Kommentarzeichen des
<link rel="apple-touch-icon">
-Tags am Ende von<head>
vonindex.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](https://web.dev/static/articles/codelab-apple-touch-icon/image/the-apple-touch-icon-fb4c851adc96.png?authuser=6&hl=de)