fabernovel loader

Apr 10, 2018 | 8 min de lecture

Tech

GO PWA ?

Comment une API web transforme drastiquement le business.

Pierre Lecigne

Agile Web Developer


FABERNOVEL CODE

Tarek Belkahia

Senior Software Engineer


FABERNOVEL TECHNOLOGIES
La graine de l’API du Service Worker semée il y a 2 ans est en train de germer. Tout le paysage web et applicatif commence à être impacté par les nouvelles possibilités regroupées dans le concept de Progressive Web App. Déjà supportée par Chrome, Firefox et Opera depuis 2016 et Edge depuis 2017, ces nouvelles fonctionnalités vont enfin être supportées par la prochaine version de Safari.

PWA, c’est quoi ?

Les progressive web apps sont des dispositifs web qui améliorent l’expérience utilisateur par rapport à un site traditionnel en se focalisant sur plusieurs éléments :

  • Le fonctionnement hors ligne et la persistance locale des informations
  • La performance du rendu
  • L’engagement de l’internaute, notamment via les push notifications, l’installation d’une icône sur
  • L’écran d’accueil semblable à celle d’une app traditionnelle, le mode fullscreen…
  • Des fonctions évoluées comme le paiement intégré en un clic vers Samsung Pay, Android Pay, Alipay…

Plusieurs avancées sont regroupées derrière ce concept chapeau, en particulier l’API web des fameux Service Workers, ces scripts chargés lors de la visite sur un site et qui continuent à opérer en tâche de fond, même quand nous ne sommes plus sur le site.

Nuits blanches à Seattle

On sait dès le début comment va se terminer l’histoire entre Tom Hanks et Meg Ryan l’ internaute et la PWA : après beaucoup de quiproquos et de malentendus, ils se tomberont dans les bras l’un de l’autre.
Côté développeurs, l’idylle a débuté il y a plus de 2 ans et des dizaines de PWAs ont emboîté le pas du porte drapeau Twitter Lite. Les chiffres prouvent le bien-fondé de la démarche. Zoom sur quelques éléments relevés sur https://www.pwastats.com/ :

  • 5 secondes seulement pour pouvoir interagir avec Twitter Lite
  • Lyft déclare un périmètre iso entre sa PWA et son app native
  • Avec 150Ko pour sa PWA contre plusieurs Mo sur l’AppStore, Pinterest constate +60% d’engagement par rapport à son ancien site et même quelques pourcents de plus par rapport à son appli native. Précision : il s’agit de 150Ko pour accéder à la première page et permettre les premières étapes de l’engagement, pas la totalité chargée en cours de navigation
  • +95% de taux de conversion pour la PWA Wego
  • Jumia, avec un public ayant une connexion limitée, réalise 12x plus de visites sur sa PWA que sur ses apps natives

Conséquence pour le business

Il y a quelques années, Google favorisait le contenu le plus pertinent, en se basant sur ce type de critères :

  • Qualité de la structure de l’information, du champ sémantique
  • Qualité du contenu mesurée en nombre de liens pointant vers ce contenu

Mais le but étant de satisfaire au mieux l’internaute, les moteurs ont progressivement ajouté d’autres critères qui cette fois renforcent la sécurité ou le confort de l’internaute. A contenu d’égale qualité, le site qui sera favorisé est désormais :

  • Taillé pour le mobile
  • Accessible
  • Sécurisé via https
  • Rapidement chargé
  • Optimisé pour faire une bonne première impression auprès de l’internaute.

À ce titre, en améliorant nettement l’expérience des visiteurs, les principes qui prévalent dans une PWA vont devenir incontournables, comme ça a été le cas par exemple pour le responsive design ou https.

Elles améliorent le confort des utilisateurs, ce qui en général augmente également la profitabilité du site pour son éditeur :

  • Plus de temps passé pour les internautes
  • Les PWAs vont clairement concurrencer un certain nombre d’applis sur les stores qui se contentent de reprendre les fonctions d’un site web responsive en y ajoutant ces avantages jusqu’ici disponible uniquement pour les techno natives.
  • Plus de visites
  • Meilleur taux de conversion

PWA ou Appli native ?

La SEO d’un site web est toujours un solide levier d’acquisition, tandis que les applications s’attachent plus à la fidélisation, en particulier dans le domaine de l’e-commerce ou l’édito. Or la trajectoire d’un internaute redirigé depuis le site web vers l’application dédiée subit beaucoup de frictions.

  • Cliquer sur le lien plus ou moins bien mis en valeur sur le site vers l’appli
  • Être redirigé sur le store
  • Perdre un peu de temps à lire les commentaires sur l’application
  • De plus en plus rarement, mais encore parfois : payer pour installer
  • Se souvenir de son mot de passe sur le store
  • Attendre longtemps, ou trouver du wifi

Et si on n’a pas de chance :

  • Se rendre compte qu’on doit faire de la place sur le téléphone
  • Se rendre compte qu’on doit upgrader son OS pour pouvoir installer l’app
  • Maudire le fabriquant Android qui ne s’est pas donné la peine de proposer des mises à jour et abandonner…

Pour résumer, si j’installe une application via le store, ça a intérêt à valoir le coup ! Car si elle n’est pas au niveau ou si mon usage n’est pas régulier, elle fera partie de la prochaine charrette quand je ferai de la place.

Ces frictions se ressentent moins dans une PWA, puisqu’on reste dans la sphère web. Et comme la PWA se charge progressivement, elle est rapidement opérationnelle même dans des zones avec un mauvais réseau.

Les PWAs impactent donc les technologies natives, qui vont devoir mettre leur puissance au service d’expériences vraiment supérieures à celles du web. C’est une bonne chose : en adressant avec des technologies web les problématiques standards sur tous les supports, on sauve du budget pour produire des apps vraiment différenciantes. A noter également, le code d’une PWA n’a rien à voir avec celui d’une app native, donc si on vise le natif, la PWA ne sera pas la V1 à moindre coût. Il y a d’ailleurs de beaux sujets à développer autour de la simplification de l’onboarding d’une PWA vers une app native (ne pas demander à nouveau l’authentification, récupérer les données hors lignes…)

La question n’est donc pas de choisir si on fait l’un ou l’autre, mais de choisir la plateforme qui impactera le plus les objectifs qu’on se fixe.

Et les applis hybrides web ? Et React Native ? Et CodenameOne ? Et Xamarin ? Et…

Une application hybride web, c’est une application codée avec les standards web (JavaScript, CSS, HTML), et encapsulée dans un conteneur compilé pour iOS ou Android, afin de la rendre disponible pour les stores (voir : Apache Cordova, Ionic). Cette couche d’encapsulation permet au code JavaScript d’accéder à des fonctionnalités du smartphone comme les notifs push ou la sauvegarde en base locale pour le fonctionnement hors ligne. Comme n’importe quelle application, elle a droit à une icône sur l’écran d’accueil. Ca vous rappelle quelque chose ?

Les PWA, via les API HTML5 toujours plus riches (geoloc, camera, service workers…) vont clairement mettre un gros coup de frein à ceux qui ont choisi l’hybride pour-être-sur-les-stores-à-moitié-prix.

Car à performance égale sur une grande partie des fonctionnalités (techno web pour les deux), une PWA épargnera à ses développeurs la phase de compilation multiplateforme, de soumission et de vérification sur les stores, et par la suite la pénible mise à jour des apps. Une PWA est donc moins chère qu’une appli hybride, et est suffisante dans beaucoup de cas. La réflexion hybride / natif reste par contre valable dès qu’on a besoin de fonctions avancées du device, avec un avantage pour les hybrides sur le coût du développement (attention toutefois à ne pas négliger les spécificités de design qui doivent respecter les codes de chaque plateforme) et un avantage pour le natif sur la perf et les fonctions les plus poussées ou spécifiques à une plateforme (FaceId, 3d temps réel, calculs lourds).

