Bewährte Methoden für PWAs

  • Artikel

In diesem Artikel werden bewährte Methoden aufgeführt, um Ihre PWA zu einer hervorragenden Anwendung für Ihre Benutzer zu machen. Wenn Benutzer Anwendungen installieren, haben sie bestimmte Erwartungen, was diese Anwendungen tun können, z. B. offline zu arbeiten, sich tief in das Betriebssystem zu integrieren oder nicht triviale Computingaufgaben auszuführen.

Lesen Sie die bewährten Methoden auf dieser Seite, um zu erfahren, wie Sie Ihre PWA so aussehen und sich wie die Benutzer erwarten.

Auf dieser Seite wird davon ausgegangen, dass Sie bereits über eine PWA verfügen. Weitere Informationen zum Erstellen einer einfachen PWA finden Sie unter Erste Schritte mit progressiver Web-Apps.

Bereitstellen einer benutzerdefinierten Installation

Ihre App kann bereits mithilfe der Schaltfläche App verfügbar in der Adressleiste des Browsers installiert werden, wenn Sie die Schritte unter Erste Schritte mit progressiver Web-Apps ausführen.

Eine benutzerdefinierte Installationserfahrung in der App-Benutzeroberfläche kann für Ihre Benutzer offensichtlicher sein und zu mehr Installationen führen.

Um eine benutzerdefinierte Installationsumgebung zu erstellen, verwenden Sie das beforeinstallprompt -Ereignis, und stellen Sie ihre eigene Installationsschaltfläche in Ihrer App bereit.

Ein Codebeispiel für das beforeinstallprompt Ereignis finden Sie im Quellcode der PWAmp-Demo-App. Um die benutzerdefinierte Installation zu testen, öffnen Sie PWAmp, und klicken Sie dann auf Weitere Tools (...) >Informationen zum>Installieren der App in der App.

An App Stores übermitteln

Viele Benutzer suchen ihre App im App Store ihres Geräts. Das Herunterladen aus einem offiziellen App Store bietet Ihren Benutzern eine vertrauenswürdige und vertraute Erfahrung.

Sie können Ihre PWA mithilfe von PWA Builder im Microsoft Store für Windows, im App Store für iOS oder im Play Store für Android veröffentlichen.

Informationen zum Verwenden von PWA Builder und zum Veröffentlichen im Microsoft Store finden Sie unter Veröffentlichen einer progressiven Web-App im Microsoft Store.

Erstellen eines großartigen App-Symbols

Viele Benutzer finden Apps auf ihren Geräten anhand ihrer Symbole. Damit Benutzer Ihre App leichter finden können, wählen Sie ein erkennbares Symbol aus, stellen Sie sicher, dass es hervorsticht, und stellen Sie sicher, dass es sich an die Geräte anpasst, auf denen Ihre App installiert ist.

Unter Windows wird das App-Symbol an vielen Stellen angezeigt, z. B. in der Taskleiste, im Startmenü oder in der Umschaltfläche alt+TAB . Stellen Sie mehrere Bildgrößen bereit, um sicherzustellen, dass Ihr App-Symbol an diesen Stellen leicht erkennbar ist.

Informationen dazu, welche Bildgröße unter Windows benötigt wird, finden Sie unter Symbolbildgrößen unter Definieren von Symbolen und einer Designfarbe.

Verwenden eines eigenständigen App-Fensters

Native Anwendungen verfügen über eigene dedizierte Fenster. PWAs können definieren, wie sie im Hostbetriebssystem angezeigt werden.

Um Ihre PWA in einem eigenständigen Fenster ohne Browsernavigations-Benutzeroberfläche anzuzeigen, verwenden Sie den Anzeigemember in ihrer Web-App-Manifestdatei, und legen Sie ihn auf feststandalone.

Wenn Ihre App über mehrere HTML-Seiten verfügt, stellen Sie sicher, dass Benutzer mithilfe von Schaltflächen oder Links in Ihrer App zwischen den Seiten wechseln können. Verwenden Sie den minimal-ui Wert des display Manifestmitglieds, damit Benutzer zwischen Seiten wechseln können, indem sie die vorherige und die nächste Schaltfläche verwenden, die vom Browser in der App-Titelleiste gerendert wird.

