PWA : Progressive Web Apps

Sites web, applications natives, hybrides ou compilées en natif…

Pour accéder à un service numérique, les internautes ont deux solutions : utiliser leur navigateur (site web) 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 et des applications natives (pour Android, iOS, Windows…). 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.

Pour répondre à cette problématique, les applications hybrides sont nées. 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. Revers de la médaille : les performances ne sont pas satisfaisantes, le site et l’application sont encore séparés (vous ne pourrez pas, par exemple, synchroniser facilement le contenu d’un panier) et vous n’accédez pas à l’ensemble des fonctionnalités natives du terminal.

Plutôt que d’embarquer du web dans une appli, vous pouvez construire une base commune, puis l’adapter aux codes de chaque plateforme (applications compilées en natif). Vous développez votre service dans un langage unique, puis vous le compilez en natif, pour les différents systèmes visés. Au niveau des performances, vous vous rapprochez des applications natives ; une partie du code est mutualisée, l’accès à l’ensemble des fonctionnalités du device est facilité. En revanche, votre site et vos applications sont encore séparés, vous êtes dépendant d’un framework et la mutualisation de votre code source n’est que partielle.

Progressive web apps : une réponse à ces problématiques de développement

Depuis quelques années, Google encourage les développeurs à s’intéresser à une autre technologie : les progressive web apps. “Les PWA sont des applications web universelles qui offrent l’expérience d’une application native”. 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 progressive web apps 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…). Vous pouvez vous rendre sur WhatWebCanDo.Today pour prendre la mesure des données et des actions accessibles pour votre navigateur. Et 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.

Bonne nouvelle pour les PWA : votre navigateur peut accéder à de nombreuses données. Crédits : capture WhatWebCanDo.Today.

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.

Les éléments de base d’une PWA : manifeste et service worker

Une PWA possède deux briques essentielles. Le premier est un manifeste : un fichier JSON qui décrit 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, c’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 de vos usagers.

Pour construire ces premiers éléments, vous pouvez utiliser Workbox, un service proposé par Google pour démarrer rapidement votre progressive web app. À noter également : vous pouvez analyser votre PWA via Lighthouse. Votre application sera auditée selon les critères cités par Google (reliable, fast, engaging) pour vous aider à l’améliorer.

Retour d’expérience PWA : les gains obtenus grâce aux progressive web apps

De nombreuses entreprises ont choisi de développer des progressive web apps. Au Web2day, Clément Dubois et Simon Belbeoch ont dévoilé les gains obtenus par des entreprises emblématiques du numérique.

  • - Twitter (application Twitter Lite) : déployé dans une quarantaine de pays, en Afrique et en Inde notamment. 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,

Ces résultats sont bluffants mais seront vraisemblablement plus limités sur le marché français. L’ampleur des gains peut s’expliquer par la mauvaise qualité des connexions dans les pays ciblés (une problématique en partie résolue par la gestion offline des PWA). Mais en France aussi, beaucoup d’entreprises optent pour les PWA. C’est notamment le cas de Lancôme, qui a obtenu 17% de conversions supplémentaires, 54% d’utilisateurs supplémentaires sur iOS et 8% de reprise de panier grâce aux notifications push.

Les PWA sont-elles adaptées aux spécificités de votre produit ?

Les progressive web apps peuvent, dans de nombreux cas, remplacer des applications natives. Les avantages sont nombreux, nous pouvons au moins en citer 10 :

  • - l’expérience utilisateur est proche de celle proposée par les applications natives ;
  • - on accède aux fonctionnalités natives des terminaux (notifications, capteurs…) ;
  • - les coûts de développement et de maintenance sont réduits ;
  • - les coûts de mise en place aussi ;
  • - les contenus sont accessibles depuis les moteurs de recherche (SEO) ;
  • - les gains en performance sont sensibles (et donc la rétention) ;
  • - la consommation de data et le poids des PWA est limité ;
  • - on bénéficie des dernières technologies web ;
  • - les mises à jour sont réalisées en temps réel ;
  • - vos utilisateurs accèdent à certains contenus lorsqu’ils sont hors-ligne.

Les progressive web apps sont particulièrement adaptées pour concevoir un POC ou pour adapter un site web responsive en application mobile. En revanche :

  • - vous ne devez pas avoir de besoins spécifiques sur iOS à court terme, Apple ne permettant pas l’installation de PWA (pas de push via Safari, pas de TWA…) ;
  • - les applications natives sont au plus proche du hardware et seront à privilégier si vous souhaitez vous appuyer dessus pour la performance (jeux vidéo, calculs… ) ;
  • - si vous souhaitez proposer une interface utilisateur parfaitement intégrée au device utilisé, là aussi : rien de mieux qu’une application dédiée, par plateforme.

Les PWA, c’est comme pour tout : vous devrez comparer les gains escomptés aux inconvénients induits et aux éventuels charges à court terme. Mais pour vos produits actuels ou vos prochains projets, pensez à inclure les progressive web apps dans le champ des possibles. Les PWA ont de nombreux atouts et de beaux jours devant elles…

Les commentaires

Leave a Reply