Seit der Einführung des Banners „Zum Startbildschirm hinzufügen“ arbeiten wir daran, progressive Web-Apps verständlicher zu kennzeichnen und die Installation für Nutzer zu vereinfachen. Unser Ziel ist es, auf allen Plattformen eine Installationsschaltfläche in der Omnibox anzubieten. In Chrome 68 nehmen wir Änderungen vor, um diesem Ziel näherzukommen.
Was ändert sich?
Ab Chrome 68 für Android (stabile Version im Juli 2018) wird in Chrome kein Banner mehr angezeigt, über das Sie Apps zum Startbildschirm hinzufügen können. Wenn die Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, wird in Chrome die Mini-Infoleiste angezeigt. Wenn der Nutzer dann auf die Mini-Infoleiste klickt oder Sie prompt() im Rahmen einer Nutzergeste auf das Ereignis beforeinstallprompt anwenden, wird in Chrome ein modales Dialogfeld zum Hinzufügen zum Startbildschirm angezeigt.
A2HS-Banner Chrome 67 und älter
Wird automatisch angezeigt, wenn die Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt und das Ereignis beforeinstallprompt nicht preventDefault() aufruft.
ODER
Wird durch Aufrufen von prompt() für das Ereignis beforeinstallprompt angezeigt.
Mini-Infoleiste Chrome 68 und höher
Wenn ein Nutzer das Pop-up schließt, wird es erst nach einem ausreichenden Zeitraum (ca. 3 Monate) wieder angezeigt.
Wird unabhängig davon angezeigt, ob preventDefault() für das Ereignis beforeinstallprompt aufgerufen wurde.
Diese Benutzeroberfläche wird in einer zukünftigen Version von Chrome entfernt, wenn die Schaltfläche „In Omnibox installieren“ eingeführt wird.
A2HS-Dialog
Wird in Chrome 68 und höher durch Aufrufen von prompt() innerhalb einer Nutzergeste für das Ereignis beforeinstallprompt angezeigt.
ODER
Wird angezeigt, wenn ein Nutzer in Chrome 68 und höher auf die Mini-Infoleiste tippt.
ODER
Wird in allen Chrome-Versionen angezeigt, nachdem der Nutzer im Chrome-Menü auf „Zum Startbildschirm hinzufügen“ geklickt hat.
Mini-Infobar
Die Mini-Infoleiste ist eine Chrome-UI-Komponente und kann nicht von der Website gesteuert werden, sondern kann vom Nutzer einfach geschlossen werden. Nachdem der Nutzer sie geschlossen hat, wird sie erst nach einer ausreichenden Zeitspanne (aktuell drei Monate) wieder angezeigt. Die Mini-Infoleiste wird angezeigt, wenn die Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, unabhängig davon, ob Sie das beforeinstallprompt-Ereignis preventDefault() gesendet haben oder nicht.
Anstatt den Nutzer beim Laden der Seite um die Berechtigung zu bitten (ein Anti-Muster für Berechtigungsanfragen), können Sie angeben, dass Ihre App über eine Benutzeroberfläche installiert werden kann. Daraufhin wird der modale Installationsaufforderung angezeigt. In dieser Desktop-PWA wird beispielsweise direkt über dem Profilnamen des Nutzers die Schaltfläche „App installieren“ hinzugefügt.
Wenn Sie Nutzer auffordern, Ihre App durch eine Nutzergeste zu installieren, wirkt das weniger spammig und die Wahrscheinlichkeit steigt, dass sie auf „Hinzufügen“ statt auf „Abbrechen“ klicken. Wenn Sie eine Schaltfläche „Installieren“ in Ihre App einbinden, ist sie auch morgen noch da, wenn der Nutzer Ihre App installieren möchte, oder wann immer er bereit ist, sie zu installieren.
Auf das Ereignis beforeinstallprompt warten
Wenn Ihre Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, löst Chrome ein beforeinstallprompt-Ereignis aus, speichert eine Referenz auf das Ereignis und aktualisiert die Benutzeroberfläche, um anzuzeigen, dass der Nutzer Ihre App zum Startbildschirm hinzufügen kann.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
Das Ereignis beforeinstallprompt wird nicht ausgelöst, wenn die App bereits installiert ist (siehe Kriterien für das Hinzufügen zum Startbildschirm).
Wenn der Nutzer die App jedoch später deinstalliert, wird das Ereignis beforeinstallprompt bei jeder Seitennavigation wieder ausgelöst.
Dialogfeld mit prompt() wird angezeigt
Wenn Sie das Dialogfeld „Zum Startbildschirm hinzufügen“ aufrufen möchten, rufen Sie prompt() für das gespeicherte Ereignis innerhalb einer Nutzergeste auf. Chrome zeigt das modale Dialogfeld an, in dem der Nutzer aufgefordert wird, Ihre App seinem Startbildschirm hinzuzufügen. Anschließend warte auf das Promise, das von der userChoice-Eigenschaft des beforeinstallprompt-Ereignisses zurückgegeben wird. Das Promise gibt ein Objekt mit einer outcome-Property zurück, nachdem die Aufforderung angezeigt und der Nutzer darauf reagiert hat.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
Sie können prompt() für das verzögerte Ereignis nur einmal aufrufen. Wenn der Nutzer im Dialogfeld auf „Abbrechen“ klickt, müssen Sie warten, bis das beforeinstallprompt-Ereignis bei der nächsten Seitennavigation ausgelöst wird. Anders als bei herkömmlichen Berechtigungsanfragen werden durch Klicken auf „Abbrechen“ keine zukünftigen Aufrufe von prompt() blockiert, da dieser Aufruf innerhalb einer Nutzergeste erfolgen muss.
Zusätzliche Ressourcen
Weitere Informationen finden Sie unter Banner für App-Installationen. Dort erfahren Sie unter anderem:
- Details zum Ereignis
beforeinstallprompt - Antwort des Nutzers auf die Aufforderung zum Hinzufügen zum Startbildschirm erfassen
- Überprüfen, ob die App installiert wurde
- Prüfen, ob Ihre App als installierte App ausgeführt wird