In Chrome 76 können Sie die Mini-Infoleiste „Zum Startbildschirm hinzufügen“ ausblenden

Penny McLachlan
Penny McLachlan

Hintergrundinformationen zu progressiven Web-Apps und der Mini-Infoleiste

Progressive Web-Apps (PWAs) sind ein Muster für die Erstellung von app-ähnlichen, sofort einsatzbereiten, zuverlässigen und installierbaren Websites.

Wenn Ihre PWA die Checkliste zur Installationsfähigkeit auf Android-Geräten besteht, wird unten im Browserfenster ein Chrome-Systemdialogfeld namens Mini-Infoleiste angezeigt.

Derzeit wird die Mini-Infoleiste „Zum Startbildschirm hinzufügen“ gleichzeitig mit dem Ereignis beforeinstallprompt angezeigt.

Änderungen in Chrome 76

Wir haben uns das Feedback unserer Community angehört und festgestellt, dass Entwickler mehr Kontrolle darüber wünschen, wann sie Nutzer zum Installieren einer PWA auffordern. Das Feedback von Creatorn ist uns wichtig!

Ab Chrome 76 können Sie die Mini-Infoleiste verhindern, indem Sie preventDefault() für das Ereignis beforeinstallprompt aufrufen.

Mit dem Ereignis beforeinstallprompt können Sie die Installation Ihrer progressiven Webanwendung bewerben und es Nutzern so erleichtern, sie ihrem Startbildschirm hinzuzufügen. Unsere Community hat uns mitgeteilt, dass Nutzer, die eine PWA auf dem Startbildschirm installieren, sehr aktiv sind. Sie führen mehr wiederkehrende Besuche aus, verbringen mehr Zeit in der App und erzielen gegebenenfalls höhere Conversion-Raten.

Beispiel für Pinterest, das mit einem Installationsbanner für die Installation seiner PWA wirbt.
Beispiel für Pinterest, das mit einem Installationsbanner für die Installierbarkeit seiner PWA wirbt. Unter Zum Startbildschirm hinzufügen finden Sie vollständige Details zum Ablauf, einschließlich Codebeispielen und anderen Best Practices.

Wenn Sie Ihre Webanwendung ohne Mini-Infobar bewerben möchten, hören Sie auf das Ereignis beforeinstallprompt und speichern Sie es dann. Aktualisieren Sie als Nächstes Ihre Benutzeroberfläche, um anzugeben, dass Ihre PWA installiert werden kann. Sie können beispielsweise eine Schaltfläche zum Installieren hinzufügen, ein Installationsbanner anzeigen, In-Feed-Angebote verwenden oder eine Menüoption einblenden. Wenn der Nutzer auf das Installationselement klickt, rufen Sie prompt() auf dem gespeicherten beforeinstallprompt-Ereignis auf, um den modalen Dialog zum Hinzufügen zum Startbildschirm aufzurufen.

Zukunft der Mini-Infoleiste „Zum Startbildschirm hinzufügen“

Die Infoleiste „Zum Startbildschirm hinzufügen“ ist weiterhin eine vorübergehende Maßnahme. Wir testen neue UI-Muster, mit denen Nutzer von Progressive Web Apps weiterhin die Möglichkeit haben, die App zu installieren. Dabei soll die Nutzererfahrung beim Surfen möglichst unkompliziert sein.