Les progressive web apps sont faciles à installer grâce à un nouveau bouton d'installation dans la barre d'adresse (omnibox) de Chrome.
Sur les ordinateurs, rien n'indique généralement à l'utilisateur qu'un Progressive Web L'application peut être installée. Si c'est le cas, le processus d'installation est masqué dans les trois du menu à points.
Dans Chrome 76 (version bêta mi-juin 2019), nous facilitons l'installation pour les utilisateurs Progressive web apps sur le bureau en ajoutant un bouton d'installation à l'adresse (omnibox). Si un site respecte le Critères d'installabilité des progressive web apps Chrome affiche automatiquement une icône d'installation dans la barre d'adresse. Cliquez sur le bouton invite 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 pour lesquels l'installation peut être utile, Par exemple, si certains de vos utilisateurs se servent de votre application plusieurs fois par semaine, 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. Lorsqu'elle est déclenchée,
enregistrez une référence à l'événement et mettez à jour votre interface utilisateur
qu'il peut installer votre progressive web app.
Modèles visant à promouvoir l'installation de votre PWA
Il existe trois manières principales de promouvoir l'installation de votre PWA:
- Promotion automatique du navigateur, comme le bouton d'installation de la barre d'adresse.
- Promotion de l'interface utilisateur de l'application, où des éléments de l'interface utilisateur apparaissent dans l'application de l'interface, comme les bannières, les boutons dans l'en-tête ou le menu de navigation, etc.
- Les modèles promotionnels intégrés s'entremêlent dans le contenu du site.
Consultez les modèles pour promouvoir l'installation d'une PWA (mobile). pour en savoir plus. Il est axé sur les mobiles, mais de nombreux modèles s'appliquent. pour ordinateur, ou peuvent être facilement modifiées pour fonctionner sur des expériences de bureau.