Es gibt viele Verbesserungen, mit denen Sie die Conversion-Rate und die Nutzung Ihrer PWA verbessern können.
App-Verknüpfungen
App-Verknüpfungen sind eine statische Liste von Deeplinks zu Ihrer PWA. Sie sind in Ihrem Manifest geschrieben. Web App Manifest-Spezifikation: Hiermit können Sie eine Liste von Verknüpfungen zu verschiedenen Teilen oder Funktionen in Ihrer PWA definieren und so die Navigation zu häufig aufgerufenen Bereichen beschleunigen.
App-Verknüpfungen sind unter den meisten Desktop-Betriebssystemen und Android mit WebAPK verfügbar und werden wie in der folgenden Abbildung in einem Kontextmenü des App-Symbols auf dem Startbildschirm, im Dock oder in der Taskleiste angezeigt:
Um auf dieses Menü zuzugreifen, müssen Nutzer mit der rechten Maustaste auf das Symbol der PWA klicken oder es lange drücken.
Verknüpfungen werden im shortcuts-Mitglied des Manifests definiert. Es wird ein Array von Mitgliedern mit den folgenden Eigenschaften verwendet:
name- Der Text, der dem Nutzer in der Regel in einem Kontextmenü angezeigt wird
url- Die URL, die geladen werden soll, wenn der Nutzer sie über diese Verknüpfung startet. Es sollte eine URL innerhalb Ihres PWA-Bereichs sein, die einen Deeplink zu der Funktion enthält, die im
nameodershort_namebeschrieben wird. short_name- (Optional) Ein kürzerer Name, der verwendet wird, wenn nicht genügend Platz vorhanden ist, um den vollständigen Wert des Felds
nameanzuzeigen. description- (Optional) Beschreibung der Funktion dieser Tastenkombination
icons- (Optional) Ein Array von Symbolobjekten mit
src,type,sizesund optionalenpurpose-Feldern, die beschreiben, welche Bilder die Verknüpfung darstellen sollen
App-Verknüpfungen sollten eine Best-Effort-Fähigkeit sein. Das bedeutet, dass Sie sich nicht darauf verlassen können, dass diese Tastenkombinationen konsistent angezeigt werden, und selbst wenn sie angezeigt werden, wissen Sie nicht, wie viele Verknüpfungen angezeigt werden oder ob die Plattform die Symbole im Ermessen der Browser ignoriert. Eine vollständige Diskussion pro Plattform fällt nicht in den Umfang, aber unten haben Sie eine Vorstellung davon, wie das auf Android-Geräten und Computern funktioniert. Der beste Weg, mit dieser Unsicherheit umzugehen, ist, die Elemente nach Priorität zu ordnen.
Im folgenden Codebeispiel werden verschiedene App-Verknüpfungen definiert, die Sie ausprobieren können, wenn Sie die App auf einem Android-Gerät mit Chrome oder auf einem Desktop mit Edge oder Chrome installieren.
iOS und iPadOS
Bei der Veröffentlichung von PWAs gibt es einige Verbesserungen, die die Nutzerfreundlichkeit von Safari unter iOS/iPadOS verbessern können.
Ladebildschirme
Wie im Kapitel Web App Manifest zu sehen ist, erstellt Android automatisch Ladebildschirme, die auf den Werten des Manifests basieren. Das ist nicht der Fall für iOS und iPadOS. Auf diesen Geräten sollten Sie die Ladebildschirme im HTML-Code mithilfe von <link>-Elementen als statische Bilder definieren.
Diese Images werden auf Apple-Geräten als Start-Images bezeichnet. Sie verwenden das Attribut rel mit dem Wert apple-touch-startup-image, z. B.:
<link rel="apple-touch-startup-image" href="ios-startup.png">
Die Herausforderung besteht darin, dass das Start-Image genau die Fenstergröße haben muss, die Ihre PWA beim Öffnen hat. Daher benötigen unterschiedliche iOS- und iPadOS-Geräte unterschiedliche Bilder. Auf dem iPad müssen mehr Situationen berücksichtigt werden, z. B. das Öffnen im Quer- oder Hochformat und das Rendern der PWA im Multitasking-Modus (z. B. 1/3, 1/2 oder 2/3 des Bildschirms).
Eine aktualisierte Liste der iOS- und iPadOS-Bildschirmgrößen finden Sie in den Apple Human Interface Guidelines.
Verschiedene Versionen des Startbilds können mit einer Medienabfrage im Attribut media festgelegt werden:
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
Designmuster für iOS-Startbilder
Das Definieren von Start-Images ist harte Arbeit, daher bieten wir einige Tools für die automatische Generierung und Konfiguration an:
- Die statische Generierung lässt sich in Ihr Build-System einbinden, erstellt alle statischen PNG-Bilder und stellt Ihnen den HTML-Code mit
<link>-Elementen zur Verfügung, der in Ihr Dokument eingefügt werden kann. Ein Beispiel für ein solches Tool ist der PWA-Asset-Generator. - Clientseitiger Generator, ein JavaScript-Tool, das eine oder mehrere base64-Versionen des Start-Images in in
<link>eingeschleuste Elemente basierend auf dem aktuellen Gerätetyp und der aktuellen Bildschirmgröße einbetten kann. Sie können ein speicherinternes Canvas verwenden, das Bild rendern und in einendata:-URI mit einer PNG-Datei konvertieren. Die PWA-kompatible Bibliothek ist eine nutzerfreundliche clientseitige Bibliothek, für die der typische Android-Startbildschirm geklont wird.
PWA auf mobilen Apple-Plattformen erkennen
Sie sollten die progressive Verbesserung und die Funktionserkennung in Ihrer PWA verwenden. Es kann aber auch Fälle geben, in denen wir wissen müssen, ob der Nutzer in einer PWA auf mobilen Apple-Plattformen verwendet wird. Das kann beispielsweise der Fall sein, wenn Sie eine Installationsanleitung anbieten oder Links zu plattformspezifischen Apps hinzufügen möchten, die nur für iOS verfügbar sind.
Um zu vermeiden, dass der User-Agent-String gelesen wird, überprüfe das Attribut standalone des navigator-Objekts. Dies ist eine nicht standardmäßige Eigenschaft, die nur in der WebKit-Engine unter iOS und iPadOS verfügbar ist.
- Wenn für
navigator.standaloneder Wertundefinedgilt, verwendet der Nutzer kein iPadOS- oder iOS-Gerät. - Wenn
navigator.standaloneden Wertfalsehat, hat der Nutzer die PWA im Browser geöffnet und verwendet sie dort. - Wenn
navigator.standaloneden Werttruehat, hat der Nutzer die PWA vom Startbildschirm aus geöffnet und verwendet nun die eigenständige PWA.
Vollbildunterstützung
In Safari auf iOS- und iPad-Geräten wird nur display: standalone als Anzeigemodus für das Symbol deiner PWA unterstützt. display: fullscreen wird zwar nicht wie auf Android-Geräten unterstützt, aber Sie können ein nicht standardmäßiges Meta-Tag verwenden, damit Ihre PWA in den Vollbildmodus wechselt.
Auf dem nächsten Bild sehen Sie links ein eigenständiges Standarddesign mit einer Designfarbe und rechts eine PWA mit einem iOS-Vollbildmodus, mit dem Sie Inhalte hinter der Statusleiste rendern können.
Wenn Sie dem HTML-Code das folgende Tag hinzufügen, wechselt Ihre PWA unter iOS und iPadOS in den Vollbildmodus, unterscheidet sich jedoch von Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In diesem Modus ist die Statusleiste des Geräts (oben, wo Sie die Uhr, den Akkustand und die Benachrichtigungssymbole sehen) weiterhin sichtbar, wird aber mit einem transparenten Hintergrund über Ihren Inhalten gerendert.
Wenn Sie diesen Modus verwenden, gehen Sie mit Ihrem Design vorsichtig um, da das Betriebssystem die Symbole immer weiß rendert. Daher sollten Sie Ihren Hintergrund für den oberen Bildschirmbereich immer mit hellem Inhalt kontrastieren. Außerdem ist es wichtig, CSS-Umgebungsvariablen zu verwenden, um Inhalte im sicheren Bereich zu rendern, wie im Kapitel zu App Design beschrieben.
Zuverlässige Installation
Safari unter iOS und iPadOS vor Version 15.4 lädt die Manifestdatei aus dem Netzwerk nur dann, wenn der Nutzer das Share Sheet über das Freigabesymbol im Browser öffnet, und nicht, wenn die Seite geladen wird. Daher prüft Safari erst dann, ob Ihre Website eine PWA ist, was zu Situationen führen kann, in denen das Manifest nicht geladen werden kann oder zu viel Zeit in Anspruch nimmt und Safari es ignoriert.
Wenn Safari das Manifest nicht rechtzeitig laden kann, wird durch Drücken von „Zum Startbildschirm hinzufügen“ ein Symbol auf dem Startbildschirm platziert, es wird jedoch kein App-Erlebnis angezeigt. Es handelt sich lediglich um eine Verknüpfung zu einem Safari-Tab.