Pozwól na instalację

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

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

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 Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
  2. Dodaj do obiektu window uchwyt zdarzeń 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 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 zdarzenia kliknięcia dla przycisku instalacji.
  2. Zawołanie prompt() w zapisanym zdarzeniu beforeinstallprompt.
  3. Zaloguj 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 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 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, Twoja aplikacja jest już gotowa do zainstalowania.

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