Pozwól na instalację

Pete LePage

Ta usterka zawiera plik manifestu internetowego z polami wymaganymi do zainstalowania aplikacji internetowej.

Przycisk zawiera też domyślnie ukryty przycisk instalacji.

Nasłuchiwanie zdarzenia beforeinstallprompt

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

Przechwytywanie zdarzenia umożliwia deweloperom dostosowanie instalacji i wyświetlenie użytkownikowi komunikatu zainstalować ją, gdy uznają, że jest to najlepszy moment.

  1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  2. Dodaj do obiektu window moduł obsługi zdarzeń beforeinstallprompt.
  3. Zapisz event jako zmienną globalną. będą nam później potrzebne do wyświetlenia .
  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);
});

Klikanie przycisku instalacji

Aby wyświetlić prośbę o instalację, wywołaj prompt() na zapisanym beforeinstallprompt . Wywołanie prompt() jest wykonywane w module obsługi kliknięć przycisku instalacji, ponieważ Funkcja prompt() musi być wywoływana gestem użytkownika.

  1. Dodaj moduł obsługi zdarzeń kliknięcia dla przycisku instalacji.
  2. Zadzwoń pod numer prompt() przy zapisanym wydarzeniu beforeinstallprompt.
  3. Zapisz wyniki promptu.
  4. Ustaw puste zdarzenie beforeinstallprompt.
  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 zdarzeń instalacji

Instalowanie aplikacji internetowej za pomocą przycisku instalacji to tylko jeden ze sposobów zainstalować go. Mogą też skorzystać z menu Chrome, minipaska informacyjnego przez ikonę w omniboksie. Dostępne opcje śledzić wszystkie te sposoby instalacji, nasłuchując appinstalled .

  1. Dodaj do obiektu window moduł obsługi zdarzeń appinstalled.
  2. Zarejestruj zdarzenie instalacji w Analytics 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ć: