Umfangreichere UI für die Installation von PWAs

Einleitung

Mobilgeräte und die Einführung von App-Shops von Geräteherstellern haben das Modell der Nutzer beim Erkennen, Bewerten und Installieren von Software verändert. Nutzer sind mittlerweile mit App-Shops und den zusätzlichen Informationen vertraut, die über App-Shops bereitgestellt werden, z. B. Kontext zur App, Feedback aus sozialen Netzwerken, Bewertungen usw., dass die Metapher für App-Shops in Desktop-Betriebssystemen wie ChromeOS, Mac und Windows deutlich wird.

Herausforderung bei den Installationsplattformen von heute

Wenn ein Nutzer heute eine PWA installieren möchte, werden eine Infoleiste und ein modales Overlay mit minimalen Informationen angezeigt. Wird die Installation fortgesetzt, ist der Vorgang zu schnell beendet, ohne dass dem Nutzer Kontextinformationen zur Verfügung gestellt werden. Dies widerspricht ihren Erwartungen an die Installation von Apps und kann sie verwirren, was passiert ist.

Beispiel für die PWA-Installations-UI
Beispiel für die PWA-Installations-UI

Damit Entwickler ihre installierten Apps genauso gestalten können wie native Anwendungen Chrome führt eine neue Installationsoberfläche namens Richer Install ein, mit der Entwickler ihrer Manifestdatei eine Beschreibung und Screenshots hinzufügen können, die dann in einem Dialogfeld am unteren Rand von Chrome für Android angezeigt werden.

Beispiel für die Benutzeroberfläche am unteren Rand in Chrome
Beispiel für die Bottomsheet-UI in Chrome

Entwickler haben dadurch die Möglichkeit, einen ansprechenderen Installationsprozess zu entwickeln, der besser auf die Erwartungen der Nutzer abgestimmt ist und ihr bestehendes Modell der installierten Apps nachahmt.

Umfassendere Installations-UI maximiert.
Erweiterte Installations-UI maximiert.
Detailliertere Installations-UI minimiert.
Umfassendere Installations-UI minimiert.

Abwärtskompatibilität

Websites, deren Manifestdatei nicht mindestens einen Screenshot enthält, erhalten weiterhin die vorhandenen Aufforderungen. Dies kann sich in Zukunft ändern, je nach Aufnahme in die Entwickler-Community und der Reaktion der Nutzer.

Vorschau der Benutzeroberfläche anzeigen

Sie funktioniert ab Chrome 94 für Android und Chrome 108 auf Computern.

Diese Funktion ist auf squoosh.app aktiviert und kann dort als Vorschau angesehen werden.

Implementierung

Zum Anzeigen des umfangreicheren Dialogfelds mit der Installations-UI müssen Entwickler mindestens einen Screenshot für den entsprechenden Formfaktor im screenshots-Array hinzufügen. Das Feld description ist nicht erforderlich, wird aber empfohlen. Das Dialogfeld für Inhalte wird mit dem Inhalt der Felder screenshots und description erstellt, um die Installation einer App-Shop-Installation anzugleichen. Mithilfe dieser Benutzeroberfläche können Nutzer erkennen, dass sie eine App zu ihrem Gerät hinzufügen, und wenn mehr Speicherplatz verfügbar ist, können Entwickler ihren Nutzern bei der Installation bestimmten Kontext zur Verfügung stellen.

Entwickler können beispielsweise das Feld description verwenden, um die Funktionen der App hervorzuheben, die dem Nutzer einen Anreiz geben, die App auf ihren Geräten zu behalten. Mit dem screenshots können sie das Erscheinungsbild der Web-App als eigenständiges Gerät präsentieren, das den einfachen Zugriff von Plattform-Apps bietet.

Eine ausführliche Spezifikation und eine Anleitung zum Hinzufügen zu Ihrer App finden Sie unter Umfassendere Installations-UI-Muster.

Feedback

In Zukunft werden wir darüber nachdenken, weitere Daten wie Kategorien und App-Bewertungen hinzuzufügen. Diese basieren jedoch auf dem Feedback von Entwicklern und Nutzern.

In den kommenden Monaten würden wir gerne sehen, wie Entwickler dieses neue UI-Muster erkunden, und würden uns über Feedback von Ihnen freuen. Füllen Sie dieses Formular aus, um sich mit uns in Verbindung zu setzen.