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.
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
- Aggiungi un gestore di eventi
beforeinstallprompt
all'oggettowindow
. - Salva
event
come variabile globale. ne avremo bisogno in seguito per mostrare . - 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.
- Aggiungi un gestore di eventi clic per il pulsante di installazione.
- Chiama
prompt()
sull'eventobeforeinstallprompt
salvato. - Registra i risultati del prompt.
- Imposta l'evento
beforeinstallprompt
salvato su null. - 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
.
- Aggiungi un gestore di eventi
appinstalled
all'oggettowindow
. - 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: