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

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

Sur ordinateur, rien n'indique généralement à l'utilisateur qu'une progressive web app est installable. Si c'est le cas, le flux d'installation est masqué dans le menu à trois points.

Dans Chrome 76 (bêta mi-juin 2019), nous simplifions l'installation des progressive web apps sur le bureau en ajoutant un bouton d'installation à la barre d'adresse (omnibox). Si un site répond aux critères d'installation des progressive web apps, Chrome affiche automatiquement une icône d'installation dans la barre d'adresse. Cliquez sur le bouton pour inviter l'utilisateur à 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 peut être utile d'installer votre application (par exemple, si certains de vos utilisateurs s'en servent plus d'une fois par semaine), vous devez promouvoir l'installation de votre PWA dans l'UI Web de votre application.

Pour ajouter votre propre bouton d'installation personnalisé, écoutez l'événement beforeinstallprompt. Lors de son déclenchement, enregistrez une référence à l'événement et mettez à jour votre interface utilisateur pour indiquer à l'utilisateur qu'il peut installer votre progressive web app.

Modèles pour promouvoir l'installation de votre PWA

Il existe trois méthodes principales pour promouvoir l'installation de votre PWA:

  • Promotion automatique dans le navigateur, par exemple via le bouton d'installation de la barre d'adresse
  • Promotion de l'interface utilisateur de l'application : 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 permettent d'intégrer les promotions au contenu du site.

Pour en savoir plus, consultez les schémas pour la promotion de l'installation de PWA (mobile). Elle est axée sur les appareils mobiles, mais de nombreux modèles s'appliquent aux ordinateurs ou peuvent être facilement modifiés pour les utiliser dans des expériences sur ordinateur.