Pozwól na instalację

Pete LePage

Nasłuchiwanie zdarzenia beforeinstallprompt

Gdy przeglądarka wywoła zdarzenie beforeinstallprompt, oznacza to, że aplikację internetową można zainstalować i można wyświetlić użytkownikowi przycisk instalacji. Zdarzenie beforeinstallprompt jest wywoływane, gdy aplikacja spełnia kryteria możliwości instalacji.

Przechwycenie zdarzenia umożliwia deweloperom dostosowanie instalacji i wyświetlenie użytkownikowi prośby o instalację w najlepszym momencie.

  1. Kliknij Zremiksuj, aby edytować, aby umożliwić edytowanie projektu.
  2. Dodaj moduł obsługi zdarzeń beforeinstallprompt do obiektu window.
  3. Zapisz event jako zmienną globalną. Będzie ona potrzebna później do wyświetlenia prośby.
  4. Odkryj przycisk instalacji.

Kod:

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);
});

Obsługa kliknięcia przycisku instalacji

Aby wyświetlić prośbę o instalację, wywołaj metodę prompt() w zapisanym zdarzeniu beforeinstallprompt. Wywołanie prompt() jest wykonywane w procedurze obsługi kliknięcia przycisku instalacji, ponieważ prompt() musi być wywoływane przez gest użytkownika.

  1. Dodaj moduł obsługi zdarzeń kliknięcia przycisku instalacji.
  2. Wywołaj prompt() w zapisywanym zdarzeniu beforeinstallprompt.
  3. Zapisz wyniki promptu.
  4. Ustaw zapisane zdarzenie beforeinstallprompt na wartość null.
  5. Ukryj przycisk instalacji.

Kod:

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);
});

Śledzenie zdarzenia instalacji

Instalowanie aplikacji internetowej za pomocą przycisku instalacji to tylko jeden ze sposobów, w jaki użytkownicy mogą ją zainstalować. Mogą też użyć menu Chrome, minipaska informacyjnego i ikony w omniboksie. Możesz śledzić wszystkie te sposoby instalacji, nasłuchując zdarzenia appinstalled.

  1. Dodaj moduł obsługi zdarzeń appinstalled do obiektu window.
  2. Zarejestruj zdarzenie instalacji w statystykach lub innym mechanizmie.

Kod:

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

Więcej informacji

Gratulacje, aplikację można teraz zainstalować.

Oto kilka dodatkowych czynności, które możesz wykonać: