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

Penny McLachlan
Penny McLachlan
X GitHub

Hintergrund zu progressiven Web-Apps und der Mini-Infoleiste

Progressive Web-Apps (PWAs) sind ein Muster zum Erstellen app-ähnlicher, sofort ladender, zuverlässiger und installierbarer Websites.

Wenn Ihre PWA die Checkliste zur Installierbarkeit unter Android besteht, wird unten im Browserfenster ein Chrome-Systemdialogfeld mit dem Namen „Miniinfoleiste“ angezeigt.

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

Änderungen in Chrome 76

Viele Entwickler haben das Feedback unserer Community erhalten und möchten mehr Kontrolle darüber haben, wann sie Nutzer auffordern, eine PWA zu installieren. Wir haben dieses Feedback aufgegriffen und

Ab Chrome 76 kannst du die Miniinfoleiste blockieren, indem du preventDefault() für das beforeinstallprompt-Ereignis aufrufst.

Mit dem beforeinstallprompt-Ereignis kannst du die Installation deiner progressiven Web-App fördern, sodass Nutzer sie ganz einfach zu ihrem Startbildschirm hinzufügen können. Unsere Community hat uns mitgeteilt, dass Nutzer, die eine PWA auf dem Startbildschirm installieren, sehr aktiv sind, mehr Wiederholungen, die Verweildauer in der App und, falls zutreffend, höhere Conversion-Raten erzielen.

Beispiel für Pinterest, der ein Installationsbanner verwendet, um die Installierbarkeit seiner PWA zu bewerben.
Beispiel für Pinterest, der ein Installationsbanner verwendet, um die Installierbarkeit seiner PWA zu bewerben. Unter Zum Startbildschirm hinzufügen findest du weitere Informationen zum Ablauf „Zum Startbildschirm hinzufügen“, einschließlich Codebeispielen und anderer Best Practices.

Wenn Sie Ihre Webanwendung ohne die Miniinfoleiste bewerben möchten, warten Sie auf das Ereignis beforeinstallprompt und speichern Sie das Ereignis dann. Aktualisieren Sie als Nächstes Ihre Benutzeroberfläche, um anzugeben, dass Ihre PWA installiert werden kann. Fügen Sie dazu beispielsweise eine Installationsschaltfläche, ein Installationsbanner, In-Feed-Angebote oder eine Menüoption hinzu. Wenn der Nutzer auf das Installationselement klickt, rufen Sie prompt() für das gespeicherte beforeinstallprompt-Ereignis auf, um das modale Dialogfeld „Zum Startbildschirm hinzufügen“ anzuzeigen.

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

Die Verwendung der Infoleiste „Zum Startbildschirm hinzufügen“ ist weiterhin eine vorübergehende Maßnahme. Wir experimentieren mit neuen UI-Mustern, die Nutzern von progressiven Web-Apps die Möglichkeit geben, sie zu installieren, und zwar auf eine Weise, die überflüssiges Browsererlebnis reduziert.