Änderungen beim Hinzufügen zum Startbildschirm

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

Screenshot: A2HS-Banner

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

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

Screenshot des A2HS-Dialogfelds

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

Screenshot der Minibar
Die Miniinfoleiste

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.

Frühes Konzept der Installationsschaltfläche in der Omnibox.
Frühes Konzept der Installationsschaltfläche in der Omnibox
Die Miniinfoleiste ist eine Übergangslösung für Chrome unter Android. Unser Ziel ist es, auf allen Plattformen ein einheitliches Erlebnis zu schaffen. Dazu gehört auch eine Installationsschaltfläche in der Omnibox. ## Das Dialogfeld „Zum Startbildschirm hinzufügen“ auslösen
Schaltfläche „Installieren“ in einer progressiven Desktop-Web-App.
Schaltfläche zum Installieren in einer progressiven Web-App für Computer

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

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

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