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'y a généralement aucune indication pour l'utilisateur qu'une progressive web app peut être installée. 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 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 progressive web app.
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 modèles de promotion de l'installation d'une PWA (mobile). Il est axé sur le mobile, mais de nombreux modèles s'appliquent aux ordinateurs ou peuvent être facilement modifiés pour les adapter aux expériences sur ordinateur.