Um eine immersivere, nativere Oberfläche zu schaffen, können Desktop-PWAs auch die Standardtitelleiste des Betriebssystems ausblenden und stattdessen ihre eigenen Inhalte anzeigen. Das Anzeigen von Inhalten, in denen die Titelleiste normalerweise ist, kann dazu beitragen, dass PWAs sich eher wie native Apps anfühlen. Viele Desktopanwendungen, z. B. Visual Studio Code, Microsoft Teams und Microsoft Edge, tun dies bereits.

Informationen zum Ersetzen der Titelleiste finden Sie unter Anzeigen von Inhalten in der Titelleiste.

Integration in das Betriebssystem

Benutzer erwarten, dass installierte Anwendungen in irgendeiner Weise in das Hostbetriebssystem integriert werden.

Ihre App kann eine vertrautere, ansprechendere und nahtlose Erfahrung bieten, indem Sie Betriebssystemintegrationsfeatures wie Tastenkombinationen, freigaben zwischen Apps, Badging, Dateiverarbeitung oder Linkbehandlung verwenden.

Verknüpfungen

Verknüpfungen ermöglichen es, direkte Links zu Ihrer App-Funktionalität zu definieren, indem Sie mit der rechten Maustaste auf das App-Symbol klicken.

Weitere Informationen finden Sie unter Definieren von App-Verknüpfungen.

Gemeinsame Nutzung von Anwendungen

PWAs können Inhalte über das Freigabedialogfeld des Betriebssystems für andere Apps freigeben und Inhalte von anderen Apps empfangen.

Weitere Informationen finden Sie unter Freigeben von Inhalten für andere Apps.

Symbolbadges

PWAs können status Badges auf ihren App-Symbolen anzeigen, um Benutzer auf das Vorhandensein neuer Inhalte in der App hinzuweisen.

Weitere Informationen finden Sie unter Anzeigen eines Badges auf dem App-Symbol in Erneutes Einbinden von Benutzern mit Badges, Benachrichtigungen und Pushnachrichten.

Dateiverarbeitung

Sie können Ihre PWA als Dateihandler für bestimmte Dateitypen registrieren.

Verwenden Sie das PWA-Dateihandlerfeature, um Ihre App automatisch zu starten, wenn bestimmte Dateien vom Benutzer im Betriebssystem geöffnet werden.

Weitere Informationen finden Sie unter Verarbeiten von Dateien in progressiven Web-Apps.

Registrieren Ihrer App ist ein Link- oder Protokollhandler, um Ihre App automatisch zu starten, wenn bestimmte Links in anderen Anwendungen verwendet werden.

Weitere Informationen finden Sie unter Behandeln von Links zu Ihren progressiven Web-Apps und Behandeln von Protokollen in progressiven Web-Apps.

Widgets

Experimentelles Feature

Erstellen Sie eigene App-Widgets, die im Betriebssystemwidget Dashboard angezeigt werden, z. B. im Windows 11 Widgets Board.

Weitere Informationen finden Sie unter Erstellen von PWA-gesteuerten Widgets.

Unterstützung von Offlineszenarien

Bei einer Verbindung mit einem langsamen oder unzuverlässigen Netzwerk oder sogar ohne Internetzugang können installierte Anwendungen in der Regel weiterhin geöffnet und verwendet werden. Benutzer installierter Anwendungen erwarten, dass sie unter diesen Bedingungen weiterhin arbeiten. Sie erwarten auch, dass die netzwerkabhängigen Teile einer Anwendung das Fehlen einer Verbindung mit einer benutzerdefinierten Nachricht und lokalen Zwischenspeicherungsfunktionen ordnungsgemäß behandeln.

Um die Aufbewahrung zu verbessern, verwenden Sie die APIs und Cache des Service Workers Fetch sowie den lokalen Datenspeicherzugriff, und stellen Sie Ihren Benutzern eine gute Offlineerfahrung bereit.

Sie können eine gute Offline-Erfahrung in mehreren Schritten bereitstellen:

  1. Zwischenspeichern Sie alle statischen Ressourcen, die Ihre App zum Starten, Anzeigen von Inhalten und zum Ausführen der gängigsten Aufgaben benötigt.
  2. Umleiten zu einer benutzerdefinierten Offlineseite für die Seiten, die nicht zwischengespeichert werden können.
  3. Behandeln Sie ordnungsgemäß die Aufgaben Ihrer App, die nicht ohne Internetzugriff verwendet werden können.
  4. Implementieren Sie erweiterte Szenarien, z. B. das Herunterladen von Daten für die Offlineanzeige durch Benutzer.

