Installierbar machen

Pete LePage

Dieser Fehler enthält das Web-Manifest mit den erforderlichen Feldern, um eine Webanwendung installierbar zu machen.

Außerdem gibt es eine Schaltfläche zum Installieren, die standardmäßig ausgeblendet ist.

Auf das Ereignis „beforeinstallprompt“ warten

Wenn der Browser das Ereignis beforeinstallprompt auslöst, kann die Webanwendung installiert und dem Nutzer eine Schaltfläche zum Installieren angezeigt werden. Das Ereignis beforeinstallprompt wird ausgelöst, wenn die App die Kriterien für die Installierbarkeit erfüllt.

Wenn das Ereignis erfasst wird, können Entwickler die Installation anpassen und den Nutzer zum Installieren auffordern, wenn sie der Meinung sind, dass der richtige Zeitpunkt dafür gekommen ist.

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  2. Fügen Sie dem window-Objekt einen beforeinstallprompt-Ereignis-Handler hinzu.
  3. Speichern Sie event als globale Variable. Wir benötigen sie später, um den Prompt anzuzeigen.
  4. Blenden Sie die Schaltfläche „Installieren“ ein.

Code:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

Klick auf die Schaltfläche „Installieren“ verarbeiten

Wenn Sie die Installationsaufforderung anzeigen lassen möchten, rufen Sie prompt() für das gespeicherte Ereignis beforeinstallprompt auf. prompt() wird im Klick-Handler der Installationsschaltfläche aufgerufen, da prompt() über eine Nutzergeste aufgerufen werden muss.

  1. Fügen Sie der Schaltfläche „Installieren“ einen Click-Event-Handler hinzu.
  2. Rufe prompt() für das gespeicherte beforeinstallprompt-Ereignis auf.
  3. Loggen Sie die Ergebnisse des Prompts.
  4. Legen Sie für das gespeicherte beforeinstallprompt-Ereignis den Wert „null“ fest.
  5. Blenden Sie die Schaltfläche „Installieren“ aus.

Code:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

Installationsereignis erfassen

Die Installation einer Webanwendung über eine Schaltfläche ist nur eine von mehreren Möglichkeiten. Sie können auch das Chrome-Menü, die Mini-Infoleiste und ein Symbol in der Omnibox verwenden. Sie können alle diese Installationsarten erfassen, indem Sie auf das Ereignis appinstalled achten.

  1. Fügen Sie dem window-Objekt einen appinstalled-Ereignis-Handler hinzu.
  2. Protokollieren Sie das Installationsereignis in Analytics oder einem anderen Mechanismus.

Code:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

Weitere Informationen

Herzlichen Glückwunsch, Ihre App kann jetzt installiert werden.

Sie haben folgende Möglichkeiten: