Installierbar machen

Pete LePage

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

Es gibt auch eine Schaltfläche zum Installieren, die standardmäßig ausgeblendet ist.

Auf das Ereignis „beforeinstallprompt“ warten

Wenn der Browser das Ereignis beforeinstallprompt auslöst, bedeutet das, dass die Web-App installiert und dem Nutzer eine Installationsschaltfläche angezeigt werden kann. 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. Sie benötigen sie später, um die Eingabeaufforderung 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 Aufforderung zur Installation 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 einen Click-Event-Handler für die Installationsschaltfläche hinzu.
  2. Rufen Sie 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 verfolgen, indem Sie auf das Ereignis appinstalled warten.

  1. Fügen Sie dem window-Objekt einen appinstalled-Event-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: