Installierbar machen

Pete LePage

Dieser Fehler enthält das Webmanifest mit den Pflichtfeldern, um eine Web-App installierbar zu machen.

Sie verfügt auch über eine Schaltfläche zum Installieren, die standardmäßig ausgeblendet ist.

Auf das Ereignis „beforeinstallprompt“ warten

Wenn der Browser das beforeinstallprompt-Ereignis auslöst, weist dies darauf hin, dass die Web-App installiert werden kann 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 Sie das Ereignis aufzeichnen, können Entwickler die Installation anpassen und den Nutzer zur Installation auffordern, wenn er es für den besten Zeitpunkt hält.

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  2. Fügen Sie dem window-Objekt einen beforeinstallprompt-Event-Handler hinzu.
  3. Speichern Sie die event als globale Variable. Sie werden später benötigt, um die Eingabeaufforderung anzuzeigen.
  4. Blende die Installationsschaltfläche 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);
});

Umgang mit dem Klicken auf die Installationsschaltfläche

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

  1. Fügen Sie einen Klick-Event-Handler für die Installationsschaltfläche hinzu.
  2. prompt() für das gespeicherte beforeinstallprompt-Ereignis aufrufen.
  3. Protokollieren Sie die Ergebnisse des Prompts.
  4. Legen Sie für das gespeicherte beforeinstallprompt-Ereignis den Wert „null“ fest.
  5. Blende die Installationsschaltfläche 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 Installationsschaltfläche ist nur eine von mehreren Möglichkeiten, wie Nutzer sie installieren können. Alternativ können sie das Chrome-Menü, die Miniinfoleiste oder ein Symbol in der Omnibox nutzen. Sie können alle diese Möglichkeiten der Installation verfolgen, indem Sie auf das Ereignis appinstalled warten.

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

Ihre App kann jetzt installiert werden.

Außerdem haben Sie folgende Möglichkeiten: