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 applications Web progressives (PWA) sont un modèle permettant de créer des sites Web fiables, installables et qui se chargent instantanément, comme une application.

Lorsque votre PWA passe la checklist d'installabilité 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-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 nous avons constaté que les développeurs souhaitaient avoir plus de contrôle sur le moment où ils devaient demander aux utilisateurs d'installer une PWA. Nous les avons entendus !

À partir de Chrome 76, vous pouvez empêcher l'affichage de 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. Notre communauté a indiqué que les utilisateurs qui installent une PWA sur l'écran d'accueil sont très engagés, avec plus de visites répétées, plus 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'installabilité de sa PWA.
Exemple de Pinterest utilisant une bannière d'installation pour promouvoir l'installabilité de sa PWA. Consultez Ajouter à l'écran d'accueil pour en savoir plus sur le flux 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 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 d'ajout à l'écran d'accueil.

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

L'utilisation de l'infobarre "Ajouter à l'écran d'accueil" reste une mesure temporaire. Nous testons de nouveaux modèles d'interface utilisateur 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.