Questo glitch contiene il file manifest web con i campi obbligatori per rendere un'app web installabile.
Dispone inoltre di un pulsante di installazione nascosto per impostazione predefinita.
Ascolta l'evento beforeinstallprompt
Quando il browser attiva l'evento beforeinstallprompt
, è indice
che l'app web può essere installata e un pulsante di installazione può essere mostrato
all'utente. L'evento beforeinstallprompt
viene attivato quando l'app soddisfa i criteri di installabilità.
La cattura dell'evento consente agli sviluppatori di personalizzare l'installazione e di chiedere all'utente di eseguire l'installazione quando ritiene che sia il momento migliore.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Aggiungi un gestore di eventi
beforeinstallprompt
all'oggettowindow
. - Salva
event
come variabile globale; ce ne servirà più avanti per mostrare il prompt. - 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);
});
Gestire il clic sul pulsante di installazione
Per mostrare la richiesta di installazione, chiama prompt()
sull'evento beforeinstallprompt
salvato. La chiamata a prompt()
viene eseguita nel gestore dei clic sul pulsante Installa perché
prompt()
deve essere chiamato da un gesto dell'utente.
- Aggiungi un gestore di eventi clic per il pulsante di installazione.
- Chiama
prompt()
nell'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 possono installarla. Possono anche utilizzare il menu di Chrome, la mini-infobar e
tramite un'icona nella omnibox. Puoi
monitorare tutti questi modi di installazione ascoltando l'evento
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 puoi installare la tua app.
Ecco alcune altre cose che puoi fare: