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: Nutzende müssen kein zentralisiertes App-Depot besuchen, um eine Web-App zu erhalten. Nicht alle Web-Apps sind installierbar, die Installation einer App kann je nach Plattform und Browser variieren, Browser haben sogar unterschiedliche Menüs und Oberflächen zur Installation der App. Sobald der Nutzer auf diese Installationsoption klickt, enthält das Standarddialogfeld keine zusätzlichen Informationen, wie unten dargestellt:
<ph type="x-smartling-placeholder">![Das Standard-Installationsdialogfeld des Browsers für den Desktop.](https://developer.chrome.com/static/blog/richer-install-ui-desktop/image/the-browser-default-insta-3c6ce3fa8766e.png?authuser=6&hl=de)
![Das Standard-Installationsdialogfeld des Browsers für Mobilgeräte.](https://developer.chrome.com/static/blog/richer-install-ui-desktop/image/the-browser-default-inst-14907440251fd.png?authuser=6&hl=de)
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 bietet weiterhin einfache Installationsdialogfelder für installierbare Apps. Dank der größeren Benutzeroberfläche haben Entwickler jedoch mehr Platz, um ihre Webanwendung hervorzuheben. Der Installationsprozess ähnelt den Dialogfeldern in App-Shops.
<ph type="x-smartling-placeholder">![Screenshots der umfangreichen Installations-UI für Computer und Mobilgeräte](https://developer.chrome.com/static/blog/richer-install-ui-desktop/image/screenshots-richer-insta-56c432a76a62c.jpg?authuser=6&hl=de)
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 detaillierte 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. Dies stimmt nicht mit dem des Nutzers überein was die Installation eigentlich bedeutet, und könnten verwirren, was passiert ist. Viele lehnten die Installationsanfrage komplett 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 geben 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 umfangreichen Installations-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