10 octobre 2019 Emilie Sébert

PWA : le futur du web mobile ?

Une progressive web application est une application consultable tout aussi bien en ligne que hors-ligne, à laquelle on peut accéder depuis un navigateur (ex : Safari, Chrome) mais aussi directement disponible sur l’écran d’accueil du téléphone, au même titre qu’une application native. Popularisé par Google en 2015, cette façon de construire et d’imaginer les sites web de demain est maintenant un sujet incontournable, au cœur des enjeux de l’Internet du futur, surtout dans le domaine du E-Commerce ! ARCA Computing vous livre les caractéristiques des PWA, leurs atouts, les domaines dans lesquels elles excellent, tant pour les entreprises que pour les développeurs.

#1 PWA: quésako?

Les éléments de base d’une PWA

Une PWA ou Progressive Web App est un site internet ayant intégré des fonctionnalités jusqu’alors réservées aux applications. Bien que le concept ne soit pas nouveau, les PWA deviennent de plus en plus intéressantes et qualitatives aujourd’hui, grâce aux dernières technologies et aux avancées de nos navigateurs.

Le principe fondamental d’une PWA repose sur la segmentation et l’association des briques d’une application au travers d’API. Cette conception particulière permet de prendre le meilleur de chaque technologie utilisée dans l’architecture métier afin d’obtenir un parfait compromis entre une application native/mobile et un site web.

La PWA repose sur deux briques essentielles. Le premier est un manifeste sous forme de fichier JSON, décrivant les données de base de l’app, pour qu’elle puisse se comporter comme une application native (icône, couleur de fond du splash screen, nom de l’application…).
Le second élément est le service worker. Le cœur des PWA est un processus JavaScript qui tourne côté client (navigateur), qui s’exécute en dehors de l’application mais qui est relié à l’app. Le service worker sert de proxy : quand l’application demande des ressources, les requêtes passent par le service worker. On peut placer des ressources en cache pour gérer les accès hors-ligne. Le service worker tourne même quand l’app n’est pas lancée, ce qui permet de diffuser des notifications sur les terminaux des usagers.
Pour construire ces premiers éléments, les développeurs peuvent utiliser Workbox, un service proposé par Google permettant de démarrer rapidement la PWA. Il est également possible d’auditer la PWA via Lighthouse, selon les critères cités par Google, à savoir : reliable, fast, engaging. Cet outil d’analyse aide ainsi le développeur à l’améliorer.

Applications web, natives, hybrides… quelles différences ?

Pour comprendre l’intérêt et la pertinence d’une PWA, il est important de distinguer applications web, natives et hybrides.
Pour accéder à un service numérique, les internautes ont deux solutions : utiliser leur navigateur ou lancer une application installée sur leur terminal. Pour permettre aux internautes d’accéder à ces services, les développeurs peuvent donc concevoir un site web adapté au mobile ou une application web et des applications natives (pour Android, iOS, Windows…).

– Une application web est avant tout un site internet HTML5 consultable uniquement en ligne. Elle partage beaucoup de similitudes avec une application mobile native, mais est consultable uniquement en ligne depuis un navigateur web.

– Une application native est programmée directement via les outils de développement natif du téléphone. Elle ne fonctionne que sur des systèmes d’exploitation spécifiques (Apple ou Android). Il faut donc faire deux développement distincts.
Si cette stratégie semble adaptée au besoin de l’utilisateur, elle est coûteuse : plusieurs produits sont développés et maintenus en parallèle, et les ponts entre les sites et les applications sont très limités.

– Une application hybride est programmée avec des technologies web, mais s’adapte à tous les systèmes d’exploitation. Il n’y a donc besoin de faire qu’un seul développement. Il s’agit d’embarquer des technologies web dans une coquille vide, un composant appelé WebView. On accède à certaines fonctionnalités native du mobile, la base du code est unique, les compétences en développement web sont pratiquement suffisantes. En revanche les performances peuvent ne pas être toujours au rendez-vous. En effet, le site et l’application sont encore séparés (difficulté de synchroniser facilement le contenu d’un panier par exemple) et l’accès à l’ensemble des fonctionnalités natives du terminal est impossible.

Il existe une alternative… Plutôt que d’embarquer du web dans une appli, il est possible de construire une base commune, puis de l’adapter aux codes de chaque plateforme (applications compilées en natif). On peut ainsi développer son service dans un langage unique, puis le compiler en natif, pour les différents systèmes visés. Au niveau des performances, on se rapproche des applications natives ; une partie du code est mutualisée, l’accès à l’ensemble des fonctionnalités du device est facilité. En revanche, le site et les applications sont encore séparés, le développeur est également dépendant d’un framework et la mutualisation du code source n’est que partielle.

Où classer les PWA ?

Une PWA se situe est ces trois notions et peut donc profiter des fonctionnalités d’une application mobile native, tout en étant consultable depuis un navigateur .
Concrètement, on peut les ajouter à l’écran d’accueil du téléphone pour pouvoir les consulter hors-ligne et sans l’interface du navigateur (barre d’adresse, bouton suivant / précédent) pour un vrai UX/UI d’application.
Cet ajout à l’écran d’accueil se fait soit via une action explicite de l’utilisateur, soit par le navigateur qui propose à l’utilisateur de l’ajouter à l’écran d’accueil si ce dernier utilise l’application de manière prolongée ou récurrente.

Pour résumer : les PWA sont des applications web standards, elles peuvent utiliser les API HTML5, elles sont installables et leur développement est unique.

#2 PWA : une réponse aux problématiques de développement

Selon la documentation PWA proposée par Google, une application web progressive doit être :
– Fiable : charger instantanément et être en mesure de fonctionner (partiellement) même en cas de couverture limitée ou si l’internaute est hors connexion (gestion fine du cache, synchronisations en arrière-plan…)
– Rapide : répondre rapidement aux interactions des internautes. La performance est un point clé des PWA, il est essentiel d’intégrer l’optimisation des performances à toutes les étapes du développement.
– Engageante : les PWA peuvent être installées, depuis un site web ou un magasin d’applications, et intégrer des mécanismes de ré-engagement tel que les notifications push sur mobile.

Les progressive web apps peuvent être installées sur un mobile, depuis un site web, et être accessibles depuis le home screen du mobile de l’utilisateur. Elles peuvent également être référencées dans le Play Store de Google ou le store Windows 10 de Microsoft. Malheureusement, Apple ne permet pas d’installer des PWA sur iOS.
Elles sont basées sur le navigateur : c’est un point très important, car leurs possibilités dépendent de celles des navigateurs, qui évoluent à un rythme plus soutenu que les OS. Les browsers modernes peuvent désormais accéder aux fonctions natives de vos machines, qu’il s’agisse d’un ordinateur ou d’un mobile (capteurs vidéo et micro, GPS, notifications push…).
Depuis peu, des PWA peuvent même être intégrées dans des applications natives Android (Trusted Web Activities) : le téléphone utilise alors les Chrome Custom Tabs plutôt que les WebViews, pour bénéficier des dernières évolutions de Google Chrome.

Les avantages sont nombreux pour l’utilisateur, le développeur et le client :

Pour l’utilisateur : expérience optimisée et adaptée
– Temps de chargement
– Utilisation sans connexion
– Responsive
– Pas d’installation requise, accès depuis une simple URL. En enregistrant la PWA dans ses favoris, une icône apparaîtra sur l’écran d’accueil, comme pour les applications natives. Cela réduit le chemin d’accessibilité de l’utilisateur vers l’application (à chaque étape d’accès à l’application, 20% des utilisateurs potentiels renoncent à y accéder).
– Les mises à jour sont réalisées en temps réel: l’app s’actualise automatiquement lors de son chargement.
– La consommation de data et le poids des PWA est limité

Pour le développeur : un workflow unifié
– Un développement plus simple (langage uniformisé) et moins long. La PWA n’est développée qu’une seule fois alors qu’une application native requiert deux développements distincts, l’un pour iOS, l’autre pour Android.
– On peut mettre à jour l’application à tout moment : fiabilité & sécurité.
– Même niveau de sécurité que les apps natives
– Les PWA bénéficient des dernières technologies web
– Les progressive web apps sont particulièrement adaptées pour concevoir un POC ou pour adapter un site web responsive en application mobile.

Pour le client : de nouvelles opportunités
– Un développement moins coûteux (un seul développement pour toutes les plateformes) et moins long. De plus, il est important de préciser qu’il y a une mutualisation de la maintenance sur la PWA.
– Notifications Push : app engageante
– Amélioration du référencement (SEO), les contenus sont accessibles depuis les moteurs de recherche (SEO)
– Une appli qui est automatiquement sur toutes les plateformes : Mobile : ios & android, Desktop : Mac, Linux, Windows. Les PWA permettent de se passer complètement des web stores et de déployer une application sur un simple serveur web.

Des inconvénients … ou pas :

– Pas la même prise en charge sur toutes les plateformes. Toutes les PWA ne sont pas compatibles avec iOs ou Safari. Ces applications ne respectent généralement pas le test de qualité auquel sont soumises l’ensemble des applications publiées sur l’AppStore. Elle fonctionnent donc de façon restreinte sans certaines fonctionnalités maîtresse du concept de PWA comme les notifications push, l’accès aux capteurs et composants du téléphone (altimètre, ID visage, bluetooth..) ou encore l’accès à In App Payments et à beaucoup d’autres services basés sur Apple.
– Plusieurs limitations dans les fonctionnalités : Bluetooth, Background syncing, beacons… MAIS la plupart des projets n’utilisent pas ces fonctionnalités.
– Les PWA ne sont pas disponibles sur la recherche des app stores. Consommation élevée de batterie.
– Pour proposer une PWA à ses visiteurs, il faut disposer d’une connexion internet dans l’ensemble de ses espaces d’exposition
– Impossible de monétiser son application avec une PWA.

#3 PWA : cas d’usages

De nombreuses entreprises ont choisi de développer des progressive web apps. Les PWA sont idéalement utilisées dans le cadre de projets de Marketing Automation et pour optimiser les ventes dans le secteur du E-Commerce.
Certaines marques ayant adopté les PWA enregistrent plus de conversions sur iOS par rapport à un site non-PWA. D’ailleurs, Google a publié des études de cas de sociétés qui ont adopté les PWA et les résultats sont très positifs :

– Twitter (application Twitter Lite) : qui pèse moins de 1 Mo, se charge 30 % plus rapidement que la version native et consomme 70 % de data en moins permettant aux pays en voie de développement et les connexions à bas débit d’utiliser pleinement ses services. Déployée dans une quarantaine de pays, en Afrique et en Inde notamment, on a constaté 75% de tweets envoyés en plus, 65% de tweets vus supplémentaires, 20% de taux de rebond en moins.
– Pinterest : disponible sur le store Windows 10. 800 000 utilisateurs hebdomadaires de la PWA et 843% d’inscriptions en plus.
– AliExpress : 2x plus de pages visitées, 74% de temps passé en plus sur le site, 104% de conversions en plus pour les nouveaux utilisateurs.
– Alibaba : 76% de conversions supplémentaires, 30% d’utilisateurs supplémentaires sur Android, 14% sur iOS.
– BookMyShow : 80% de conversions supplémentaires,
– L’Equipe : taux de rebond divisé par 2 chez les 10 % d’utilisateurs qui se sont vus proposer de tester l’application.
– La chaîne de télévision américaine The Weather Channel constate une baisse du temps de chargement de son site de 80% à partir de sa PWA, et près d’un million d’utilisateurs ont activé la réception de notifications push.
– Lancôme : 17% de conversions supplémentaires, 54% d’utilisateurs supplémentaires sur iOS et 8% de reprise de panier grâce aux notifications push.

Web et mobile, l’union fait la force ! Souvent désigné comme le “futur du web mobile”, les PWA représentent un parfait compromis entre les applications natives et le web traditionnel.
Les PWA ont de nombreux atouts et sans nul doute de beaux jours devant elles… Les technologies Web, ouvertes et modernes, forment un socle extrêmement solide et tourné vers l’avenir, propice à leur croissance.
A voir le soutien de Google et de Microsoft pour pousser l’adoption des PWA et la promotion faite par ces géants de l’informatique, on peut s’attendre à ce que les PWA deviennent de plus en plus pertinentes pour une gamme de projets mobiles & applicatifs toujours plus importante.

Besoin de développer une PWA, contactez-nous !

Tagged: