Les applications PWA : exemples d'utilisation réussie

Date: 2024-04-26 | Temps de lecture: 7 minutes (1359 words)

Les applications mobiles sont un moyen populaire de mener des communications marketing avec les clients, mais leur développement est coûteux et souvent long. Une alternative est apparue sous la forme de la technologie PWA, initiée par Microsoft en 2000. Les Progressive Web Apps affichent les données du site de l'entreprise dans une interface familière d'application mobile, de sorte que les utilisateurs ne voient pas de différence.

En 2015, Google a commencé à soutenir les composants nécessaires à la création de PWA. Certains pensent que dans le futur, les applications web remplaceront les applications classiques. Aujourd'hui, le format hybride entre le site web et l'application classique est utilisé pour accélérer le développement et réduire les coûts.

Découvrez-en plus sur les PWA, leurs avantages et inconvénients, ainsi que sur les caractéristiques de leur création.

Qu'est-ce que les applications PWA

Les applications web progressives (Progressive Web App, PWA) sont des adaptations de sites web d'entreprises en applications mobiles. Visuellement identiques, elles offrent une expérience différente.

Les PWA reproduisent les fonctionnalités des applications mobiles mais s'exécutent via les navigateurs sur le domaine du site. Elles sont des versions avancées du site adaptées aux appareils des utilisateurs, sans nécessiter de développement spécifique pour Android ou iOS.

Ces applications peuvent fonctionner de manière autonome et envoyer des notifications push, essentielles pour la communication continue de la marque avec son public. Elles sont généralement installées via le site de l'entreprise, mais des répertoires d'applications web progressives existent également : appsco.pe, storepwa.ru, findpwa.com et autres.

Catalogues avec applications PWA

Les PWA accélèrent l'interaction avec les utilisateurs, offrant un avantage concurrentiel aux marques et promouvant leurs produits et services via les notifications push. Elles sont largement utilisées dans divers secteurs, notamment le commerce, la beauté, le nettoyage, l'automobile, la restauration, la livraison de nourriture, les médias, etc. En Russie, elles sont une solution pour contourner les blocages massifs des applications officielles dans les magasins d'applications.

Avantages et inconvénients des applications PWA

Avantages

Les PWA offrent une expérience utilisateur similaire à celle des applications mobiles, mais leur développement est beaucoup moins coûteux.
Créer une version PWA du site est bien plus rapide. Il existe même des constructeurs pour le faire. Par exemple, Microsoft affirme que la version progressive du site peut être créée en un déjeuner avec l'outil PWABuilder.
Possibilité d'installation depuis le site Web sans passer par un catalogue d'applications, évitant ainsi les contraintes et les risques de suppression.
Augmentation de la fidélité et de l'engagement des utilisateurs grâce aux notifications PWA, favorisant les ventes et le panier moyen.
Indexation par les moteurs de recherche, offrant un trafic supplémentaire grâce aux règles d'optimisation SEO.
Mises à jour automatiques et taille réduite (moins de 3 mégaoctets), économisant de l'espace de stockage sur l'appareil de l'utilisateur.
Performances rapides par rapport aux sites Web et possibilité de fonctionner hors ligne (avec certaines limitations).

Inconvénients

Les applications PWA n'ont pas un accès complet aux capacités matérielles des appareils sur lesquels elles sont installées, ce qui limite l'utilisation de certaines technologies. Par exemple, sur iOS, l'utilisation de Face ID et du Bluetooth n'est pas possible. Apple s'adapte très lentement aux applications web, ce qui pose problème pour l'envoi des notifications Push sur leurs appareils.
Dépendance du navigateur. Des restrictions peuvent survenir en raison de l'utilisation de versions obsolètes des systèmes d'exploitation, où il est impossible d'installer des mises à jour. De plus, tous les navigateurs ne fournissent pas toujours toutes les fonctionnalités des applications web.
Forte consommation de la batterie. Les PWA sont codées en JavaScript, un langage de programmation qui consomme beaucoup de ressources système, contrairement aux langages natifs tels que Java, Swift, et autres.
Moins de viralité. Les utilisateurs ont l'habitude de télécharger des applications depuis l'App Store (iOS) et Google Play (Android), plutôt que de les chercher sur les sites des marques. La création uniquement d'une version PWA nécessite un investissement supplémentaire dans une campagne de marketing pour la promouvoir. Ou bien, il faut passer par la modération des catalogues d'applications, ce qui n'est pas toujours simple et rapide.

