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

Nutzer erhalten Apps, insbesondere Plattform-Apps, in der Regel über App-Shops oder durch Herunterladen und Installieren eines Pakets. Heutzutage werden Apps auch auf Desktop-Computern immer häufiger in zentralen Geschäften angeboten.

Bei Web-Apps ist das Modell anders: Nutzer müssen kein zentrales App-Depot besuchen, um eine Web-App zu erhalten. Nicht alle Web-Anwendungen sind installierbar, die Installation einer App kann je nach Plattform und Browser variieren, 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, wie unten gezeigt:

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

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

Mit der Richer Install UI haben Webentwickler eine neue Möglichkeit, ihren Nutzern bei der Installation zusätzlichen Kontext zu ihrer App zu geben. Diese UI ist für Mobilgeräte ab Chrome 94 und für Computer ab Chrome 108 verfügbar. Chrome wird weiterhin einfache Installationsdialogfelder für installierbare Apps anbieten. Diese größere Benutzeroberfläche bietet Entwicklern jedoch mehr Platz, um ihre Webanwendung hervorzuheben. Sie macht auch den Installationsvorgang vertrauter, da sie den Dialogfeldern in App-Shops ähnelt.

Screenshots der umfangreichen Installations-UI für Computer und Mobilgeräte
Verbesserte Installations-UI für Computer und Mobilgeräte.

Umfassendere Installations-UI aktivieren

Entwickler müssen mindestens einen Screenshot für den entsprechenden Formfaktor im screenshots-Array hinzufügen, um das Dialogfeld mit der Richer-Benutzeroberfläche zur Installation aufzurufen. Das Feld „description“ ist nicht erforderlich, wird aber empfohlen. Das Dialogfeld „Inhalte“ enthält den Inhalt dieser beiden Felder und ähnelt der Installation im App-Shop. So können Nutzer leichter erkennen, dass sie ihrem Gerät eine App 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 den Nutzer dazu animieren, die App auf ihren Geräten zu behalten. Mit screenshots können sie das Erscheinungsbild der Web-App als eigenständiges Produkt präsentieren und bieten denselben einfachen Zugriff wie Plattform-Apps.

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

Die ältere Version der Aufforderung zur Installation lieferte nur wenige Informationen und bietet wenig Kontext. Das entspricht nicht den Erwartungen der Nutzer in Bezug auf die Installation, was dazu führen könnte, dass sie verwirrt sind. Viele lehnten die Installationsanfrage vollständig ab, was auch für die Unternehmen, die sie entwickelten, schlecht war.

Mit mehr Installationen können Sie Inhalte erstellen, die denen auf Betriebssystemen ähneln.

Sie können anhand des Beispiels aus der Manifestdatei der Squoosh App Ihre eigene erstellen und den Dialog live unter https://squoosh.app/ ausprobieren.

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

Foto von Kaboompics .com auf Pexels