Installierbar machen

Pete LePage

Diese Störungen enthalten das Webmanifest mit den Pflichtfeldern, um eine Web-App installierbar zu machen.

Außerdem verfügt sie über eine Installationsschaltfläche, die standardmäßig ausgeblendet ist.

Auf das Ereignis „beforeinstallprompt“ warten

Wenn der Browser das Ereignis beforeinstallprompt auslöst, dass die Web-App installiert und eine Installationsschaltfläche angezeigt werden kann für den Nutzer. Das Ereignis beforeinstallprompt wird ausgelöst, wenn die App die Kriterien für die Installierbarkeit.

Wenn das Ereignis erfasst wird, können Entwickler die Installation anpassen und den Nutzer auffordern installieren, wenn dies der beste Zeitpunkt ist.

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  2. Fügen Sie dem window-Objekt einen beforeinstallprompt-Event-Handler hinzu.
  3. Speichern Sie event als globale Variable. benötigen wir sie später, um .
  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);
});

Klicks auf die Installationsschaltfläche verarbeiten

Rufe prompt() auf der gespeicherten beforeinstallprompt auf, um die Installationsaufforderung anzuzeigen . Der Aufruf von prompt() erfolgt im Klick-Handler der Installationsschaltfläche, da prompt() muss über eine Nutzergeste aufgerufen werden.

  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. Protokolliere die Ergebnisse der Eingabeaufforderung.
  4. Setzen Sie das gespeicherte beforeinstallprompt-Ereignis auf null.
  5. Blenden Sie 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 Möglichkeit, wie Nutzer installieren können. Sie können auch das Chrome-Menü, die Miniinfoleiste und über ein Symbol in der Omnibox. Sie können alle Installationsmethoden, indem Sie auf den 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: