Définir votre stratégie d'installation

Demián Renzulli

Pete LePage

Date de publication : 12 mai 2020

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 :

• Installation de la PWA depuis le navigateur.
• Installer la PWA depuis l'App Store

Disposer de différents canaux de distribution est un excellent moyen de toucher une large base d'utilisateurs. Toutefois, il peut être difficile de choisir la bonne stratégie pour promouvoir l'installation de votre PWA.

Ce guide présente 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 entre les plates-formes. Les offres d'installation concernées incluent les PWA installées depuis le navigateur et l'App Store, ainsi que les 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 peuvent être lancées depuis l'écran d'accueil, le dock, la barre des tâches ou l'étagère de l'utilisateur. Il est possible de les rechercher sur un appareil et de passer de l'une à l'autre avec le sélecteur d'applications, ce qui donne l'impression qu'elles font partie de l'appareil sur lequel elles sont installées.

Toutefois, le fait de disposer à la fois d'une application Web installable et d'une application spécifique à une plate-forme peut dérouter 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 : l'installation d'une nouvelle application peut nécessiter la suppression d'autres applications ou la libération d'espace en supprimant du contenu important. Cela est particulièrement désavantageux 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, d'autant plus pour les utilisateurs disposant de connexions lentes et de forfaits de données coûteux.
• Friction : le fait de quitter un site Web pour accéder à une plate-forme de téléchargement d'applications crée une friction supplémentaire et retarde une action utilisateur qui pourrait être effectuée directement sur le Web.
• Cycle de mise à jour : la modification d'applications spécifiques à une plate-forme peut nécessiter un processus d'examen, ce qui peut ralentir les modifications et les expériences (comme les tests A/B).

Dans certains cas, le pourcentage d'utilisateurs qui ne téléchargeront pas votre application spécifique à une plate-forme peut être élevé. Par exemple, ceux qui pensent qu'ils n'utiliseront pas l'application 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 utilisant une configuration Analytics pour suivre le pourcentage d'utilisateurs "Web mobile uniquement".

Si la taille de ce segment est considérable, cela indique que vous devez proposer d'autres moyens d'installer vos expériences.

Promouvoir l'installation de votre PWA dans le navigateur

Si vous disposez d'une PWA de haute qualité, il peut être préférable de promouvoir son installation plutôt que celle de votre application spécifique à une plate-forme. Par exemple, si l'application spécifique à une plate-forme ne propose pas certaines fonctionnalités de 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 grands écrans, comme sur ChromeOS.

Pour certaines applications, générer des installations spécifiques à une plate-forme est un élément clé du modèle économique. Dans ce cas, il est judicieux de promouvoir l'installation de votre application spécifique à une plate-forme. Toutefois, certains utilisateurs peuvent préférer rester sur le Web. Si ce segment peut être identifié, l'invite PWA ne peut être affichée qu'à ces utilisateurs. C'est ce que nous appelons PWA en tant que solution de secours.

PWA comme expérience installable principale

Une fois qu'une PWA répond aux critères d'installabilité, la plupart des navigateurs indiquent qu'elle peut être installée. Par exemple, Chrome sur ordinateur affiche une icône d'installation dans la barre d'adresse, tandis que sur mobile, il affiche une mini-info-barre :

Bien que cela puisse suffire pour certaines expériences, 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 schémas pour promouvoir l'installation de votre PWA.

Empêcher votre PWA de cannibaliser le taux d'installation de votre application spécifique à une plate-forme

Dans certains cas, vous pouvez choisir de promouvoir l'installation de votre application spécifique à une plate-forme plutôt que votre PWA. Toutefois, nous vous recommandons toujours 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 veulent pas) installer votre application spécifique à une plate-forme de bénéficier d'une expérience installée similaire.

La première étape pour implémenter cette stratégie consiste à définir une heuristique pour déterminer quand afficher une promotion d'installation de votre PWA à l'utilisateur.

Par exemple, un utilisateur de PWA peut être un utilisateur qui a vu l'invite d'installation de votre application spécifique à la plate-forme, mais qui ne l'a pas installée. Il est possible qu'ils reviennent sur votre site cinq fois ou plus, cliquent sur la bannière de l'application, mais continuent d'utiliser le site Web.

L'heuristique peut être implémentée de la manière suivante :

