Depuis le lancement de la bannière "Ajouter à l'écran d'accueil", nous nous efforçons de mieux identifier les Progressive Web Apps et de simplifier leur installation par les utilisateurs. Notre objectif à terme est de fournir un bouton d'installation dans l'omnibox sur toutes les plates-formes. Dans Chrome 68, nous apportons des modifications pour atteindre cet objectif.
Ce qui change
À partir de Chrome 68 sur Android (version stable en juillet 2018), Chrome n'affichera plus la bannière "Ajouter à l'écran d'accueil". Si le site répond aux critères d'ajout à l'écran d'accueil, Chrome affichera la mini-info-bar. Ensuite, si l'utilisateur clique sur la mini-info-bar ou si vous appelez prompt() sur l'événement beforeinstallprompt à partir d'un geste de l'utilisateur, Chrome affiche une boîte de dialogue modale "Ajouter à l'écran d'accueil".
Bannière A2HS Chrome 67 et versions antérieures
Affiché automatiquement lorsque le site répond aux critères d'ajout à l'écran d'accueil et que le site n'appelle pas preventDefault() sur l'événement beforeinstallprompt
OU
Affiché en appelant prompt() sur l'événement beforeinstallprompt.
Mini-info-barre Chrome 68 et versions ultérieures
Si un utilisateur la ferme, elle ne s'affichera plus avant une période suffisante (~3 mois).
Affiché que preventDefault() ait été appelé ou non sur l'événement beforeinstallprompt.
Cette interface utilisateur sera supprimée dans une future version de Chrome lorsque le bouton d'installation de l'omnibox sera introduit.
Boîte de dialogue A2HS
Affiché en appelant prompt() à partir d'un geste de l'utilisateur sur l'événement beforeinstallprompt dans Chrome 68 et versions ultérieures.
OU
S'affiche lorsqu'un utilisateur appuie sur la mini-info-barre dans Chrome 68 et versions ultérieures.
OU
S'affiche après que l'utilisateur a cliqué sur "Ajouter à l'écran d'accueil" dans le menu Chrome, dans toutes les versions de Chrome.
Mini-info
La mini-info-bar est un composant de l'UI Chrome qui n'est pas contrôlable par le site, mais que l'utilisateur peut facilement fermer. Une fois que l'utilisateur l'a fermée, elle ne s'affichera plus avant un certain temps (actuellement trois mois). La mini-info-barre s'affiche lorsque le site répond aux critères d'ajout à l'écran d'accueil, que vous preventDefault() ou non l'événement beforeinstallprompt.
Au lieu d'inviter l'utilisateur à l'installation au chargement de la page (un anti-pattern pour les demandes d'autorisation), vous pouvez indiquer que votre application peut être installée avec une UI, qui affichera ensuite l'invite d'installation modale. Par exemple, cette PWA pour ordinateur ajoute un bouton "Installer l'application" juste au-dessus du nom de profil de l'utilisateur.
Inviter l'utilisateur à installer votre application à la suite d'un geste de sa part est moins intrusif et augmente la probabilité qu'il clique sur "Ajouter" plutôt que sur "Annuler". En intégrant un bouton d'installation à votre application, vous vous assurez que même si l'utilisateur choisit de ne pas installer votre application aujourd'hui, le bouton sera toujours là demain ou quand il sera prêt à l'installer.
Écouter l'événement beforeinstallprompt
Si votre site répond aux critères d'ajout à l'écran d'accueil, Chrome déclenche un événement beforeinstallprompt, enregistre une référence à l'événement et met à jour votre interface utilisateur pour indiquer que l'utilisateur peut ajouter votre application à son écran d'accueil.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
L'événement beforeinstallprompt ne sera pas déclenché si l'application est déjà installée (voir les critères d'ajout à l'écran d'accueil).
Toutefois, si l'utilisateur désinstalle l'application ultérieurement, l'événement beforeinstallprompt sera à nouveau déclenché à chaque navigation sur une page.
Afficher la boîte de dialogue avec prompt()
Pour afficher la boîte de dialogue "Ajouter à l'écran d'accueil", appelez prompt() sur l'événement enregistré à partir d'un geste de l'utilisateur. Chrome affichera la boîte de dialogue modale, invitant l'utilisateur à ajouter votre application à son écran d'accueil. Écoutez ensuite la promesse renvoyée par la propriété userChoice de l'événement beforeinstallprompt. La promesse renvoie un objet avec une propriété outcome une fois l'invite affichée et l'utilisateur y ayant répondu.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
Vous ne pouvez appeler prompt() sur l'événement différé qu'une seule fois. Si l'utilisateur clique sur "Annuler" dans la boîte de dialogue, vous devrez attendre que l'événement beforeinstallprompt soit déclenché lors de la prochaine navigation sur la page. Contrairement aux demandes d'autorisation traditionnelles, le fait de cliquer sur "Annuler" ne bloquera pas les futurs appels à prompt(), car cet appel doit être effectué dans un geste de l'utilisateur.
Autres ressources
Pour en savoir plus, consultez Bannières d'installation d'applications. Vous y trouverez, entre autres, les informations suivantes :
- Détails sur l'événement
beforeinstallprompt - Suivre la réponse de l'utilisateur à l'invite "Ajouter à l'écran d'accueil"
- Suivi de l'installation de l'application
- Déterminer si votre application s'exécute en tant qu'application installée