Notons que dès la sortie de l’iPhone3 en 2008, de nombreux frameworks alternatifs ont challengé le natif. Avec beaucoup de créativité, mais des issues plutôt aléatoires, et beaucoup de trous dans la raquette. Parmi eux, React Native, l’un des plus aboutis suscite beaucoup d’enthousiasme. Pour info voici un bon retour d’expérience sur React Native, Xamarin et Flutter. Par rapport à eux, la PWA, loin d’être parfaite, a l’avantage d’être un standard. Ce qui explique aussi qu’elle arrive tardivement dans la compétition, car il a fallu mettre tout le monde d’accord.

Pas de magie pour autant

Première limite, la taille du stockage local selon chaque navigateur :

Chrome <6% of free space
Firefox <10% of free space
Safari <50MB
IE10 <250MB

(plus de détails ici)

Une fois le quota atteint, le stockage gère l’espace en supprimant les assets les moins cruciaux et en essayant de garder ceux que l’appli aura indiqués en “persistant”. Il n’empêche qu’avec ces limites, difficile d’imaginer dans une PWA le stockage local pour usage hors ligne de musique ou de vidéo comme le font les applis Spotify ou Netflix. De plus Safari semble introduire une notion de péremption automatique au bout de quelques semaines, ce qui n’est pas dans l’esprit de la PWA.

Deuxième limite, ça se passe toujours dans un navigateur

Les API web progressent, il n’empêche que ça reste un cran en dessous des possibilités natives ou hybrides (Geofencing, 3d…). La performance sera plus faible pour une PWA. L’écart peut être insignifiant pour une application basique, mais attention à l’impact négatif d’animations ou de transitions saccadées sur le ressenti de l’utilisateur. Inutile d’attendre Fortnite en PWA…

Inutile également d’imaginer faire une PWA pas chère pour commencer et vouloir l’étendre par la suite dans une V2 native : il faudra tout reprendre.

Côté sécurité, le fonctionnement interne d’une PWA est plus facilement analysable que celui d’une App fermée, l’API du back end doit donc être particulièrement soignée.

So ?

Côté technos, c’est au point. L’implémentation est assez simple en JavaScript, et tous les frameworks front (Angular, React, VueJS, Polymer) proposent des déclinaisons adaptées. Le site https://hnpwa.com/ regorge de mises en oeuvre toutes plus performantes les unes que les autres. Par ailleurs, les possibilités offertes par l’isomorphisme de ces frameworks garantit le SEO.

Côté navigateurs, on y presque, même si l’ambition dictée il y a 10 ans par Steve Jobs sur l’évolution des standards web  peine à s’appliquer chez Apple. Safari est devenu le nouvel Internet Explorer et pénalise 17% d’utilisateurs en France.

D’ici quelques semaines, la nouvelle version de Safari lèvera le dernier frein à l’adoption massive des PWAs.

A noter, si Apple est à la traîne pour implémenter une techno qui concurrence son Store, on constate que Google est pour beaucoup dans l’avènement des PWAs : premier à développer l’API en 2015 pour Chrome, Google est aussi à l’origine d’outils de debug comme Lighthouse et du support des service workers dans sa dernière version d’Angular, le tout couplé à une communication orientée développeur très performante avec un imposant portail de ressource et de promotion. Si on y ajoute leur nouvelle politique d’intégration de la publicité plus respectueuse, on pourrait en conclure que c’est une conviction qui sert bien AdWords… Ce qui serait très réducteur, car cette étape est surtout un jalon de plus dans la montée en puissance des standards web dont profitent les utilisateurs et les éditeurs.

Ce type de dispositif va trouver sa place dans l’éventails des nouveaux canaux à exploiter, entre les assistants vocaux, la pléthore de réseaux sociaux, montres, objets et même chaussures(!) connectés et qui serviront la vision des éditeurs.

Besoin d'aide pour vous y retrouver ?

Contactez nous !
logo business unit

FABERNOVEL CODE

Nous réalisons des plateformes Internet en un temps record, en mêlant talents et méthodologies agiles.

logo business unit

FABERNOVEL TECHNOLOGIES

150 talents pour répondre aux défis technologiques de la transformation digitale.

à lire