Rendi l'app installabile

Pete LePage

Questo glitch contiene il manifest web con i campi obbligatori per rendere installabile un'app web.

Inoltre, include un pulsante di installazione nascosto per impostazione predefinita.

Ascolta l'evento beforeinstallprompt

Quando il browser attiva l'evento beforeinstallprompt, questa è l'indicazione che l'app web può essere installata e che è possibile visualizzare un pulsante Installa all'utente. L'evento beforeinstallprompt viene attivato quando l'app soddisfa il di installabilità.

La registrazione dell'evento consente agli sviluppatori di personalizzare l'installazione e chiedere all'utente da installare se lo ritengono il momento migliore.

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  2. Aggiungi un gestore di eventi beforeinstallprompt all'oggetto window.
  3. Salva event come variabile globale. ne avremo bisogno in seguito per mostrare .
  4. Mostra il pulsante di installazione.

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

Gestisci il clic sul pulsante di installazione

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

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

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 possa installarlo. Possono anche utilizzare il menu di Chrome, la mini-barra delle informazioni e tramite un'icona nella omnibox. Puoi monitorare tutti questi modi di installazione ascoltando il appinstalled .

  1. Aggiungi un gestore di 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!

Di seguito sono riportate altre cose che puoi fare: