Änderungen beim Hinzufügen zum Startbildschirm

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

Screenshot: A2HS-Banner

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

Screenshot der A2HS-Infoleiste
Wird angezeigt, wenn die Website die Kriterien für „Zum Startbildschirm hinzufügen“ erfüllt

Wenn 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

Screenshot des A2HS-Dialogfelds

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

Screenshot der Mini-Infoleiste
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.

Frühes Konzept der Installationsschaltfläche in der Omnibox.
Frühes Konzept der Installationsschaltfläche in der Omnibox
Die Mini-Infoleiste ist eine vorläufige Funktion für Chrome unter Android, um eine einheitliche Nutzung auf allen Plattformen zu ermöglichen. Dazu gehört auch eine Installationsschaltfläche in der Omnibox. ## Dialogfeld „Zum Startbildschirm hinzufügen“ auslösen
Installationsschaltfläche in einer progressiven Web-App für Computer.
Schaltfläche „Installieren“ in einer progressiven Web-App für Computer

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

Dialogfeld „Zum Startbildschirm hinzufügen“.
Dialogfeld zum Startbildschirm hinzufügen

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