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

Penny McLachlan
Penny McLachlan

Informations générales sur les progressive web apps et la mini-barre d'informations

Les progressive web apps (PWA) sont un modèle permettant de créer des sites Web fiables, installables, à chargement instantané et semblables à des applications.

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

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

Modifications apportées à Chrome 76

Nous avons écouté notre communauté et avons constaté que les développeurs souhaitaient avoir plus de contrôle sur le moment où ils demandent aux utilisateurs d'installer une PWA. Nous les avons entendus !

À partir de Chrome 76, vous pouvez empêcher l'affichage de la mini-info-barre 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. Notre communauté a indiqué que les utilisateurs qui installent une PWA sur l'écran d'accueil sont très engagés. Ils reviennent plus souvent, passent plus de temps dans l'application et, le cas échéant, génèrent des taux de conversion plus élevés.

Exemple de bannière d'installation utilisée par Pinterest pour promouvoir l'installabilité de sa PWA.
Exemple de Pinterest utilisant une bannière d'installation pour promouvoir l'installabilité de sa PWA. Pour en savoir plus sur le flux "Ajouter à l'écran d'accueil", y compris des exemples de code et d'autres bonnes pratiques, consultez Ajouter à l'écran d'accueil.

Pour promouvoir votre application Web sans la mini-info-bar, é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, ajoutez un bouton d'installation, affichez une bannière d'installation, utilisez des promotions dans le flux 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 "Ajouter à l'écran d'accueil".

Avenir de la mini-info-barre "Ajouter à l'écran d'accueil"

L'utilisation de l'info-barre "Ajouter à l'écran d'accueil" reste une mesure temporaire. Nous testons de nouveaux modèles d'UI qui permettront aux utilisateurs d'applications Web progressives de continuer à installer des applications, tout en réduisant l'encombrement de l'expérience de navigation.