Depuis le lancement de la bannière "Ajouter à l'écran d'accueil", nous nous sommes efforcés d'attribuer des libellés plus clairs aux progressive web apps et de simplifier leur installation. Notre objectif final est de fournir un bouton d'installation dans l'omnibox sur toutes les plates-formes. Des modifications vont être apportées dans Chrome 68.
Quoi de neuf ?
À partir de Chrome 68 sur Android (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 de l'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() lors de l'événement beforeinstallprompt
OU
Affichée en appelant prompt() sur l'événement beforeinstallprompt.
Mini-infobar Chrome 68 et versions ultérieures
Si l'élément est ignoré par un utilisateur, il ne s'affiche qu'au terme d'un délai suffisant (environ trois mois).
S'affiche, que preventDefault() ait été appelé ou non lors de l'événement beforeinstallprompt.
Ce traitement de l'interface utilisateur sera supprimé dans une prochaine version de Chrome lorsque le bouton d'installation de l'omnibox sera introduit.
Boîte de dialogue A2HS
Affichées en appelant prompt() depuis 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-barre d'informations dans Chrome 68 et versions ultérieures.
OU
S'affiche lorsque l'utilisateur clique sur "Ajouter à l'écran d'accueil" dans le menu Chrome (toutes les versions de Chrome).
La mini-barre d'informations
La mini-barre d'informations est un composant d'interface utilisateur de Chrome. Elle n'est pas contrôlable par le site, mais l'utilisateur peut facilement l'ignorer. Une fois ignorée par l'utilisateur, elle ne s'affiche plus avant un délai suffisant (actuellement trois mois). La mini-barre d'informations apparaît lorsque le site répond aux critères d'ajout à l'écran d'accueil, que vous ayez preventDefault() lors de 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 interface utilisateur, qui affichera alors l'invite d'installation modale. Par exemple, cette PWA de bureau ajoute un bouton "Installer l'application" juste au-dessus du nom de profil de l'utilisateur.
Inviter l'utilisateur à installer votre application par le biais d'un geste semble moins indésirable et augmente la probabilité qu'il clique sur "Ajouter" plutôt que sur "Annuler". Intégrer un bouton "Installer" dans votre application signifie que même si l'utilisateur décide de ne pas installer votre application aujourd'hui, le bouton sera toujours là demain ou dès qu'il sera prêt à être installé.
É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 à cet é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 par la suite, l'événement beforeinstallprompt est de nouveau déclenché à chaque navigation sur les pages.
Affichage de la boîte de dialogue avec prompt()
Pour afficher la boîte de dialogue d'ajout à l'écran d'accueil, appelez prompt() sur l'événement enregistré à partir d'un geste utilisateur. Une boîte de dialogue modale s'affiche alors pour inviter
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 que l'invite s'est 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() qu'une seule fois sur l'événement différé. 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 sur les pages suivante. Contrairement aux demandes d'autorisation traditionnelles, le clic sur "Annuler" ne bloque pas les futurs appels à prompt(), car il doit être appelé dans un geste de l'utilisateur.
Autres ressources
Consultez Bannières d'installation d'applications pour en savoir plus, y compris sur les éléments suivants:
- Détails sur l'événement
beforeinstallprompt - Suivre la réponse de l'utilisateur à l'invite d'ajout sur 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