Umfangreichere Installation über die Benutzeroberfläche für Computer verfügbar

Adriana Jara
Adriana Jara

Nutzer erhalten Apps, insbesondere Plattform-Apps, in der Regel über App-Shops oder durch Herunterladen und Installieren eines Pakets. Heutzutage verlagert sich sogar die Desktop-Erfahrung hin zur Bereitstellung von Apps in zentralen Stores.

Bei Web-Apps ist das Modell anders: Nutzer müssen kein zentrales App-Depot aufrufen, um eine Webanwendung zu erhalten. Nicht alle Websites sind installierbar, die Installation einer App kann sich je nach Plattform und Browser unterscheiden, Browser haben sogar unterschiedliche Menüs und Oberflächen für die Installation der App. Sobald der Nutzer auf diese Installationsoption klickt, enthält das Standarddialogfeld keine zusätzlichen Informationen (siehe unten):

Das standardmäßige Installationsdialogfeld des Browsers für den Desktop.
Standard-Installationsdialogfeld auf dem Computer.
Das standardmäßige Installationsdialogfeld des Browsers für Mobilgeräte.
Standard-Installationsdialogfeld auf Mobilgeräten.

Das Erstellen von Webanwendungen, die installiert werden können und dieselben Interaktionen wie Plattform-Apps ermöglichen, erfordert technische Arbeit, um solche Erfahrungen zu ermöglichen, und eine gute Anleitung für die Nutzer, um den unterschiedlichen Installationsablauf zu nutzen.

Mit der Richer Install UI haben Webentwickler eine neue Möglichkeit, ihren Nutzern bei der Installation spezifischen Kontext zu ihrer App zur Verfügung zu stellen. Diese Benutzeroberfläche ist für Mobilgeräte ab Chrome 94 und für Computer ab Chrome 108 verfügbar. Während Chrome weiterhin die einfachen Installationsdialogfelder für installierbare Apps anbieten wird, bietet diese größere Benutzeroberfläche Entwicklern die Möglichkeit, ihre Webanwendung hervorzuheben. Außerdem wird der Installationsvorgang vertrauter, da er den Dialogfeldern aus App-Shops ähnelt.

Screenshots der Richer-Benutzeroberfläche für die Installation auf Computern und Mobilgeräten.
Umfangreichere Benutzeroberfläche für die Installation auf Computern und Mobilgeräten.

Umfassendere Installations-UI aktivieren

Entwickler müssen mindestens einen Screenshot für den entsprechenden Formfaktor im Array screenshots hinzufügen, um das Dialogfeld mit der Richter Install UI anzuzeigen. Das Feld „description“ ist nicht erforderlich, wird aber empfohlen. Das Dialogfeld „Inhalte“ enthält die Inhalte dieser beiden Felder, um die App-Installation im App-Shop zu ermöglichen. So können Nutzer leichter erkennen, dass sie ihrem Gerät eine App hinzufügen, und da mehr Speicherplatz verfügbar ist, können Entwickler ihren Nutzern bei der Installation spezifischen Kontext liefern.

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

Eine ausführliche Spezifikation und eine Anleitung dazu, wie Sie sie Ihrer App hinzufügen, finden Sie unter Richter Install UI-Muster.

Der ältere Stil der Installationsaufforderung bot wenig Informationen und wenig Kontext. Dies entsprach nicht den Erwartungen der Nutzer im Hinblick auf die Installation und könnte sie verwirren darüber, was passiert ist. Viele lehnten die Installationsanfrage komplett ab, was auch für die Unternehmen schlecht war, die sie entwickelten.

Mit aufwendigeren Installationen lassen sich Inhalte erstellen, die denen unter Betriebssystemen ähneln.

Sie können Ihre eigene Manifestdatei erstellen, indem Sie dem Beispiel aus der Manifestdatei der Squoosh App folgen. Unter https://squoosh.app/ können Sie das Dialogfeld live ausprobieren.

Feedback Wir erwägen andere Optionen für mehr Installationen, einschließlich Kategorien und App-Bewertungen. Für diese Entscheidung benötigen wir Ihr Feedback. Erzähl uns von dem Design Gibt es etwas an der Richer Installs UI, das nicht wie erwartet funktioniert? Oder brauchen Sie bestimmte Daten, um Ihre Idee umzusetzen? Hast du eine Frage oder einen Kommentar? Füllen Sie dieses Formular aus.

Foto von Kaboompics .com auf Pexels