Seit der Einführung des Banners „Zum Startbildschirm hinzufügen“ haben wir daran gearbeitet, progressive Web-Apps deutlicher zu kennzeichnen und die Installationsmöglichkeiten für Nutzer zu vereinfachen. Letztendlich möchten wir auf allen Plattformen eine Installationsschaltfläche in der Omnibox bereitstellen. In Chrome 68 nehmen wir entsprechende Änderungen vor.
Was ändert sich?
Ab Chrome 68 auf Android-Geräten (stabile Version im Juli 2018) wird das Banner zum Hinzufügen zum Startbildschirm nicht mehr in Chrome angezeigt. Wenn die Website die Kriterien zum Hinzufügen zum Startbildschirm erfüllt, zeigt Chrome die Miniinfoleiste an. Wenn der Nutzer dann auf die Miniinfoleiste klickt oder Sie mit einer Touch-Geste prompt()
für das Ereignis beforeinstallprompt
aufrufen, 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 für „Zum Startbildschirm hinzufügen“ erfüllt und preventDefault()
für das Ereignis beforeinstallprompt
nicht aufgerufen wird
ODER
Wird angezeigt, wenn 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 Ablauf eines ausreichenden Zeitraums (~3 Monate) angezeigt.
Wird unabhängig davon angezeigt, ob preventDefault()
für das Ereignis beforeinstallprompt
aufgerufen wurde.
Diese UI-Anzeige wird in einer zukünftigen Chrome-Version entfernt, wenn die Omnibox-Installationsschaltfläche eingeführt wird.
A2HS-Dialogfeld
Wird angezeigt, wenn prompt()
über eine Nutzergeste für das Ereignis beforeinstallprompt
in Chrome 68 und höher 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.
Die Miniinfobar
Die Miniinfoleiste ist eine Komponente der Chrome-Benutzeroberfläche und kann nicht von der Website gesteuert, aber vom Nutzer leicht geschlossen werden. Wenn sie vom Nutzer geschlossen wurde, wird sie erst wieder angezeigt, wenn ausreichend 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 beim Ereignis beforeinstallprompt
preventDefault()
verwendest oder nicht.
Anstatt den Nutzer beim Seitenaufbau aufzufordern (ein Anti-Muster für Berechtigungsanfragen), können Sie angeben, dass Ihre Anwendung mit einer UI installiert werden kann. Dann wird die modale Installationsaufforderung angezeigt. Bei dieser Desktop-PWA wird beispielsweise direkt über dem Profilnamen des Nutzers die Schaltfläche „App installieren“ hinzugefügt.
Die Aufforderung zur Installation deiner App bei einer Nutzergeste wirkt weniger Spam und erhöht die Wahrscheinlichkeit, dass er auf „Hinzufügen“ statt auf „Abbrechen“ klickt. Durch die Einbindung einer Installationsschaltfläche in deine App wird die Schaltfläche auch dann angezeigt, wenn der Nutzer deine App heute nicht installieren möchte, oder wenn er zur Installation bereit ist.
Warten auf das Ereignis beforeinstallprompt
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, um anzugeben, dass 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 deinstalliert, wird das Ereignis beforeinstallprompt
bei jeder Seitennavigation wieder ausgelöst.
Dialogfeld mit prompt()
wird angezeigt
Um das Dialogfeld „Zum Startbildschirm hinzufügen“ anzuzeigen, rufen Sie mit einer Nutzergeste prompt()
für das gespeicherte Ereignis auf. Chrome zeigt das modale Dialogfeld an, in dem der Nutzer aufgefordert wird, Ihre App zum Startbildschirm hinzuzufügen. Warten Sie dann auf das Promise, das vom Attribut userChoice
des Ereignisses beforeinstallprompt
zurückgegeben wird. Das Promise gibt ein Objekt mit einem outcome
-Attribut zurück, nachdem die Eingabeaufforderung 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;
});
});
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 Ereignis beforeinstallprompt
bei der nächsten Seitennavigation ausgelöst wird. Anders als bei herkömmlichen Berechtigungsanfragen werden zukünftige Aufrufe von prompt()
durch Klicken auf „Abbrechen“ nicht blockiert, da dieser Aufruf innerhalb einer Nutzergeste aufgerufen werden muss.
Weitere Ressourcen
Weitere Informationen finden Sie unter App-Installationsbanner:
- Details zum Ereignis „
beforeinstallprompt
“ - Die Antwort des Nutzers auf die Aufforderung „Startbildschirm hinzufügen“ verfolgen
- Nachverfolgung, ob die App installiert wurde
- Bestimmen, ob Ihre App als installierte App ausgeführt wird