PWA : le futur du web mobile ?

Les PWA (ou Progressive Web Apps) ont été massivement déployées sur le marché du mobile en quelques années. Consultables tout aussi bien en ligne que hors-ligne, accessibles depuis un navigateur mais aussi directement disponibles sur l’écran d’accueil du téléphone (au même titre qu’une application native), les PWA présentent de nombreux avantages. Faut-il pour autant, lancer absolument son projet d’application mobile, avec la norme Progressive Web App ? Est-elle pérenne ? Est-elle stable ? Et surtout répond-t-elle aux besoins de mon marché ? Offre-t-elle une réelle valeur ajoutée versus les applications natives ? ARCA Computing vous livre tout dans cet article sur les PWA, leurs avantages, inconvénients et quelles différences faire avec une application native.

#1 PWA: késako?

Les caractéristiques 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 : Google et Microsoft collaborent

Comme évoqué plus haut, la popularité des applications et des services basés sur web ne cesse d’augmenter de nos jours. Conscient de cette réalité, Google et Microsoft se sont mis au diapason pour faciliter le quotidien des développeurs lors de la création des Progressive Web Apps (PWA) dans le Play Store.

Dans un billet de blog émis en août, Judah Gabriel Himango de Microsoft a annoncé la collaboration de Microsoft et de Google pour « faire du Web une plateforme d’application plus performante ».

Les outils open source de PWA de Microsoft et de Google se nomment respectivement PWABuilder et Bubblewrap. Pour bien comprendre, Bubblewrap est un utilitaire et une bibliothèque logicielle permettant de créer et de signer des applications Android du Play Store à partir des PWA. Le PWABuilder est quant à lui, un outil qui aide les développeurs à créer des PWA à partir des sites web existants.

Himango a ainsi annoncé officiellement que « PWABuilder de Microsoft et Bubblewrap de Google collaborent désormais pour aider les développeurs à publier des PWA dans le Google Play Store ». Par ailleurs, il rajoute que le PWABuilder utilisera désormais le code source de Bubblewrap.

Cette collaboration entre Google et Microsoft sur les PWA repose principalement sur les avantages respectifs qu’ils pourront en tirer. Pour Microsoft, l’utilisation des PWA permettra d’augmenter le nombre d’applications sur son Store en autorisant les applications existantes de migrer vers cette technologie. De son côté, Google pourra bénéficier de l’architecture Web offerte par les PWA pour éviter les développements spécifiques de ses applications sur ses différentes plateformes.

Les PWA fournis pour Google Play Store permettront aux développeurs d’accéder directement à des parties spécifiques des applications Web. Sous Windows, ces parties spécifiques prendront la forme de liste de raccourcis lorsque l’utilisateur effectuera un clic droit sur l’icône dans la barre des tâches. La même fonctionnalité sera observée sur Android lorsqu’on appuie en continu sur l’icône de l’application.

Par ailleurs, comme pour les applications Android classiques, les PWA pourront être utilisées pour personnaliser l’apparence générale de l’application. Ainsi, par exemple, la couleur de la barre d’état peut être modifiée de manière à s’accorder au thème de l’application.

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 !