Umfangreichere UI für die Installation von PWAs

Einführung

Mobilgeräte und die Einführung von App-Shops von Geräteanbietern haben das mentale Modell der Nutzer dahingehend verändert, wie sie Software finden, bewerten und installieren. Nutzer sind mittlerweile so vertraut mit App-Shops und den zusätzlichen Informationen, die über App-Shops bereitgestellt werden, wie Kontext zur App, soziales Feedback, Bewertungen usw., dass die App-Shop-Metapher auch in Desktop-Betriebssystemen wie ChromeOS, Mac und Windows zu sehen ist.

Herausforderungen bei den Installationsoberflächen von heute

Wenn ein Nutzer heute eine PWA installieren möchte, werden eine Infoleiste und ein modales Overlay mit minimalen Informationen angezeigt. Wenn sie weiter installiert werden, ist der Vorgang zu schnell vorbei, ohne dass der Nutzer einen Kontext erhält. Das entspricht nicht ihren Erwartungen an die Installation von Apps und kann zu einiger Verwirrung darüber führen, was passiert ist.

Beispiel für die Benutzeroberfläche zur Installation einer PWA
Ein Beispiel für die Benutzeroberfläche der PWA-Installation.

Damit Entwickler installierte Apps so präsentieren können wie native Apps, führt Chrome eine neue Installationsoberfläche ein: Richer Install. Damit können Entwickler ihrer Manifestdatei eine Beschreibung und Screenshots hinzufügen, die dann in einem Dialogfeld in Chrome für Android angezeigt werden.

Beispiel für die Benutzeroberfläche eines Infofelds in Chrome
Beispiel für die Benutzeroberfläche einer Bottomsheet in Chrome

So haben Entwickler die Möglichkeit, einen ansprechenderen Installationsprozess zu erstellen, der besser den Erwartungen der Nutzer entspricht und ihr bestehendes mentales Modell der Installation nachahmt.

Die erweiterte Installations-UI wurde erweitert.
Die Installationsoberfläche wurde erweitert.
Die erweiterte Installations-UI wurde minimiert.
Die erweiterte Installationsoberfläche wurde minimiert.

Abwärtskompatibilität

Websites, deren Manifestdatei mindestens einen Screenshot enthält, erhalten weiterhin die vorhandenen Prompts. Dies kann sich in Zukunft ändern, je nach Akzeptanz in der Entwicklergemeinde und der Reaktion der Nutzer.

Benutzeroberfläche in der Vorschau ansehen

Diese Benutzeroberfläche ist ab Chrome 94 auf Android-Geräten und ab Chrome 108 auf dem Computer verfügbar.

Diese Funktion ist bei squoosh.app aktiviert und kann dort in der Vorschau angesehen werden.

Implementierung

Damit das erweiterte Installations-UI-Dialogfeld angezeigt wird, müssen Entwickler mindestens einen Screenshot für den entsprechenden Formfaktor in das screenshots-Array einfügen. Das Feld description ist nicht erforderlich, wird aber empfohlen. Der Inhalt des Dialogfelds wird aus den Inhalten der Felder screenshots und description erstellt, um die Installation der App dem Kauf im App-Shop anzugleichen. Diese Benutzeroberfläche hilft Nutzern zu erkennen, dass sie ihrem Gerät eine App hinzufügen. Da mehr Platz verfügbar ist, können Entwickler ihren Nutzern bei der Installation einen bestimmten Kontext bieten.

Entwickler können beispielsweise das Feld description verwenden, um die Funktionen der App hervorzuheben, die Nutzer dazu anregen, sie auf ihren Geräten zu behalten. Mit screenshots können sie das Erscheinungsbild der Webanwendung als eigenständiges Element präsentieren, mit dem einfachen Zugriff, den Plattform-Apps bieten.

Eine detaillierte Spezifikation und eine Anleitung zum Hinzufügen dieser Elemente zu Ihrer App finden Sie im Artikel Richer Install UI pattern (Richter Installations-UI-Muster).

Feedback

In Zukunft werden wir möglicherweise weitere Daten wie Kategorien und App-Bewertungen hinzufügen. Dies hängt jedoch vom Feedback von Entwicklern und Nutzern ab.

In den kommenden Monaten möchten wir sehen, wie Entwickler dieses neue UI-Muster erkunden, und wir würden uns über Feedback von Ihnen freuen. Füllen Sie dieses Formular aus, um uns zu kontaktieren.