Ä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.

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.

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

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