Seit der Einführung des Banners zum Hinzufügen zum Startbildschirm haben wir daran gearbeitet, 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 bereitzustellen. In Chrome 68 nehmen wir entsprechende Änderungen vor.
Was ändert sich?
Ab Chrome 68 für Android (stabil im Juli 2018) wird das Banner „Zum Startbildschirm hinzufügen“ nicht mehr in Chrome angezeigt. Wenn die Website die Kriterien zum Hinzufügen zum Startbildschirm erfüllt, wird in Chrome die Miniinfoleiste angezeigt. Wenn der Nutzer dann auf die Miniinfoleiste klickt oder prompt()
für das Ereignis beforeinstallprompt
innerhalb einer Nutzergeste aufruft, zeigt Chrome ein modales Dialogfeld zum Hinzufügen zum Startbildschirm an.
A2HS-Banner Chrome 67 und älter
Wird automatisch angezeigt, wenn die Website die Kriterien zum Hinzufügen zum Startbildschirm erfüllt und die Website preventDefault()
beim Ereignis beforeinstallprompt
nicht aufruft
ODER
Wird angezeigt, indem prompt()
für das Ereignis beforeinstallprompt
aufgerufen wird.
Mini-Infoleiste Chrome 68 und höher
Wird angezeigt, wenn die Website die Kriterien für „Zum Startbildschirm hinzufügen“ erfülltWenn sie von einem Nutzer geschlossen wird, wird sie erst nach einem ausreichenden Zeitraum (etwa drei Monate) angezeigt.
Wird unabhängig davon angezeigt, ob preventDefault()
beim Ereignis beforeinstallprompt
aufgerufen wurde.
Diese UI-Anzeige wird in einer zukünftigen Version von Chrome entfernt, wenn die Omnibox-Installationsschaltfläche eingeführt wird.
A2HS-Dialogfeld
Wird angezeigt, wenn in Chrome 68 und höher innerhalb einer Nutzergeste für das Ereignis beforeinstallprompt
prompt()
aufgerufen wird.
ODER
Wird angezeigt, wenn ein Nutzer in Chrome 68 und höher auf die Miniinfoleiste tippt.
ODER
Wird in allen Chrome-Versionen angezeigt, nachdem der Nutzer im Chrome-Menü auf „Zum Startbildschirm hinzufügen“ geklickt hat.
Miniinfoleiste
Die Miniinfoleiste ist eine UI-Komponente von Chrome und kann nicht von der Website gesteuert werden, kann aber vom Nutzer einfach geschlossen werden. Nachdem sie vom Nutzer geschlossen wurden, wird sie erst wieder angezeigt, wenn genügend Zeit verstrichen ist (derzeit 3 Monate). Die Miniinfoleiste wird angezeigt, wenn die Website die Kriterien zum Hinzufügen zum Startbildschirm erfüllt, unabhängig davon, ob du preventDefault()
für das beforeinstallprompt
-Ereignis festgelegt hast.
Anstatt beim Seitenaufbau eine Aufforderung an den Nutzer zu senden (ein Antimuster für Berechtigungsanfragen), können Sie angeben, dass Ihre Anwendung mit einer Benutzeroberfläche installiert werden kann. Daraufhin wird die modale Installationsaufforderung angezeigt. Bei dieser Desktop-PWA wird beispielsweise direkt über dem Profilnamen des Nutzers die Schaltfläche „App installieren“ eingefügt.
Aufforderungen zur Installation Ihrer App bei einer Nutzergeste wirken weniger Spam und erhöhen die Wahrscheinlichkeit, dass sie auf „Hinzufügen“ statt auf „Abbrechen“ klicken. Wenn Sie eine Installationsschaltfläche in Ihre App einbinden, ist die Schaltfläche auch morgen oder immer dann verfügbar, wenn sie zur Installation bereit ist.
Auf beforeinstallprompt
-Ereignis warten
Wenn deine Website die Kriterien zum Hinzufügen zum Startbildschirm erfüllt, löst Chrome ein beforeinstallprompt
-Ereignis aus, speichert einen Verweis auf das Ereignis und aktualisiert deine Benutzeroberfläche, damit der Nutzer deine App zu seinem 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 zum Hinzufügen zum Startbildschirm).
Wenn der Nutzer die App jedoch später wieder deinstalliert, wird das Ereignis beforeinstallprompt
bei jeder Seitennavigation wieder ausgelöst.
Dialogfeld mit prompt()
wird angezeigt
Wenn das Dialogfeld „Zum Startbildschirm hinzufügen“ angezeigt werden soll, rufst du prompt()
für das gespeicherte Ereignis innerhalb einer Nutzergeste auf. Chrome zeigt das modale Dialogfeld an, in dem der Nutzer aufgefordert wird, die App zu seinem Startbildschirm hinzuzufügen. Warte dann auf das Versprechen, das vom Attribut userChoice
des Ereignisses beforeinstallprompt
zurückgegeben wird. Das Promise gibt ein Objekt mit dem Attribut outcome
zurück, nachdem die Aufforderung angezeigt wurde und der Nutzer darauf geantwortet 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;
});
});
Du kannst prompt()
für das verzögerte Ereignis nur einmal aufrufen. Wenn der Nutzer im Dialogfeld auf „Abbrechen“ klickt, musst du warten, bis das beforeinstallprompt
-Ereignis in der nächsten Seitennavigation ausgelöst wird. Anders als bei herkömmlichen Berechtigungsanfragen werden durch das Klicken auf „Abbrechen“ keine zukünftigen Aufrufe von prompt()
blockiert, da der Aufruf innerhalb einer Nutzergeste aufgerufen werden muss.
Weitere Ressourcen
Weitere Informationen findest du unter App-Installationsbanner:
- Details zum Ereignis
beforeinstallprompt
- Nachverfolgen der Antwort des Nutzers auf die Aufforderung zum Hinzufügen des Startbildschirms
- Tracking, ob die App installiert wurde
- Herausfinden, ob Ihre App als installierte App ausgeführt wird