Installierbar machen

Pete LePage

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

Außerdem ist eine Installationsschaltfläche vorhanden, die standardmäßig ausgeblendet ist.

Auf das „beforeinstallprompt“-Ereignis warten

Wenn der Browser das beforeinstallprompt-Ereignis auslöst, ist das ein Hinweis darauf, 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 Installation erfüllt.

Durch das Erfassen des Ereignisses können Entwickler die Installation anpassen und den Nutzer auffordern, die App zu installieren, wenn sie es für den besten Zeitpunkt halten.

  1. Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.
  2. Fügen Sie dem window-Objekt einen beforeinstallprompt-Event-Handler hinzu.
  3. Speichern Sie event als globale Variable. Wir benötigen sie später, um die Aufforderung anzuzeigen.
  4. Machen Sie die Schaltfläche „Installieren“ wieder sichtbar.

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

Rufen Sie prompt() für das gespeicherte beforeinstallprompt-Ereignis auf, um die Aufforderung zur Installation anzuzeigen. Der Aufruf von prompt() erfolgt im Click-Handler der Installationsschaltfläche, da prompt() über eine Nutzeraktion aufgerufen werden muss.

  1. Fügen Sie einen Click-Event-Handler für die Schaltfläche „Installieren“ hinzu.
  2. Rufen Sie prompt() für das gespeicherte beforeinstallprompt-Ereignis auf.
  3. Protokollieren Sie die Ergebnisse des Prompts.
  4. Setzen Sie das gespeicherte beforeinstallprompt-Ereignis auf „null“.
  5. Schaltfläche „Installieren“ ausblenden

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 Web-App über eine Schaltfläche ist nur eine Möglichkeit für Nutzer, sie zu installieren. Sie können auch das Chrome-Menü, die Mini-Infoleiste und ein Symbol in der Omnibox verwenden. Sie können alle diese Installationsmethoden erfassen, indem Sie auf das appinstalled-Ereignis warten.

  1. Fügen Sie dem window-Objekt einen appinstalled-Event-Handler hinzu.
  2. Das Installationsereignis in Analysetools oder anderen Mechanismen protokollieren.

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.

Hier sind einige zusätzliche Möglichkeiten: