Seit der Einführung des Banners „Zum Startbildschirm hinzufügen“ arbeiten wir daran, Progressive Web-Apps deutlicher 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 haben wir Änderungen vorgenommen, um dieses Ziel zu erreichen.
Was ändert sich?
Ab Chrome 68 für Android (stabil im Juli 2018) wird das Banner „Zum Startbildschirm hinzufügen“ nicht mehr angezeigt. 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() für das beforeinstallprompt-Ereignis innerhalb einer Nutzeraktion aufrufen, zeigt Chrome ein modales Dialogfeld zum Hinzufügen zum Startbildschirm an.
A2HS-Banner Chrome 67 und früher
Wird automatisch angezeigt, wenn die Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt und die Website preventDefault() nicht für das beforeinstallprompt-Ereignis aufruft.
ODER
Wird durch Aufrufen von prompt() für das Ereignis beforeinstallprompt angezeigt.
Mini-Infoleiste Chrome 68 und höher
Wenn sie von einem Nutzer geschlossen wird, wird sie erst nach einem angemessenen Zeitraum (ca. 3 Monate) wieder angezeigt.
Wird unabhängig davon angezeigt, ob preventDefault() für das beforeinstallprompt-Ereignis aufgerufen wurde.
Diese Benutzeroberfläche wird in einer zukünftigen Version von Chrome entfernt, wenn die Schaltfläche zum Installieren in der Omnibox eingeführt wird.
A2HS Dialog
Wird durch Aufrufen von prompt() innerhalb einer Nutzeraktion für das beforeinstallprompt-Ereignis in Chrome 68 und höher angezeigt.
ODER
Wird angezeigt, wenn ein Nutzer in Chrome 68 und höher auf die Mini-Infoleiste tippt.
ODER
Wird angezeigt, nachdem der Nutzer in allen Chrome-Versionen im Chrome-Menü auf „Dem Startbildschirm hinzufügen“ geklickt hat.
Die Mini-Infoleiste
Die Mini-Infoleiste ist eine Chrome-UI-Komponente und kann nicht von der Website gesteuert werden. Nutzer können sie jedoch ganz einfach schließen. Nachdem der Nutzer die Benachrichtigung geschlossen hat, wird sie erst nach einer gewissen Zeit (derzeit 3 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 auf das beforeinstallprompt-Ereignis preventDefault() haben oder nicht.
Anstatt den Nutzer beim Laden der Seite aufzufordern (ein Antimuster für Berechtigungsanfragen), können Sie mit einer Benutzeroberfläche angeben, dass Ihre App installiert werden kann. Daraufhin wird die modale Installationsaufforderung angezeigt. In dieser Desktop-PWA wird beispielsweise direkt über dem Profilnamen des Nutzers die Schaltfläche „App installieren“ angezeigt.
Wenn Sie die Installation Ihrer App durch eine Nutzeraktion auslösen, wirkt das weniger aufdringlich und die Wahrscheinlichkeit, dass Nutzer auf „Hinzufügen“ statt auf „Abbrechen“ klicken, steigt. Wenn Sie eine Schaltfläche zum Installieren in Ihre App einbauen, ist sie auch dann noch vorhanden, wenn der Nutzer sich heute gegen die Installation entscheidet.
Auf das beforeinstallprompt-Ereignis warten
Wenn Ihre Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, löst Chrome ein beforeinstallprompt-Ereignis aus, speichert einen Verweis auf das Ereignis und aktualisiert die Benutzeroberfläche, um darauf hinzuweisen, 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 beforeinstallprompt-Ereignis wird nicht ausgelöst, wenn die App bereits installiert ist (siehe Kriterien für „Zum Startbildschirm hinzufügen“).
Wenn der Nutzer die App später deinstalliert, wird das beforeinstallprompt-Ereignis wieder bei jedem Seitenaufruf ausgelöst.
Dialogfeld mit prompt() wird angezeigt
Rufen Sie prompt() für das gespeicherte Ereignis innerhalb einer Nutzeraktion auf, um das Dialogfeld „Zum Startbildschirm hinzufügen“ anzuzeigen. In Chrome wird das modale Dialogfeld angezeigt, in dem der Nutzer aufgefordert wird, Ihre App seinem Startbildschirm hinzuzufügen. Warten Sie dann auf das Promise, das von der userChoice-Eigenschaft des beforeinstallprompt-Ereignisses zurückgegeben wird. Das Promise gibt ein Objekt mit der Property outcome zurück, nachdem der Prompt angezeigt wurde 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() nur einmal für das verzögerte Ereignis aufrufen. Wenn der Nutzer im Dialogfeld auf „Abbrechen“ klickt, müssen Sie warten, bis das beforeinstallprompt-Ereignis bei der nächsten Seitenaufrufung ausgelöst wird. Anders als bei herkömmlichen Berechtigungsanfragen wird durch Klicken auf „Abbrechen“ keine Blockierung zukünftiger Aufrufe von prompt() verursacht, da der Aufruf innerhalb einer Nutzeraktion erfolgen muss.
Zusätzliche Ressourcen
Weitere Informationen, einschließlich der folgenden, finden Sie unter App-Installationsbanner:
- Details zum Ereignis
beforeinstallprompt - Reaktion des Nutzers auf die Aufforderung zum Hinzufügen zum Startbildschirm erfassen
- Erfassen, ob die App installiert wurde
- Ermitteln, ob Ihre App als installierte App ausgeführt wird