Pozwól na instalację

Piotr LePage

Ten błąd zawiera manifest internetowy z polami wymaganymi do instalacji aplikacji internetowej.

Ma też przycisk instalacji, który jest domyślnie ukryty.

Wykrywaj zdarzenie beforeinstallprompt

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

Rejestrowanie zdarzenia pozwala deweloperom dostosować instalację i zachęcić użytkownika do instalacji, gdy uzna, że to właściwy moment.

  1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  2. Dodaj moduł obsługi zdarzeń beforeinstallprompt do obiektu window.
  3. Zapisz event jako zmienną globalną. Będzie nam potrzebna później 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 zdarzeniu beforeinstallprompt. Wywoływanie prompt() jest wykonywane w module obsługi kliknięć przycisku instalacji, ponieważ właściwość prompt() musi być wywoływana gestem użytkownika.

  1. Dodaj moduł obsługi zdarzeń kliknięcia dla przycisku instalacji.
  2. Zadzwoń pod numer prompt() powiązany z zapisanym wydarzeniem beforeinstallprompt.
  3. Zapisz wyniki promptu.
  4. Ustaw wartość zapisanego zdarzenia beforeinstallprompt na 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 instalacji

Użytkownicy mogą zainstalować aplikację internetową tylko za pomocą przycisku instalacji. Mogą też korzystać z menu Chrome, minipaska informacyjnego oraz ikony w omniboksie. Wszystkie te sposoby instalacji możesz śledzić, nasłuchując zdarzenia appinstalled.

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