Ce glitch contient le fichier manifeste Web avec les champs obligatoires pour rendre une application Web installable.
Elle comporte également un bouton d'installation qui est masqué par défaut.
Écouter l'événement beforeinstallprompt
Lorsque le navigateur déclenche l'événement beforeinstallprompt
, cela indique
que l'application Web peut être installée et qu'un bouton d'installation s'affiche
pour l'utilisateur. L'événement beforeinstallprompt
est déclenché lorsque l'application répond aux
critères d'installabilité.
La capture de l'événement permet aux développeurs de personnaliser l'installation et d'inviter l'utilisateur à installer lorsqu'ils estiment que c'est le meilleur moment.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
- Ajoutez un gestionnaire d'événements
beforeinstallprompt
à l'objetwindow
. - Enregistrez
event
en tant que variable globale. nous en aurons besoin plus tard requête. - Affichez le bouton d'installation.
Code :
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);
});
Gérer le clic sur le bouton d'installation
Pour afficher l'invite d'installation, appelez prompt()
sur le beforeinstallprompt
enregistré
. L'appel de prompt()
est effectué dans le gestionnaire de clics du bouton d'installation, car
prompt()
doit être appelé à l'aide d'un geste de l'utilisateur.
- Ajoutez un gestionnaire d'événements de clic pour le bouton d'installation.
- Appelez
prompt()
sur l'événementbeforeinstallprompt
enregistré. - Consignez les résultats de l'invite.
- Définissez l'événement
beforeinstallprompt
enregistré sur "null". - Masquez le bouton d'installation.
Code :
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);
});
Suivre l'événement d'installation
L'installation d'une application Web via un bouton
d'installation n'est qu'une façon parmi d'autres
peut l'installer. Ils peuvent également utiliser le menu de Chrome, la mini-barre d'informations et
via une icône de l'omnibox. Vous pouvez
suivre toutes ces méthodes d'installation en écoutant le appinstalled
.
- Ajoutez un gestionnaire d'événements
appinstalled
à l'objetwindow
. - Consignez l'événement d'installation dans Analytics ou un autre mécanisme.
Code :
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Documentation complémentaire
Félicitations ! Vous pouvez désormais installer votre application.
Vous pouvez également effectuer les opérations suivantes: