Video verbessern

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 es lange gedrückt halten.

Hinweis : App-Verknüpfungen sind nur verfügbar, wenn der Nutzer Ihre PWA installiert.

Warnung : Nachdem der Nutzer Ihre PWA installiert hat, können Sie erst dann Verknüpfungen hinzufügen oder entfernen, wenn Sie Ihr Manifest auf dem Server aktualisiert und der Update-Algorithmus ausgelöst wurde.

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 diesen 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 von name oder short_name beschrieben 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 name vorhanden ist.

description

(Optional) Eine Beschreibung der Funktionsweise dieser Verknüpfung

icons

(Optional): Ein Array von Symbolobjekten mit den Feldern src, type, sizes und optional purpose, 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.

Achtung : In Chrome und Edge auf dem Computer werden die ersten 10 Elemente gerendert, während in Chrome auf Android nur die ersten drei Verknüpfungen in der Manifest-Liste gerendert werden. Es ist daher besser, sie nach Priorität zu ordnen. In Chrome auf Android-Geräten können Sie über das Menü nach Ihrer benutzerdefinierten Liste auch auf „App-Infos“ und „Website-Einstellungen“ zugreifen.

Hinweis : Wenn Sie Ihre PWA in App-Katalogen und ‑Shops veröffentlichen, können Sie die Verknüpfungen im Manifest mithilfe von APIs für die einzelnen Betriebssysteme in platformspezifische Implementierungen umwandeln, z. B. Schnellaktionen unter iOS und Verknüpfungen unter Android. BubbleWrap unterstützt App-Verknüpfungen für Android und ChromeOS sowie PWA Builder für Android, ChromeOS, iOS und iPadOS.

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 Bilder werden auf Apple-Geräten als Startbilder bezeichnet und verwenden die Property rel mit dem Wert apple-touch-startup-image, z. B.:

<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 Bildschirms).

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">

Warnung : Wenn Sie alle möglichen Optionen für Bildschirmdefinitionen, Ausrichtungen und den Multitasking-Modus anbieten möchten, müssen Sie mehr als 25 unterschiedliche Bilder erstellen und in Ihrem HTML-Code verknüpfen. Wenn Sie kein Startbild für den iOS- oder iPadOS-Kontext des Nutzers angeben, wird stattdessen in der Eröffnungsanimation und während des Ladens Ihrer PWA ein weißer Bildschirm angezeigt.

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 basierend auf dem Typ und der Bildschirmgröße des aktuellen Geräts in <link>-eingebettete Elemente eingebettet werden können. Sie können einen speicherinternen Canvas verwenden, das Bild rendern und mit einer PNG-Datei in einen data:-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 eine Installationsanleitung 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.standalone undefined ist, verwendet der Nutzer kein iPadOS- oder iOS-Gerät.
• Wenn navigator.standalone = false ist, hat der Nutzer die PWA im Browser geöffnet und verwendet sie dort.
• Wenn navigator.standalone = true ist, hat der Nutzer die PWA über den Startbildschirm geöffnet und sieht die eigenständige PWA.

Unterstützung für Vollbildmodus

In Safari auf iOS-Geräten 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.

Warnung : In diesem Modus wird die Designfarbe ignoriert und die Benachrichtigungsleiste wird über einem transparenten Hintergrund gerendert. Außerdem ist das Pixel [0, 0] Ihrer App jetzt das Pixel [0, 0] des physischen Displays und nicht mehr nach dem sicheren Bereich.

Achten Sie bei der Verwendung dieses Modus auf Ihr Design, da das Betriebssystem die Symbole immer weiß rendert. Sie sollten also immer einen Kontrast zwischen den Hintergründen für den oberen Bereich des Bildschirms und hellen Inhalten schaffen. 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 Freigabe-Sheet über das Freigabesymbol im Browser öffnet, und nicht beim Laden der Seite. 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 der Schaltfläche „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.

Warnung : Wenn der Browser das Manifest nicht laden kann, wird geprüft, ob Ihre PWA einige veraltete Meta-Tags wie apple-mobile-web-app-capable enthält. Diese Metatags sollten Sie nicht verwenden. Sie bieten eine Startbildschirm-App ohne wichtige Attribute für Ihre PWA, z. B. ohne die Attribute start_url oder scope, was die Nutzerfreundlichkeit der App beeinträchtigt.

Ressourcen

• PWA Asset Generator
• Mit App-Verknüpfungen schnell Aufgaben erledigen
• PWA Compat Library
• App-Verknüpfungen definieren