Auparavant, l'installation d'applications n'était possible que dans le contexte d'applications spécifiques à la 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:
- Installer la PWA à partir du navigateur
- Installer la PWA à partir de l'App Store
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 présente les bonnes pratiques à suivre 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 couvertes incluent les PWA installées à la fois depuis le navigateur et 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 plutôt que dans un onglet de navigateur. Elles peuvent être lancées depuis l'écran d'accueil, la barre 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'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 à 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 de supprimer d'autres applications ou de libérer de l'espace en supprimant des contenus de valeur. 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, en particulier pour les utilisateurs disposant de connexions lentes et de forfaits de données onéreux.
- Friction:quitter un site Web pour accéder à une plate-forme de téléchargement d'applications 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:les modifications apportées aux applications spécifiques à une plate-forme peuvent 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 à la 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 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 celle de votre application spécifique à la plate-forme. Par exemple, si l'application spécifique à la plate-forme ne propose pas les 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 é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 PWA ne s'affiche que pour lui (ce que nous appelons "PWA en remplacement").
PWA en tant qu'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 pour ordinateur affiche une icône d'installation dans la barre d'adresse, tandis que sur mobile, une mini-barre d'informations s'affiche:
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 votre taux d'installation d'applications 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 veulent pas installer votre application spécifique à la plate-forme d'obtenir une expérience installée 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.
L'heuristique peut ensuite être implémentée 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 significative, 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 de la plate-forme 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 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 ne disposez pas d'une PWA ou si elle propose 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ée dans un wrapper spécifique à la plate-forme. Vous pouvez également importer des PWA complètes dans les plates-formes de téléchargement. (Nous reviendrons sur ce point plus loin dans cet article.) Certaines entreprises choisissent de les proposer en tant qu'expériences "allégées", et d'autres ont également utilisé cette approche pour leurs applications principales.
Promouvoir des applications légères
Selon une étude Google Play, pour chaque augmentation de 6 Mo de la taille d'un APK, le taux de conversion des 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 y remédier, certaines entreprises exploitent leur PWA pour proposer une version allégée de leur application sur le Play Store à l'aide d'activités Web fiables. Les TWA encapsulent votre PWA dans un composant semblable à une vue Web, et la taille de l'application obtenue ne dépasse généralement pas quelques mégaoctets.
Oyo, l'une des plus grandes entreprises hôtelières d'Inde, a créé une version allégée de son application et l'a mise à disposition 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 7% de la taille de son application Android. Une fois installée, elle est impossible à distinguer de son 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.
Offrir une expérience Web légère
Intuitif, 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, si vous pouvez 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 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 à des catégories d'appareils (par exemple, "haut", "moyen" ou "bas"). Vous pouvez obtenir ces informations de différentes manières, à l'aide d'API JavaScript ou d'indices client.
Utiliser JavaScript
À l'aide de 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 indices 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 des indices client:
Tout d'abord, 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 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 mettre en correspondance ces informations avec les catégories d'appareils, et affichez 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
}
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 plusieurs options pour permettre aux utilisateurs d'installer une application, y compris en leur proposant des expériences d'application légères dans les plates-formes de téléchargement et en leur permettant d'ajouter des PWA à l'écran d'accueil en les invitant à le faire directement depuis le site Web.