1. Affichez la bannière d'installation d'application spécifique à la plate-forme.
2. Si un utilisateur ferme la bannière, définissez un cookie avec ces informations (par exemple, document.cookie = "app-install-banner=dismissed").
3. Utilisez un autre cookie pour suivre le nombre de visites d'utilisateurs sur le site (par exemple, document.cookie = "user-visits=1").
4. Écrivez une fonction, telle que isPWAUser(), qui utilise les informations précédemment stockées dans les cookies avec l'API getInstalledRelatedApps() pour déterminer si un utilisateur est considéré comme un utilisateur de PWA.
5. Lorsque l'utilisateur effectue une action significative, appelez isPWAUser(). Si la fonction renvoie "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 dans une plate-forme de téléchargement d'applications

Les applications du Play Store peuvent être conçues avec différentes technologies, y compris des techniques PWA. Dans Intégrer une PWA dans des environnements natifs, vous trouverez un récapitulatif des technologies qui peuvent être utilisées à cette fin.

Les applications disponibles sur la plate-forme de téléchargement peuvent être classées en deux groupes :

• Applications spécifiques à une plate-forme : ces applications sont principalement conçues avec du code spécifique à une plate-forme. La taille des applications dépend de la plate-forme, mais elle est généralement supérieure à 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 spécifique à une plate-forme présente un ensemble de fonctionnalités plus complet.
• Applications légères : ces applications peuvent également être créées avec du code spécifique à la plate-forme, mais elles sont généralement créées avec une technologie Web, empaquetées dans un wrapper spécifique à la plate-forme. Les PWA complètes peuvent également être importées dans le magasin. Certaines entreprises choisissent de proposer ces expériences en version "Lite", tandis que d'autres ont utilisé cette approche pour leurs applications phares (principales).

Promouvoir des applications légères

Selon une étude Google Play, chaque augmentation de 6 Mo de la taille d'un APK entraîne une diminution de 1 % du taux de conversion des installations. Cela signifie que le taux d'achèvement des téléchargements d'une application de 10 Mo peut être environ 30 % plus élevé que celui d'une application de 100 Mo.

Pour résoudre ce problème, certaines entreprises utilisent leur PWA pour fournir une version allégée de leur application dans le Play Store à l'aide des activités Web fiables (TWA). Les TWA enveloppent 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 hôtelières d'Inde, a créé une version Lite de son application et l'a mise à disposition sur le Play Store à l'aide d'une PWA. En mai 2020, l'application Oyo ne pesait que 850 Ko, soit seulement 7 % de la taille de son application Android. Une fois installée, elle est indiscernable de l'application Android :

Oyo a conservé les versions phare et "Lite" de son application sur le Play Store, offrant ainsi un choix à ses utilisateurs.

Offrir une expérience Web légère

Intuitivement, les utilisateurs d'appareils bas de gamme peuvent être 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 d'installation de l'application légère par rapport à la version de l'application spécifique à la plate-forme, qui est plus lourde.

Sur le Web, il est possible d'obtenir des signaux d'appareil et de les mapper approximativement à des catégories d'appareils (telles que "haut de gamme", "milieu de gamme" ou "bas de gamme"). Vous pouvez obtenir ces informations de différentes manières, à l'aide des API JavaScript ou des indications client.

Utiliser JavaScript

Les propriétés JavaScript, telles que navigator.hardwareConcurrency, navigator.deviceMemory et navigator.connection, vous permettent d'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 indices client

Les signaux d'appareil peuvent également être déduits dans les en-têtes de requête HTTP, via les indices client. Voici comment implémenter le code précédent pour la mémoire de l'appareil avec les indications client.

1. Indiquez au navigateur que vous souhaitez recevoir des indications sur la mémoire de l'appareil dans l'en-tête de la réponse HTTP pour toute requête first party :

   HTTP/1.1 200 OK
   Content-Type: text/html
   Accept-CH: Device-Memory
   

2. Vous commencerez à 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
   

3. Utilisez 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);
     …
   });
   

4. Créez votre propre logique pour mapper ces informations aux catégories d'appareils et afficher l'invite d'installation de l'application correspondante dans chaque cas :

   if (isDeviceMidOrLowEnd()) {
     // show "Lite app" install banner or PWA A2HS prompt
   } else {
     // show "Core app" install banner
   }
   

Permettre aux utilisateurs d'installer votre application, quelle que soit la plate-forme

La possibilité d'avoir 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 possible que pour les applications installées depuis les plates-formes de téléchargement d'applications, les entreprises peuvent penser qu'il suffit d'afficher une bannière d'installation d'application pour convaincre les utilisateurs d'installer leurs expériences.

Il existe d'autres options pour permettre aux utilisateurs d'installer une application, y compris en proposant des expériences d'application légères dans les stores et en permettant aux utilisateurs d'ajouter des PWA à l'écran d'accueil en les y invitant directement depuis le site Web.