Dans Chrome 76, vous pouvez masquer la mini-barre d'informations "Ajouter à l'écran d'accueil"

Penny McLachlan
Penny McLachlan

Présentation des progressive web apps et de la mini-barre d'informations

Les progressive web apps (PWA) constituent un modèle permettant de créer des sites Web fiables et installables de type application, au chargement instantané.

Lorsque votre PWA répond aux exigences de la checklist d'installation sur Android, une boîte de dialogue système Chrome appelée "mini-barre d'informations" s'affiche en bas de la fenêtre du navigateur.

Aujourd'hui, la mini-barre d'informations "Ajouter à l'écran d'accueil" s'affiche en même temps que l'événement beforeinstallprompt.

Modifications apportées à Chrome 76

Nous avons été à l'écoute de notre communauté et nous avons entendu dire que les développeurs souhaitaient mieux contrôler quand demander aux utilisateurs l'installation d'une PWA. Nous les avons entendus !

À partir de Chrome 76, vous pouvez empêcher la mini-barre d'informations en appelant preventDefault() sur l'événement beforeinstallprompt.

L'événement beforeinstallprompt peut vous aider à promouvoir l'installation de votre application Web progressive, ce qui permet aux utilisateurs de l'ajouter facilement à leur écran d'accueil. D'après notre communauté, les utilisateurs qui installent une PWA sur l'écran d'accueil sont très engagés, avec plus de visites répétées, de temps passé dans l'application et, le cas échéant, des taux de conversion plus élevés.

Exemple de Pinterest utilisant une bannière d'installation pour promouvoir l'installation de sa PWA
Exemple de Pinterest utilisant une bannière d'installation pour promouvoir l'installation de sa PWA. Consultez la section Ajouter à l'écran d'accueil pour obtenir des informations complètes sur la procédure d'ajout à l'écran d'accueil, y compris des exemples de code et d'autres bonnes pratiques.

Pour promouvoir votre application Web sans la mini-barre d'informations, écoutez l'événement beforeinstallprompt, puis enregistrez-le. Ensuite, mettez à jour votre interface utilisateur pour indiquer que votre PWA peut être installée, par exemple en ajoutant un bouton d'installation, en affichant une bannière d'installation, en utilisant des promotions In-Feed ou une option de menu. Lorsque l'utilisateur clique sur l'élément d'installation, appelez prompt() sur l'événement beforeinstallprompt enregistré pour afficher la boîte de dialogue modale d'ajout à l'écran d'accueil.

L'avenir de la mini-barre d'informations "Ajouter à l'écran d'accueil"

L'utilisation de la barre d'informations "Ajouter à l'écran d'accueil" est toujours une mesure temporaire. Nous testons de nouveaux modèles d'interface utilisateur qui permettront toujours aux utilisateurs de progressive web apps de procéder à l'installation, de manière à réduire l'encombrement de l'expérience de navigation.