Depuis le lancement de la bannière "Ajouter à l'écran d'accueil", nous avons travaillé pour mieux identifier les applications Web progressives et simplifier la façon dont les utilisateurs peuvent les installer. Notre objectif final est de fournir un bouton d'installation dans la barre d'adresse 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 affiche la mini-barre d'informations. Ensuite, si l'utilisateur clique sur la mini-barre d'informations ou si vous appelez prompt() sur l'événement beforeinstallprompt à partir d'un geste utilisateur, Chrome affiche une boîte de dialogue modale d'ajout à l'écran d'accueil.
Bannière A2HS Chrome 67 et versions antérieures
S'affiche automatiquement lorsque le site répond aux critères d'ajout à l'écran d'accueil et qu'il n'appelle pas preventDefault() sur l'événement beforeinstallprompt.
OU
Affichée en appelant prompt() sur l'événement beforeinstallprompt.
Mini-barre d'informations Chrome 68 et versions ultérieures
Si un utilisateur l'ignore, il ne s'affichera pas avant un délai suffisant (~3 mois).
S'affiche, 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.
Dialog A2HS
Affichée en appelant prompt() à partir d'un geste utilisateur sur l'événement beforeinstallprompt dans Chrome 68 et versions ultérieures.
OU
S'affiche lorsqu'un utilisateur appuie sur la mini-barre d'informations dans Chrome 68 et les 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-barre d'informations
La mini-barre d'informations est un composant de l'interface utilisateur de Chrome. Elle n'est pas contrôlée par le site, mais l'utilisateur peut facilement la fermer. Une fois qu'il a été ignoré par l'utilisateur, il ne s'affiche plus tant qu'un certain temps ne s'est pas écoulé (actuellement trois mois). La mini-barre d'informations s'affiche lorsque le site répond aux critères d'ajout à l'écran d'accueil, que vous preventDefault() sur l'événement beforeinstallprompt ou non.
Au lieu d'inviter l'utilisateur au chargement de la page (un anti-modèle 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 de bureau ajoute un bouton "Installer l'application" juste au-dessus du nom de profil de l'utilisateur.
Demander à l'utilisateur d'installer votre application en fonction d'un geste lui semble moins intrusif et augmente la probabilité qu'il clique sur "Ajouter" plutôt que sur "Annuler". Intégrer un bouton "Installer" à votre application signifie que même si l'utilisateur choisit de ne pas installer votre application aujourd'hui, le bouton sera toujours là demain ou à tout moment où 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 ultérieurement l'application, l'événement beforeinstallprompt sera à nouveau déclenché à chaque navigation sur une page.
Affichage de 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 utilisateur. Chrome affiche la boîte de dialogue modale, invitant l'utilisateur à ajouter votre application à son écran d'accueil. Ensuite, écoutez 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 que l'utilisateur y a 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 devez attendre que l'événement beforeinstallprompt soit déclenché lors de la navigation vers la page suivante. Contrairement aux demandes d'autorisation traditionnelles, cliquer sur "Annuler" ne bloque pas les futurs appels à prompt(), car cet appel doit être appelé dans un geste utilisateur.
Autres ressources
Pour en savoir plus, consultez Bannières d'installation d'application, y compris:
- Détails sur l'événement
beforeinstallprompt - Suivre la réponse de l'utilisateur à l'invite d'ajout à l'écran d'accueil
- Suivre si l'application a été installée
- Déterminer si votre application s'exécute en tant qu'application installée