Rendi l'app installabile

Pete LePage

Ascolta l'evento beforeinstallprompt

Quando il browser attiva l'evento beforeinstallprompt, questo indica che la web app può essere installata e che all'utente può essere mostrato un pulsante di installazione. L'evento beforeinstallprompt viene attivato quando l'app soddisfa i criteri di installabilità.

L'acquisizione dell'evento consente agli sviluppatori di personalizzare l'installazione e chiedere all'utente di installare l'app quando ritiene che sia il momento migliore.

  1. Fai clic su Remixa per modificare per rendere il progetto modificabile.
  2. Aggiungi un gestore eventi beforeinstallprompt all'oggetto window.
  3. Salva event come variabile globale. Ci servirà in un secondo momento per mostrare il prompt.
  4. Mostra il pulsante Installa.

Codice:

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);
});

Gestire il clic sul pulsante Installa

Per mostrare la richiesta di installazione, chiama prompt() sull'evento beforeinstallprompt salvato. La chiamata a prompt() viene eseguita nel gestore di clic del pulsante di installazione perché prompt() deve essere chiamato da un gesto dell'utente.

  1. Aggiungi un gestore di eventi di clic per il pulsante di installazione.
  2. Chiama prompt() nell'evento beforeinstallprompt salvato.
  3. Registra i risultati del prompt.
  4. Imposta l'evento beforeinstallprompt salvato su null.
  5. Nascondi il pulsante Installa.

Codice:

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);
});

Monitorare l'evento di installazione

L'installazione di un'app web tramite un pulsante di installazione è solo uno dei modi in cui gli utenti possono installarla. Possono anche utilizzare il menu di Chrome, la mini barra delle informazioni e un'icona nella omnibox. Puoi monitorare tutti questi metodi di installazione ascoltando l'evento appinstalled.

  1. Aggiungi un gestore eventi appinstalled all'oggetto window.
  2. Registra l'evento di installazione in Analytics o in un altro meccanismo.

Codice:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

Per approfondire

Congratulazioni, ora la tua app è installabile.

Ecco alcune altre cose che puoi fare: