Umfangreichere UI für die Installation von PWAs

Einführung

Mobilgeräte und die Einführung von App-Shops von Geräteherstellern haben mentales Modell beim Erkennen, Bewerten und Installieren von Software. Die Nutzer kennen App-Shops bereits den zusätzlichen Informationen, die über die App-Shops bereitgestellt werden, z. B. Kontext zur App, Feedback aus sozialen Netzwerken, Bewertungen usw., die auf Desktop-Computern ChromeOS, Mac und Windows.

Herausforderung bei den Installationsplattformen von heute

Wenn ein Nutzer heute eine PWA installieren möchte, erscheint eine Infoleiste und ein modales Overlay mit minimalen Informationen. Wird die Installation fortgesetzt, ist der Vorgang zu schnell beendet, Kontext bieten. Das widerspricht ihren Erwartungen an die Installation von Apps und kann dazu führen, dass sie etwas verwirrt darüber, was passiert ist.

<ph type="x-smartling-placeholder">
</ph> Beispiel für die PWA-Installations-UI
Beispiel für die PWA-Installations-UI

Damit Entwickler Apps bereitstellen können, die auf dem gleichen Niveau wie native Anzeigen sind Chrome führt eine neue Installationsoberfläche ein, mit der Entwickler eine Beschreibung und Screenshots in die Manifest-Datei und lassen sie in einem Dialogfeld am unteren Rand erscheinen. in Chrome für Android.

<ph type="x-smartling-placeholder">
</ph> Beispiel für die Benutzeroberfläche am unteren Rand in Chrome
Beispiel für die Benutzeroberfläche am unteren Rand in Chrome

Dies gibt Entwicklern die Möglichkeit, einen ansprechenderen Installationsprozess zu gestalten. die besser zu den Erwartungen der Nutzenden passt und ihr bestehendes mentales Modell imitiert. installierter Erfahrungen.

<ph type="x-smartling-placeholder">
</ph> Umfassendere Installations-UI maximiert.
Umfassendere Installations-UI in maximierter Form
<ph type="x-smartling-placeholder">
</ph> 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 die

Benutzeroberfläche in der Vorschau 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 näher zu bringen. 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, mit dem einfachen Zugriff, den Plattform-Apps haben.

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

Feedback

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

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