Es gibt viele Verbesserungen, mit denen sich die Conversion-Rate und die Nutzung Ihrer PWA verbessern lassen.
App-Verknüpfungen
App-Verknüpfungen sind eine statische Liste von Deeplinks zu Ihrer PWA, die in Ihrem Manifest geschrieben sind. Web App Manifest-Spezifikation: Damit können Sie eine Liste von Verknüpfungen zu verschiedenen Teilen oder Funktionen in Ihrer PWA definieren, die die Navigation zu häufig aufgerufenen Bereichen beschleunigen.
App-Verknüpfungen sind auf den meisten Desktop-Betriebssystemen und Android mit WebAPK verfügbar. Sie werden in einem Kontextmenü über dem App-Symbol auf dem Startbildschirm, im Dock oder in der Taskleiste angezeigt, wie im folgenden Bild:
Um auf dieses Menü zuzugreifen, müssen Nutzer mit der rechten Maustaste auf das Symbol der PWA klicken oder lange auf das Symbol drücken.
Verknüpfungen werden im shortcuts-Element des Manifests definiert. Es nimmt ein Array von Mitgliedern mit den folgenden Eigenschaften an:
name- Der Text, der dem Nutzer angezeigt wird, in der Regel in einem Kontextmenü.
url- Die URL, die die PWA laden soll, wenn der Nutzer sie über diese Verknüpfung startet. Es sollte sich um eine URL innerhalb des Gültigkeitsbereichs Ihrer PWA handeln und es sollte ein Deeplink zur Funktion sein, die in der
nameodershort_namebeschrieben wird. short_name- Optionaler kürzerer Name, der verwendet wird, wenn nicht genügend Platz für die vollständige Anzeige des Werts des Felds
namevorhanden ist. description- (Optional) Eine Beschreibung der Funktionsweise dieser Verknüpfung
icons- (Optional): Ein Array von Symbolobjekten mit den Feldern
src,type,sizesund optionalpurpose, das beschreibt, welche Bilder den Verknüpfungspfeil darstellen sollen
Sie sollten App-Verknüpfungen als Best-Effort-Funktion behandeln. Das bedeutet, dass Sie nicht davon ausgehen können, dass diese Tastenkürzel immer angezeigt werden. Selbst wenn sie angezeigt werden, wissen Sie nicht, wie viele Tastenkürzel angezeigt werden oder ob die Plattform die Symbole ignoriert, da dies im Ermessen der Browser liegt. Eine vollständige Erläuterung für jede Plattform würde den Rahmen dieses Artikels sprengen. Unten finden Sie jedoch eine Übersicht dazu, wie die Funktion auf Android-Geräten und Computern funktioniert. Die beste Möglichkeit, mit dieser Unsicherheit umzugehen, besteht darin, 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 Computer mit Edge oder Chrome installieren.
iOS und iPadOS
Beim Veröffentlichen von PWAs gibt es einige Verbesserungen, die die Nutzerfreundlichkeit für Nutzer in Safari auf iOS/iPadOS verbessern können.
Ladebildschirme
Wie im Kapitel zum Manifest der Webanwendung erläutert, erstellt Android automatisch Splashscreens basierend auf den Werten des Manifests. Das ist bei iOS und iPadOS nicht der Fall. Auf diesen Geräten sollten Sie die Splashscreens in der HTML-Datei als statische Bilder mit <link>-Elementen definieren.
Diese Images werden auf Apple-Geräten als Start-Images bezeichnet. Sie verwenden das Attribut rel mit dem Wert apple-touch-startup-image wie in:
<link rel="apple-touch-startup-image" href="ios-startup.png">
Das Startbild muss genau die Fenstergröße haben, die Ihre PWA beim Öffnen hat. Daher sind für verschiedene iOS- und iPadOS-Geräte unterschiedliche Bilder erforderlich. Auf dem iPad müssen mehr Situationen abgedeckt werden, z. B. die Öffnung im Quer-/Hochformat und das Rendern der PWA im Multitasking-Modus (z. B. 1/3, 1/2 oder 2/3 des Displays).
Eine aktuelle Liste der Bildschirmgrößen für iOS und iPadOS finden Sie in den Apple Human Interface Guidelines.
Mit einer Medienabfrage im media-Attribut können verschiedene Versionen des Startbilds 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-Startbildschirmbilder
Das Definieren von Start-Images ist mühsam. Deshalb haben wir einige Tools zur automatischen Generierung und Konfiguration:
- Die statische Generierung lässt sich in Ihr Build-System einbinden, erstellt alle statischen PNG-Bilder und liefert Ihnen den HTML-Code mit
<link>-Elementen, die Sie in Ihr Dokument einfügen können. PWA Asset Generator ist ein Beispiel für ein solches Tool. - Clientseitiger Generator, ein JavaScript-Tool, mit dem eine oder mehrere Base64-Versionen des Startbilds je nach Gerätetyp und Bildschirmgröße in
<link>-eingebettete Elemente eingebettet werden können. Sie können einen speicherinternen Canvas verwenden, das Bild rendern und mit einer PNG-Datei in einendata:-URI konvertieren. Die PWA Compat-Bibliothek ist eine nutzerfreundliche clientseitige Bibliothek, die dazu den typischen Startbildschirm von Android klont.
PWAs auf mobilen Apple-Plattformen erkennen
Sie sollten in Ihrer PWA zwar progressive Verbesserungen und die Funktionserkennung verwenden, es kann aber Fälle geben, in denen wir wissen müssen, ob sich der Nutzer in einer PWA auf mobilen Apple-Plattformen befindet. Das ist beispielsweise der Fall, wenn Sie Installationsanleitungen anbieten oder Links zu plattformspezifischen Apps hinzufügen möchten, die nur für iOS verfügbar sind.
Wenn Sie den User-Agent-String nicht lesen möchten, prüfen Sie die Eigenschaft standalone des Objekts navigator. Dies ist eine nicht standardmäßige Eigenschaft und nur in der WebKit-Engine auf iOS und iPadOS verfügbar.
- Wenn
navigator.standaloneundefinedist, verwendet der Nutzer kein iPadOS- oder iOS-Gerät. - Wenn
navigator.standalone=falseist, hat der Nutzer die PWA im Browser geöffnet und verwendet sie dort. - Wenn
navigator.standaloneden Werttruehat, hat der Nutzer die PWA über den Startbildschirm geöffnet und erhält die eigenständige PWA.
Unterstützung für Vollbildmodus
In Safari unter iOS und iPads wird nur display: standalone als Anzeigemodus für Ihre PWA unterstützt.
Auf dem nächsten Bild sehen Sie links ein standardmäßiges eigenständiges Design mit einer Themenfarbe und rechts eine PWA mit einem Vollbildmodus für iOS, mit dem Sie Inhalte hinter der Statusleiste rendern können.
Wenn Sie das folgende Tag in Ihre HTML-Datei einfügen, wird Ihre PWA auf iOS- und iPadOS-Geräten in den Vollbildmodus versetzt. Dieser unterscheidet sich jedoch von dem auf Android-Geräten.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In diesem Modus ist die Statusleiste des Geräts (oben, wo sich die Uhr, der Akkustand und die Benachrichtigungssymbole befinden) weiterhin sichtbar, wird aber mit einem transparenten Hintergrund über den Inhalten gerendert.
Seien Sie bei der Verwendung dieses Modus mit Bedacht bei Ihrem Design, da das Betriebssystem die Symbole immer weiß rendert. Daher sollten Sie den Hintergrund des oberen Bildschirmrands immer mit hellen Inhalten kontrastieren. Außerdem ist es wichtig, CSS-Umgebungsvariablen zu verwenden, um Inhalte im sicheren Bereich zu rendern, wie im Kapitel zum App-Design beschrieben.
Zuverlässigkeit der Installation
Unter iOS und iPadOS vor Version 15.4 wird die Manifestdatei nur dann aus dem Netzwerk geladen, wenn der Nutzer das Share Sheet über das Freigabesymbol im Browser öffnet, und nicht, wenn die Seite geladen wird. Daher prüft der Browser erst zu diesem Zeitpunkt, ob es sich bei Ihrer Website um eine PWA handelt. Das kann dazu führen, dass das Manifest nicht geladen werden kann oder zu viel Zeit in Anspruch nimmt und vom Browser ignoriert wird.
Wenn der Browser das Manifest nicht rechtzeitig laden kann, wird durch Drücken von „Zum Startbildschirm hinzufügen“ ein Symbol auf dem Startbildschirm platziert, es wird jedoch keine App angezeigt. Es handelt sich lediglich um eine Verknüpfung zu einem Browsertab.