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 à une plate-forme.
Pour ce faire, vous pouvez procéder de différentes manières :
- Installez la PWA à partir du navigateur.
- Installez la PWA à partir de la plate-forme de téléchargement d'applications.
Disposer de différents canaux de distribution est un excellent moyen de toucher un large 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 entre les plateformes et la cannibalisation. Les solutions d'installation couvertes incluent les PWA installées à partir du navigateur et de l'App Store, ainsi que des applications spécifiques à une plate-forme.
Pourquoi rendre votre application Web installable ?
Les progressive web apps installées s'exécutent dans une fenêtre autonome plutôt que dans un onglet de navigateur. Elles sont accessibles depuis l'écran d'accueil, le dock, la barre des tâches ou l'étagère de l'utilisateur. Vous pouvez les rechercher sur un appareil et passer de l'une à l'autre à l'aide du sélecteur d'applications, ce qui leur donne l'impression de faire partie de l'appareil sur lequel elles sont installées.
Toutefois, la présence d'une application Web installable et d'une application spécifique à la plate-forme peut prêter à confusion pour les utilisateurs. Pour certains utilisateurs, les applications spécifiques à la plate-forme peuvent être le meilleur choix. Pour d'autres, elles peuvent présenter certains inconvénients:
- Contraintes de stockage : l'installation d'une nouvelle application peut nécessiter de supprimer d'autres applications ou de libérer de l'espace en supprimant des contenus de valeur. Cela est particulièrement désagréable pour les utilisateurs d'appareils bas de gamme.
- Bande passante disponible : le téléchargement d'une application peut être un processus coûteux et lent, en particulier pour les utilisateurs disposant de connexions lentes et de forfaits de données onéreux.
- Friction : quitter un site Web et accéder à une plate-forme de téléchargement pour télécharger une application crée une friction supplémentaire et retarde une action de l'utilisateur qui pourrait être effectuée directement sur le Web.
- Cycle de mise à jour : apporter des modifications à des applications spécifiques à une plate-forme peut nécessiter un processus d'examen de l'application, 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 le cas, par exemple, de ceux qui pensent ne pas l'utiliser très souvent, ou qui ne peuvent pas justifier de dépenser plusieurs mégaoctets de stockage ou de données. Vous pouvez déterminer la taille de ce segment de plusieurs façons, par exemple en configurant des données analytiques 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 moyens d'installer 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 de promouvoir son installation plutôt que votre application spécifique à la plate-forme (par exemple, si l'application spécifique à la plate-forme ne dispose pas des fonctionnalités proposées par votre PWA ou si elle n'a pas été mise à jour depuis un certain temps). 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 écrans plus grands, comme sur ChromeOS.
Pour certaines applications, la promotion de l'installation d'applications spécifiques à une plate-forme est un élément clé du modèle commercial. Dans ce cas, il est judicieux de promouvoir l'installation de votre application spécifique à une plate-forme. Toutefois, certains utilisateurs préfèrent rester sur le Web. Si ce segment peut être identifié, l'invite de la PWA ne pourra lui être présentée que par ce biais (appelé "PWA en remplacement").
PWA en tant qu'expérience installable 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 d'installation dans la barre d'adresse, et sur mobile, une mini-barre d'informations :
Cela peut suffire pour certaines expériences, mais si votre objectif est de générer des installations de votre PWA, nous vous recommandons vivement d'écouter l'événement BeforeInstallPromptEvent et de suivre les modèles de promotion de l'installation de votre PWA.
Empêcher 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 de votre PWA. Toutefois, nous vous recommandons 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 de bénéficier d'une expérience d'installation similaire.
La première étape de l'implémentation de cette stratégie consiste à définir une heuristique pour déterminer quand afficher une promotion d'installation de votre PWA à l'utilisateur.
Exemple : Un utilisateur de PWA est un utilisateur qui a vu l'invite d'installation de l'application spécifique à la plate-forme, mais qui ne l'a pas installée. Il est revenu sur le site au moins cinq fois ou a cliqué sur la bannière de l'application, mais a continué à utiliser le site Web.
Ensuite, vous pouvez implémenter l'heuristique comme suit:
- Afficher la bannière d'installation d'application spécifique à la plate-forme.
- Si un utilisateur ignore la bannière, définissez un cookie avec ces informations (par exemple,
document.cookie = "app-install-banner=dismissed"). - Utilisez un autre cookie pour suivre le nombre de visites des utilisateurs sur le site (par exemple,
document.cookie = "user-visits=1"). - Écrivez une fonction, telle que
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 la PWA a été enregistrée précédemment, vous pouvez afficher le bouton d'installation de la PWA.
Promouvoir l'installation de votre PWA via une plate-forme de téléchargement d'applications
Les applications pour les plates-formes de téléchargement d'applications peuvent être créées avec différentes technologies, y compris les techniques PWA. Dans Intégrer une 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 sur le Play Store en deux groupes:
- Applications spécifiques à une plate-forme : ces applications sont principalement créées 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 promouvoir votre application spécifique à une plate-forme si vous n'avez pas de PWA ou si l'application propre à une plate-forme propose un ensemble de fonctionnalités plus complet.
- Applications légères:ces applications peuvent également être créées avec du code propre à la plate-forme, mais elles sont généralement conçues à l'aide d'une technologie Web, empaquetées dans un wrapper propre à la plate-forme. Des PWA complètes peuvent également être importées dans les magasins. Ce point est abordé plus loin dans cet article. Certaines entreprises choisissent de proposer ces fonctionnalités en tant qu'expériences "allégées", tandis que d'autres ont également utilisé cette approche pour leurs applications phares (de base).
Promouvoir des applications légères
Selon une étude Google Play, chaque fois que la taille d'un APK augmente de 6 Mo, le taux de conversion relatif aux installations diminue de 1%. Cela signifie que le taux d'achèvement du téléchargement d'une application de 10 Mo peut être d'environ 30 % supérieur à celui d'une application de 100 Mo.
Pour résoudre ce problème, certaines entreprises utilisent leurs PWA pour fournir une version allégée de leur application sur le Play Store via des activités Web fiables. Les TWA encapsulent votre PWA dans un composant de type WebView. La taille de l'application obtenue n'est généralement que de quelques mégaoctets.
Oyo, l'une des plus grandes entreprises hôtelières indiennes, a créé une version simplifiée de son application et l'a rendue disponible sur le Play Store à l'aide d'une TWA. Au moment de la rédaction de cet article, l'application Oyo ne faisait que 850 Ko, soit seulement 7% de la taille de son application Android. Une fois installée, elle ne se distingue pas de l'application Android:
Oyo a conservé les versions de l'application principale et de la version allégée sur la plate-forme, offrant ainsi un choix à ses utilisateurs.
Fournir une expérience Web légère
Intuitivement, les utilisateurs d'appareils d'entrée de gamme sont plus enclins à télécharger des versions allégées des 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 privilégier la bannière d'installation d'application légère plutôt que la version plus lourde spécifique à la plate-forme.
Sur le Web, il est possible d'obtenir des signaux d'appareil et de les mapper approximativement à des catégories d'appareils (par exemple, "haut", "moyen" ou "bas"). Vous pouvez obtenir ces informations de différentes manières, à l'aide des API JavaScript ou des indicateurs client.
Utiliser JavaScript
À l'aide des propriétés JavaScript telles que navigator.hardwareConcurrency, navigator.deviceMemory et navigator.connection, vous pouvez obtenir des informations sur l'état du processeur, de la mémoire et du réseau de l'appareil, respectivement. Exemple :
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Utiliser les indications client
Les signaux de l'appareil peuvent également être inférés dans les en-têtes de requêtes HTTP, via des indices client. Voici comment implémenter le code précédent pour la mémoire de l'appareil avec les hints client:
Tout d'abord, indiquez au navigateur que vous souhaitez recevoir des indications de 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 de requê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 avec la catégorie de l'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 afficher l'invite d'installation d'application correspondante dans 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. Étant donné que cela n'était historiquement possible que pour les applications installées depuis des plates-formes de téléchargement d'applications, les entreprises peuvent penser que l'affichage d'une bannière d'installation sur une plate-forme de téléchargement d'applications suffit à convaincre les utilisateurs d'installer leurs expériences. Il existe actuellement d'autres options pour permettre aux utilisateurs d'installer une application, par exemple en proposant une application légère dans les magasins et en leur permettant d'ajouter des PWA à l'écran d'accueil en les invitant à le faire directement depuis le site Web.