Es gibt viele Verbesserungen, mit denen Sie die Konvertierung und 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. Sie können damit eine Liste mit Verknüpfungen zu verschiedenen Teilen oder Funktionen in Ihrer PWA erstellen, um die Navigation zu häufig aufgerufenen Bereichen zu 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ü im App-Symbol 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 lange auf das Symbol drücken.
Verknüpfungen werden im shortcuts-Mitglied des Manifests definiert. Es wird ein Array von Mitgliedern mit den folgenden Eigenschaften verwendet:
name- 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. Sie sollte eine URL innerhalb des PWA-Bereichs sein und einen Deeplink zur Funktion enthalten, die in der
nameodershort_namebeschrieben wird. short_name- Optional: Ein kürzerer Name, der verwendet wird, wenn nicht genügend Platz ist, um den vollständigen Wert des Felds
namedarzustellen. description- (Optional) Eine Beschreibung der Funktion des Kurzbefehls
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 als Best-Effort-Funktion betrachtet werden. Das bedeutet, dass Sie sich nicht darauf verlassen können, dass diese Tastenkombinationen konsistent angezeigt werden. Selbst wenn sie angezeigt werden, wissen Sie nicht, wie viele Tastenkombinationen angezeigt werden oder ob die Plattform die Symbole ignoriert. Dies liegt im Ermessen des Browsers. Eine ausführliche Diskussion pro Plattform ist hierfür nicht vorgesehen, aber unten haben Sie eine Vorstellung davon, wie dies auf Android-Geräten und Computern funktioniert. Der beste Weg, mit dieser Unsicherheit umzugehen, ist, die Elemente nach Priorität zu sortieren.
Im folgenden Codebeispiel werden verschiedene App-Verknüpfungen definiert, die Sie ausprobieren können, wenn Sie die App auf Android mit Chrome oder auf einem Computer mit Edge oder Chrome installieren.
iOS und iPadOS
Bei der Veröffentlichung von PWAs haben wir einige Verbesserungen vorgenommen, die Safari für iOS- und iPadOS-Nutzer verbessern können.
Ladebildschirme
Wie im Kapitel zum Web App-Manifest beschrieben, erstellt Android basierend auf den Werten des Manifests automatisch Ladebildschirme. Für iOS und iPadOS gilt das nicht. Auf diesen Geräten solltest du 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 wie in:
<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 abgedeckt 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.
Mit einer Medienabfrage im Attribut media 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-Startbilder
Das Definieren von Start-Images ist aufwendig. Daher haben wir einige Tools für die automatische Erstellung und Konfiguration:
- Die statische Generierung wird in Ihr Build-System integriert, erstellt alle statischen PNG-Bilder und liefert den HTML-Code mit
<link>-Elementen, die Sie in Ihr Dokument einfügen können. Ein Beispiel für ein solches Tool ist der PWA-Asset-Generator. - Clientseitiger Generator, ein JavaScript-Tool, mit dem eine oder mehrere base64-Versionen des Startbilds basierend auf dem aktuellen Gerätetyp und der Bildschirmgröße in
<link>-injizierte 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-Kompatbibliothek ist eine nutzerfreundliche clientseitige Bibliothek, bei der dazu der für Android typische Startbildschirm geklont wird.
PWA auf mobilen Apple-Plattformen erkennen
Sie sollten in Ihrer PWA die progressive Verbesserung und die Funktionserkennung verwenden. In einigen Fällen kann es jedoch erforderlich sein, zu wissen, ob der Nutzer eine PWA auf mobilen Apple-Plattformen verwendet, z. B. wenn Sie eine Installationsanleitung anbieten oder Links zu plattformspezifischen Apps hinzufügen möchten, die nur für iOS verfügbar sind.
Wenn du den User-Agent-String nicht lesen möchtest, prüfe das Attribut standalone des navigator-Objekts. Dies ist eine nicht standardmäßige Property, die nur in der WebKit-Engine unter iOS und iPadOS verfügbar ist.
- Wenn
navigator.standaloneden Wertundefinedhat, 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 über den Startbildschirm geöffnet und erhält die eigenständige PWA.
Vollbildunterstützung
In Safari unter iOS und iPads wird nur display: standalone als Anzeigemodus für das PWA-Symbol unterstützt. display: fullscreen wird zwar nicht auf Android-Geräten unterstützt, du kannst aber ein nicht standardmäßiges Meta-Tag verwenden, um deine PWA in den Vollbildmodus zu versetzen.
Im 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 Ihrer HTML-Datei das folgende Tag hinzufügen, wechselt Ihre PWA unter iOS und iPadOS in den Vollbildmodus. Allerdings unterscheidet sich dieses Tag von Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In diesem Modus ist die Statusleiste des Geräts, d. h. oben die Uhr, der Akkustand und die Benachrichtigungssymbole, weiterhin sichtbar, wird aber über Ihren Inhalten mit transparentem Hintergrund angezeigt.
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. Weitere Informationen hierzu finden Sie im Kapitel zum App-Design.
Zuverlässigkeit der Installation
Safari in iOS und iPadOS vor 15.4 lädt die Manifestdatei nur dann aus dem Netzwerk, wenn der Nutzer das Share Sheet über das Freigabesymbol im Browser öffnet, und nicht, wenn die Seite geladen wird. Daher prüft Safari erst zu diesem Zeitpunkt, ob Ihre Website eine PWA ist. Dies kann dazu führen, dass 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, wähle „Zum Startbildschirm hinzufügen“ aus ein Symbol auf dem Startbildschirm platziert, aber keine App-Erfahrung bietet; wird es nur eine Verknüpfung zu einem Safari-Tab sein.