Auparavant, l'installation d'applications n'était possible que dans le contexte d'applications spécifiques à une plate-forme. Aujourd'hui, les applications Web modernes offrent des expériences installables qui offrent le même niveau d'intégration et de fiabilité que les applications spécifiques à la plate-forme.
Vous pouvez y parvenir de différentes manières:
- Installez la PWA depuis le navigateur.
- Installez la PWA à partir de la plate-forme de téléchargement d'applications.
Disposer de différents canaux de distribution constitue un moyen efficace de toucher un grand nombre d'utilisateurs. Toutefois, choisir la bonne stratégie pour promouvoir l'installation de votre PWA peut s'avérer difficile.
Ce guide explore les bonnes pratiques pour combiner différentes options d'installation afin d'augmenter les taux d'installation et d'éviter la concurrence et la cannibalisation des plates-formes. Les offres d'installation couvertes incluent les PWA installées à partir du navigateur et de l'App Store, ainsi que les applications spécifiques à la plate-forme.
Pourquoi rendre votre application Web installable ?
Les progressive web apps installées s'exécutent dans une fenêtre autonome au lieu d'un onglet du navigateur. Ils peuvent être lancés depuis l'écran d'accueil, la station d'accueil, la barre des tâches ou l'étagère de l'utilisateur. Vous pouvez les rechercher sur un appareil et passer de l'un à l'autre grâce au sélecteur d'applications, ce qui leur donne l'impression de faire partie de l'appareil sur lequel ils sont installés.
Mais avoir à la fois une application Web installable et une application spécifique à la plate-forme peut être déroutante pour les utilisateurs. Pour certains utilisateurs, les applications spécifiques à une plate-forme peuvent être le meilleur choix, mais pour d'autres, elles peuvent présenter certains inconvénients:
- Contraintes de stockage:installer une nouvelle application peut impliquer d'en supprimer d'autres ou de libérer de l'espace en supprimant du contenu intéressant. Cela est particulièrement désavantageant pour les utilisateurs d'appareils d'entrée de gamme.
- Bande passante disponible:le téléchargement d'une application peut être un processus coûteux et lent, d'autant plus pour les utilisateurs dont la connexion est lente et les forfaits Internet coûteux.
- Friction:quitter un site Web et se rendre dans une boutique pour télécharger une application crée des frictions supplémentaires et retarde une action de l'utilisateur qui pourrait être effectuée directement sur le Web.
- Cycle de mise à jour:pour apporter des modifications à des applications spécifiques à une plate-forme, vous devrez peut-être passer par un processus d'examen, ce qui peut ralentir les modifications et les tests (tests A/B, par exemple).
Dans certains cas, le pourcentage d'utilisateurs qui ne téléchargent pas votre application spécifique à une plate-forme peut être important. C'est par exemple le cas de ceux qui pensent ne pas l'utiliser très souvent, ou qui ne peuvent pas justifier de dépenser plusieurs mégaoctets d'espace de stockage ou de données. Vous pouvez déterminer la taille de ce segment de plusieurs manières, par exemple en utilisant une configuration d'analyse pour suivre le pourcentage d'utilisateurs "Web mobile uniquement".
Si la taille de ce segment est considérable, cela signifie que vous devez proposer d'autres méthodes d'installation de vos expériences.
Promouvoir l'installation de votre PWA via le navigateur
Si vous disposez d'une PWA de haute qualité, il peut être préférable d'en promouvoir l'installation plutôt que l'application spécifique à la plate-forme. Par exemple, si l'application spécifique à la plate-forme n'offre pas les fonctionnalités proposées par votre PWA ou si elle n'a pas été mise à jour depuis un moment. Il peut également être utile de promouvoir l'installation de votre PWA si l'application spécifique à la plate-forme n'a pas été optimisée pour les grands écrans, comme ChromeOS.
Pour certaines applications, l'augmentation du nombre d'installations d'applications spécifiques à la plate-forme constitue un élément clé du modèle économique. Dans ce cas, il est judicieux d'encourager l'installation de l'application spécifique à la plate-forme. Toutefois, certains utilisateurs préféreront peut-être rester sur le Web. Si ce segment peut être identifié, l'invite de PWA ne peut être affichée que par eux (ce que nous appelons une PWA en remplacement).
PWA comme expérience d'installation principale
Lorsqu'une PWA répond aux critères d'installation, la plupart des navigateurs indiquent qu'elle peut être installée. Par exemple, Chrome pour ordinateur affiche une icône à installer dans la barre d'adresse et, sur mobile, une mini-barre d'informations:
Même si cela peut suffire pour certaines expériences, si votre objectif est de générer des installations de votre PWA, nous vous recommandons vivement d'écouter le BeforeInstallPromptEvent et de suivre les modèles de promotion de l'installation de votre PWA.
Empêchez votre PWA de cannibaliser le taux d'installation de votre application spécifique à la plate-forme
Dans certains cas, vous pouvez choisir de promouvoir l'installation de votre application spécifique à la plate-forme plutôt que votre PWA. Toutefois, dans ce cas, nous vous recommandons tout de même de fournir un mécanisme permettant aux utilisateurs d'installer votre PWA. Cette option de remplacement permet aux utilisateurs qui ne peuvent pas, ou ne souhaitent pas installer votre application spécifique à la plate-forme, bénéficier d'une expérience d'installation similaire.
Pour implémenter cette stratégie, la première étape consiste à définir une heuristique qui détermine quand proposer à l'utilisateur une promotion incitant à installer votre PWA.
Exemple:Un utilisateur de PWA est un utilisateur qui a vu l'invite d'installation d'une application spécifique à une plate-forme, mais qui n'a pas installé l'application spécifique. Il est retourné sur le site au moins cinq fois ou a cliqué sur la bannière de l'application, mais a continué à utiliser le site Web.
La méthode heuristique peut ensuite être implémentée de la manière suivante:
- Affichez la bannière d'installation d'application spécifique à la plate-forme.
- Si un utilisateur ignore la bannière, définissez un cookie avec cette information (par exemple,
document.cookie = "app-install-banner=dismissed"). - Utilisez un autre cookie pour suivre le nombre de visites sur votre site (par exemple,
document.cookie = "user-visits=1"). - Écrivez une fonction, par exemple
isPWAUser(), qui utilise les informations précédemment stockées dans les cookies avec l'APIgetInstalledRelatedApps()pour déterminer si un utilisateur est considéré comme un "utilisateur de PWA". - Lorsque l'utilisateur effectue une action importante, appelez
isPWAUser(). Si la fonction renvoie la valeur "true" et que l'invite d'installation de PWA a déjà été enregistrée, vous pouvez afficher le bouton d'installation de PWA.
Promouvoir l'installation de votre PWA via une plate-forme de téléchargement d'applications
Les applications destinées aux plates-formes de téléchargement d'applications peuvent être créées avec différentes technologies, y compris des techniques PWA. Dans la section Combiner des PWA dans des environnements natifs, vous trouverez un résumé des technologies pouvant être utilisées à cette fin.
Dans cette section, nous allons classer les applications de la plate-forme en deux groupes:
- Applications spécifiques à une plate-forme:ces applications sont principalement conçues avec du code spécifique à la plate-forme. Leur taille dépend de la plate-forme, mais elles sont généralement supérieures à 10 Mo sur Android et à 30 Mo sur iOS. Vous pouvez souhaiter promouvoir votre application spécifique à une plate-forme si vous n'avez pas de PWA ou si elle offre un ensemble de fonctionnalités plus complet.
- Applications légères:ces applications peuvent également être créées avec du code spécifique à une plate-forme, mais elles reposent généralement sur une technologie Web, empaquetée dans un wrapper spécifique à la plate-forme. Vous pouvez également importer des PWA complètes vers les plates-formes de téléchargement d'applications. Nous reviendrons sur ce point plus loin dans cet article. Certaines entreprises choisissent de proposer ces solutions sous forme d'expériences simplifiées, tandis que d'autres ont également adopté cette approche pour leurs applications phares (principales).
Promouvoir des applications légères
Selon une étude Google Play, le taux de conversion des installations diminue de 1 % chaque fois que la taille d'un APK augmente de 6 Mo. Cela signifie que le taux de lecture complète d'une application de 10 Mo peut être 30% supérieur à celui d'une application de 100 Mo.
Pour résoudre ce problème, certaines entreprises exploitent leur PWA pour proposer une version allégée de leur application sur le Play Store grâce aux activités Web fiables. TWA encapsule votre PWA dans un composant de type WebView. La taille de l'application qui en résulte n'est généralement que de quelques mégaoctets.
Oyo, l'une des plus grandes entreprises du secteur de l'hôtellerie indienne, a créé une version simplifiée de son application et l'a rendue disponible sur le Play Store via une TWA. Au moment de la rédaction de cet article, l'application Oyo ne occupait que 850 Ko, soit seulement 7% de la taille de son application Android. Une fois installée, elle ne peut plus être distinguée de son application Android:
Oyo a conservé à la fois les versions phare et "allégée" de l'application sur le Play Store, offrant ainsi un choix à ses utilisateurs.
Offrir une expérience Web simplifiée
Intuitivement, les utilisateurs d'appareils d'entrée de gamme sont plus enclins à télécharger des versions légères d'applications que les utilisateurs de téléphones haut de gamme. Par conséquent, s'il est possible d'identifier l'appareil d'un utilisateur, vous pouvez donner la priorité à la bannière légère d'installation de l'application par rapport à la version plus lourde de l'application spécifique à la plate-forme.
Sur le Web, il est possible d'obtenir des signaux d'appareil et de les mapper approximativement sur des catégories d'appareils ("élevé", "moyen" ou "faible", par exemple). Vous pouvez obtenir ces informations de différentes manières, à l'aide d'API JavaScript ou de conseils client.
Utilisation de JavaScript
À l'aide des propriétés JavaScript telles que navigator.hardwareConcurrency, navigator.deviceMemory et navigator.connection, vous pouvez obtenir des informations sur le processeur, la mémoire et l'état du réseau de l'appareil, respectivement. Exemple :
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Utiliser des indications client
Les signaux des appareils peuvent également être déduits dans les en-têtes de requête HTTP, par le biais d'indications client. Voici comment vous pouvez implémenter le code précédent pour la mémoire de l'appareil avec des indications client:
Tout d'abord, indiquez au navigateur que vous souhaitez recevoir des indications concernant la mémoire de l'appareil dans l'en-tête de la réponse HTTP pour toute requête propriétaire:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Vous commencerez ensuite à recevoir des informations Device-Memory dans l'en-tête des requêtes HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Vous pouvez utiliser ces informations dans vos backends pour stocker un cookie associé à la catégorie d'appareil de l'utilisateur:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Enfin, créez votre propre logique pour mapper ces informations aux catégories d'appareils, et affichez l'invite d'installation de l'application correspondante pour chaque cas:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Conclusion
La possibilité d'afficher une icône sur l'écran d'accueil de l'utilisateur est l'une des fonctionnalités les plus attrayantes des applications. Auparavant, cela n'était possible que pour les applications installées à partir de plates-formes de téléchargement. Par conséquent, les entreprises pourraient penser qu'afficher une bannière d'installation sur la plate-forme de téléchargement suffirait à convaincre les utilisateurs d'installer leur application. Il existe actuellement d'autres options pour permettre aux utilisateurs d'installer une application. Par exemple, ils peuvent proposer une expérience d'application simplifiée en magasin et leur permettre d'ajouter des PWA à l'écran d'accueil en les invitant à le faire directement depuis le site Web.