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 disposez de différentes méthodes:
- Installez la PWA à partir du navigateur.
- Installez la PWA à partir de la plate-forme de téléchargement d'applications.
Disposer de plusieurs canaux de distribution est un moyen efficace de toucher un grand nombre d'utilisateurs, mais il peut être difficile de choisir la bonne stratégie pour promouvoir l'installation de votre PWA.
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 et non dans un onglet du 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'un à l'autre à l'aide du sélecteur d'applications. Vous aurez ainsi l'impression qu'ils font 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éroutant 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 signifier en supprimer d'autres ou libérer de l'espace en supprimant du contenu 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 s'avérer coûteux et lent, d'autant plus pour les utilisateurs dont la connexion est lente et les forfaits de données coûteux.
- Facilité d'utilisation:le fait de quitter un site Web et de 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 à une application spécifique à 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 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 utilisant une configuration d'analyse pour suivre le pourcentage d'utilisateurs "Web pour mobile uniquement". utilisateurs.
Si la taille de ce segment est considérable, cela signifie que vous devez proposer d'autres méthodes pour installer vos expériences.
Promouvoir l'installation de votre PWA via le navigateur
Si vous disposez d'une PWA de haute qualité, il est 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 à une 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 d'encourager 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 ChromeOS.
Pour certaines applications, générer des installations d'applications spécifiques à chaque plate-forme constitue un élément clé du modèle économique. Dans ce cas, il est judicieux de promouvoir l'installation de votre application spécifique à la 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 comme 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 installable dans la barre d'adresse et, sur mobile, affiche une mini-barre d'informations:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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 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 votre PWA. Toutefois, 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 de 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 dans laquelle vous présenterez à l'utilisateur une promotion pour l'installation de votre PWA.
Exemple:Un utilisateur de PWA est un utilisateur qui a vu l'invite d'installation d'une application spécifique à la plate-forme, mais qui n'a pas installé cette application. Il est revenu sur le site au moins cinq fois ou a cliqué sur la bannière de l'application, mais continue d'utiliser le site Web.
Ensuite, vous pouvez implémenter l'heuristique comme suit:
- Afficher la bannière d'installation de l'application spécifique à la plate-forme
- Si un utilisateur ferme la bannière, définissez un cookie contenant ces informations (par exemple,
document.cookie = "app-install-banner=dismissed"). - Utiliser un autre cookie pour suivre le nombre de visites d'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 développées avec différentes technologies, y compris des techniques PWA. Dans Combiner des PWA dans des environnements natifs, vous trouverez un résumé des technologies que vous pouvez utiliser à 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 conçues avec un 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 comme étant "allégées". expériences. D'autres ont également utilisé cette approche pour leurs applications phares.
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 de téléchargement d'une application de 10 Mo peut être 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é, il est impossible de le distinguer de leur application Android:
<ph type="x-smartling-placeholder">Oyo a gardé à la fois le flagship et le "lite" versions de l'application sur le Play Store, offrant un choix à leurs 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 aux catégories d'appareils (par exemple, "élevé", "moyen" ou "faible"). 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 des appareils peuvent également être inférés dans les en-têtes de requête HTTP, par le biais d'indicateurs 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
Ensuite, vous commencerez à 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 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'avoir 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 d'applications. Les entreprises pourraient donc penser que l'affichage d'une bannière d'installation sur la plate-forme de téléchargement serait suffisant pour 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.