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 użytkownikowi można wyświetlić przycisk instalacji. Zdarzenie beforeinstallprompt jest wywoływane, gdy aplikacja spełnia kryteria instalacji.

Rejestrowanie zdarzenia umożliwia deweloperom dostosowywanie instalacji i wyświetlanie użytkownikowi prośby o instalację w najlepszym ich zdaniem momencie.

  1. Kliknij Remiks do edycji, aby umożliwić edytowanie projektu.
  2. Dodaj beforeinstallprompt obsługę zdarzeń do obiektu window.
  3. Zapisz event jako zmienną globalną. Będzie nam ona później potrzebna do wyświetlenia promptu.
  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 funkcję prompt() w zapisanym beforeinstallprompt zdarzeniu. Wywołanie funkcji prompt() odbywa się w procedurze obsługi kliknięcia przycisku instalacji, ponieważ funkcja prompt() musi być wywoływana przez gest użytkownika.

  1. Dodaj moduł obsługi zdarzeń kliknięcia dla przycisku instalacji.
  2. Zadzwoń prompt() na zapisane wydarzenie 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ą to zrobić. Mogą też korzystać z menu Chrome, mini-paska informacyjnego i ikony w omniboksie. Możesz śledzić wszystkie te sposoby instalacji, nasłuchując zdarzenia appinstalled.

  1. Dodaj appinstalled obsługę zdarzeń do obiektu window.
  2. Zarejestruj zdarzenie instalacji w narzędziach analitycznych lub w inny sposób.

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! Twoją aplikację można już zainstalować.

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