Installation de la barre d'adresse pour les progressive web apps sur ordinateur

Les applications PWA sont faciles à installer grâce à un nouveau bouton d'installation dans la barre d'adresse (omnibox) de Chrome.

Sur ordinateur, il n'est généralement pas indiqué à l'utilisateur qu'une application Web progressive est installable. Si c'est le cas, le parcours d'installation est masqué dans le menu à trois points.

Dans Chrome 76 (bêta mi-juin 2019), nous facilitons l'installation des applications Web progressives sur ordinateur en ajoutant un bouton d'installation à la barre d'adresse (omnibox). Si un site répond aux critères d'installabilité des applications Web progressives, Chrome affiche automatiquement une icône d'installation dans la barre d'adresse. Lorsque l'utilisateur clique sur le bouton, il est invité à installer la PWA.

Comme pour les autres événements d'installation, vous pouvez écouter l'événement appinstalled pour détecter si l'utilisateur a installé votre PWA.

Ajouter votre propre invite d'installation

Si votre PWA présente des cas d'utilisation dans lesquels il est utile pour un utilisateur d'installer votre application (par exemple, si des utilisateurs utilisent votre application plus d'une fois par semaine), vous devez promouvoir l'installation de votre PWA dans l'interface utilisateur Web de votre application.

Pour ajouter votre propre bouton d'installation personnalisé, écoutez l'événement beforeinstallprompt. Lorsqu'il est déclenché, enregistrez une référence à l'événement et mettez à jour votre interface utilisateur pour indiquer à l'utilisateur qu'il peut installer votre application Web progressive.

Modèles pour promouvoir l'installation de votre PWA

Il existe trois principales façons de promouvoir l'installation de votre PWA:

  • Promotion automatique du navigateur, comme le bouton d'installation dans la barre d'adresse.
  • Promotion de l'interface utilisateur de l'application, où des éléments d'interface utilisateur apparaissent dans l'interface de l'application, tels que des bannières, des boutons dans l'en-tête ou le menu de navigation, etc.
  • Les modèles promotionnels intégrés entremêlent les promotions dans le contenu du site.

Pour en savoir plus, consultez les tendances de promotion de l'installation de PWA (mobile). Son objectif est axé sur les mobiles, mais de nombreux modèles sont applicables aux ordinateurs de bureau ou peuvent être facilement modifiés pour fonctionner sur ces appareils.