Weitere Informationen finden Sie unter Verwenden von Service Workern zum Verwalten von Netzwerkanforderungen.

Lokales Speichern von Daten

Um Ihren Benutzern eine umfassende und schnelle Erfahrung zu bieten, verwenden Sie die verschiedenen Optionen für die persistente Datenspeicherung, die für PWAs verfügbar sind, z. B.:

  • Cachespeicher, um statische Ressourcen für Ihre App zu speichern.
  • Lokaler speicher und Sitzungsspeicher, um kleine Mengen von Benutzerdaten zu speichern.
  • IndexedDB, um größere, strukturierte Benutzerdaten zu speichern.
  • Dateisystemzugriffs-API zum Speichern von Dateien auf dem Datenträger.

Weitere Informationen finden Sie unter Speichern von Daten auf dem Gerät.

Verwenden erweiterter Funktionen

Installierte Apps führen in der Regel erweiterte Computerszenarien aus, die von Websites normalerweise nicht unterstützt werden.

Verwenden Sie erweiterte Webfunktionen wie die folgenden, um eine App-ähnliche Erfahrung bereitzustellen:

Stellen Sie sicher, dass die wichtigsten Aufgaben Ihrer App über alle Browser und Geräte hinweg ausgeführt werden können. Weitere Informationen finden Sie unter Testen auf mehreren Browsern und Geräten.

Gestalten Sie Ihre App wie eine echte App

Benutzer installieren Apps auf ihren Geräten, um bestimmte Aufgaben zu erledigen, und sie haben bestimmte Erwartungen darüber, wie diese Aufgaben auf der Benutzeroberfläche dargestellt werden und wie sie in das Hostbetriebssystem integriert werden.

Damit Ihre Benutzer die wichtigsten Aufgaben Ihrer App einfach und auf vertraute Weise erledigen können, treffen Sie Entwurfsentscheidungen wie:

  • Verwenden Sie keinen großen Kopfzeilenbereich wie Websites für die Navigation zu anderen Seiten. Verwenden Sie stattdessen eine Menümetapher.
  • Verwenden Sie keinen großen Fußzeilenbereich wie Websites für weitere Links und Informationen.
  • Verwenden Sie die system-ui Schriftart, um Ihren Inhalt nativer zu gestalten und schneller zu laden.
  • Verwenden Sie weniger Links, und bevorzugen Sie größere Trefferziele.
  • Unterstützen Sie die hellen und dunklen Designs des Betriebssystems, indem Sie das CSS-Medienfeature prefers-color-scheme verwenden.
  • Stellen Sie und in Ihrem Web-App-Manifest bereit background-colortheme-color, um das Anwendungsfenster anzupassen.
  • Konzentrieren Sie sich auf die wichtigsten Aufgaben, entschärfen Sie die Inhalte und optimieren Sie die Benutzeroberfläche.
  • Organisieren Sie die Benutzeroberfläche anhand des Formfaktors des Geräts neu, indem Sie CSS-Raster, Flexbox, Medienabfragen und Reaktionsfähige Bilder verwenden.
  • Verbessern Sie die wahrgenommene Leistung, indem Sie Benutzerinteraktionen sofort registrieren.
  • Erwägen Sie die Verwendung von Skelettbildschirmen , wenn das Rendern des nächsten Bildschirms Zeit in Anspruch nimmt.

Testen auf mehreren Browsern und Geräten

Mit Progressive Web-Apps stellen Sie eine App für alle Geräte aus einer Codebasis bereit. Um sicherzustellen, dass Ihre App überall funktioniert, testen Sie sie auf mehreren Browsern, Betriebssystemen und Geräten.

Stellen Sie sicher, dass die wichtigsten Szenarien Ihrer App überall funktionieren, und verbessern Sie die Erfahrung auf unterstützenden Geräten nach und nach.

Um Ihre App in mehreren Umgebungen zu testen, sollten Sie die folgenden Techniken in Betracht ziehen:

Unterstützung von Deep Linking

Um die Ermittlung und Freigabe Ihrer App über das Web und soziale Medien zu verbessern, leiten Sie jede Seite Ihrer App an eine eindeutige URL weiter und unterstützen Deep Linking.