Pozwól na instalację

Pete LePage

Ten błąd zawiera plik manifestu internetowego z wymaganymi polami, aby umożliwić instalację aplikacji internetowej.

Zawiera też przycisk instalowania, który jest domyślnie ukryty.

Nasłuchiwanie zdarzenia beforeInstallPrompt

Gdy przeglądarka wywoła zdarzenie beforeinstallprompt, oznacza to, że aplikacja internetowa może zostać zainstalowana, a użytkownikowi może zostać wyświetlony przycisk instalacji. Zdarzenie beforeinstallprompt jest wywoływane, gdy aplikacja spełnia kryteria możliwości zainstalowania.

Przechwytywanie tego zdarzenia umożliwia deweloperom dostosowanie instalacji i poproszenie użytkownika o jej przeprowadzenie w najlepszym momencie.

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Dodaj do obiektu window obiekt beforeinstallprompt.
  3. Zapisz zmienną event jako zmienną globalną; będziemy jej potrzebować później, aby wyświetlić prompt.
  4. Odsłonij 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 funkcji prompt() odbywa się w obiekcie przetwarzającym kliknięcie przycisku instalacji, ponieważ funkcja prompt() musi być wywoływana gestem użytkownika.

  1. Dodaj moduł obsługi zdarzeń kliknięcia dla przycisku instalacji.
  2. Zawołanie prompt() w zapisanym zdarzeniu beforeinstallprompt.
  3. Zaloguj 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 instalowania to tylko jeden ze sposobów. Mogą też korzystać z menu Chrome, minipaska informacji oraz ikony w omniboksie. Możesz śledzić wszystkie te sposoby instalacji, nasłuchując zdarzenia appinstalled.

  1. Dodaj do obiektu window obiekt appinstalled.
  2. Zdarzenie instalacji należy odnotować w Analytics lub za pomocą innego mechanizmu.

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, Twoja aplikacja jest już dostępna do zainstalowania.

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