Cas de succès des entreprises avec les applications PWA

Les exemples de PWA incluent des marques connues : Telegram, Youtube, TikTok, Aviasales, Tinder, Pinterest, Forbes, AliExpress, Uber et d'autres. Certains ont grandement amélioré l'expérience utilisateur et augmenté leurs revenus.

Tinder a lancé une version web de son application, réduisant la mémoire de 2,8 Mo (contre 30 Mo pour Android). La vitesse de chargement est passée de 11,91 à 4,69 secondes, améliorant l'expérience utilisateur.

Pinterest a également réduit le temps de chargement de son interface de 23 à 5,6 secondes. Le temps passé sur le service a augmenté de 40 %, les revenus publicitaires de 44 % et l'engagement de 60 %.

Application PWA de Pinterest

Améliorer l'expérience utilisateur avec les PWA a été réalisé par Forbes, dont l'application était souvent considérée comme lourde. Désormais, les gens passent 40 % de temps en plus à lire les articles et consomment 15 % de contenu supplémentaire. Les pages se chargent également plus rapidement. Alors qu'auparavant, l'attente était en moyenne de 6,5 secondes, dans la nouvelle version, elle est réduite à seulement 2,5 secondes.

L'application web progressive a augmenté le taux de conversion d'AliExpress de 104 %. Les utilisateurs visitent deux fois plus de pages par session et y consacrent 74 % de leur temps.

Uber utilise la technologie PWA pour réduire le temps de chargement de son application sur tous les appareils, même avec une connexion 2G. C'est crucial pour pénétrer de nouveaux marchés. En conséquence, le service s'ouvre en 3 secondes et ne nécessite que 50 kilo-octets.

L'application PWA d'Uber

Qu'est-ce qu'il faut pour créer une application PWA

Les Progressive Web Apps (PWA) sont disponibles sur toutes les plates-formes, mais nécessitent initialement un site web qui est transformé en une version progressive à l'aide de JavaScript, HTML et CSS. L'application web est affichée via un WebView - un composant du système qui ouvre les pages web dans l'application. Pour que les PWA fonctionnent, les navigateurs Safari (iOS) et Chrome (Android) sont nécessaires.

Pour créer une application web, vous aurez besoin d'un manifeste d'application web et d'un Service Worker.

Le Service Worker est un script qui reçoit des informations (requêtes) du navigateur via une connexion HTTPS sécurisée. Ce composant ouvre le navigateur en arrière-plan, même si la page n'est pas active. Grâce au Service Worker, des notifications Push sont envoyées à l'utilisateur, et l'application se synchronise avec le site sans intervention de l'utilisateur. Les mises à jour se font automatiquement, et le mode hors ligne est également disponible.

Le Manifeste d'Application Web est un fichier manifest.json ajouté au code de la page du site web, qui transmet des informations au navigateur sur la manière dont l'application doit être affichée sur l'appareil. Il définit le nom, l'icône, l'image de démarrage, le thème de l'application, et d'autres éléments. Le manifeste indique quelles données restent inchangées et lesquelles sont mises à jour.

D'autres éléments importants pour le développement d'une application web :

Un certificat SSL numérique confirme l'authenticité du site. Il est nécessaire pour une connexion HTTPS sécurisée, assurant la sécurité.
La coquille de l'application (Application Shell) est un modèle dans lequel les données des pages web du site sont chargées.

Résumé

Les applications PWA imitent presque entièrement l'interface et les fonctionnalités des applications mobiles, mais fonctionnent différemment. Une Progressive Web App se lance sur l'écran via un raccourci grâce au navigateur. Bien que l'utilisateur ne voie que l'application, celle-ci se met à jour, stocke des données et envoie des notifications push. Le développement de PWA est plus simple et plus rapide, mais comporte des limitations.

Une application web est créée avec les composants Service Worker et Web App Manifest, et un certificat SSL est nécessaire pour sécuriser la connexion et utiliser Application Shell.

Les applications PWA évoluent rapidement et pourraient à terme remplacer les applications traditionnelles.