Site PWA, Responsive, Application native. Comment choisir ?

PWA_Steve_jobs

Je me lance sur un site responsive ? Une Progressive Web App ? Une application native ?
Est ce que je dois avoir les trois ?
Est ce que je pourrais mutualiser les compétences de mes équipes techniques ?
Lequel est le moins cher ?
Voici le casse tête, du moment, pour les décideurs de solutions web.

2020 a été la plus grande année du shopping sur smartphone jamais enregistrée. 115 milliards de dollars ont notamment été dépensés dans le monde sur les plateformes de shopping en ligne dont Alibaba, et 53,2 milliards de dollars aux États-Unis (+55 % en un an).

Il est donc normal que l’un des gros challenges des e-commerçants soit le développement de l’expérience mobile de leurs internautes.

Les technologies permettant de relever ce challenge fleurissent (react js, react native, flutter, angular, vue.js…) ainsi que les terminologies et les tendances (PWA, native app, website responsive…). Il n’est pas toujours facile de faire le tri.

Dans cet article je vais m’atteler à vous présenter ces tendances afin de vous aider à faire votre choix.

Pour bien commencer, voici quelques statistiques intéressantes sur le sujet :

  • Plus de 80% des internautes utilisent des appareils mobiles pour surfer sur le Web.
  • 83% des utilisateurs mobiles s’attendent à une expérience sans faille à chaque fois qu’ils visitent un site Web avec n’importe quel appareil mobile.
  • 70% du trafic Web provient d’appareils mobiles.
  • 80% des sites Web les mieux classés d’Alexa sont adaptés aux mobiles.
  • Fin octobre 2020, la France comptait 37 millions de mobinautes chaque jour sur internet.
  • 16,3 millions de Français ont procédé à des achats en ligne à partir de leur mobile en 2019.
  • Aux USA, le volume de vente sur mobile a récemment dépassé les ventes des autres supports.

stat_ecom_mobile_usa

PWA ou Site web Responsive

Site responsive

Le terme de « Responsive Web design » a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010.

Le concept (révolutionnaire à l’époque) était de concevoir des sites webs qui s’adapteraient à l’appareil utilisé par l’internaute. Le site web devait donc pouvoir s’adapter en termes de taille et d’orientation.

Ceci a été rendu possible grâce à l’utilisation des Fluid Grids, des Flexible Images et des CSS Media Query.

De très nombreux sites sont actuellement conçus de cette manière. C’était une petite révolution car avant cela, nous devions développer et maintenir un site (et un environnement technique) différent pour chaque plateforme.

site-responsive

PWA (Progressive Web App)

En 2015, deux ingénieurs de Google (Frances Berriman et Alex Russell) proposent le terme de « progressive web apps »  pour décrire les sites Internet profitants des nouveaux avantages donnés par les navigateurs web notamment avec l’arrivée des Service workers et des fichiers manifestes.

En des termes plus simples, une « progressive web app » est un site web qui ressemble et se comporte comme une application mobile native.

Techniquement il y a deux composants qui font la différence entre une progressive web app et un site web responsive :

1, le fichier « manifest » du PWA

Ce fichier va rendre le site en PWA  Installable. Techniquement, le fichier « manifest » est un fichier JSON qui fournit les métadonnées nécessaires au processus d’installation de votre PWA.

Grace à cela il sera possible d’installer un raccourci sur l’écran d’accueil du terminal mobile (comme une application mobile). Ci-dessous deux exemples de sites connus sous PWA avec la possibilité d’ajouter l’app sur l’écran d’accueil.

progressive-web-app-pinterestPWA-twitter

2, Les services workers du PWA

Le rôle d’un service worker va être d’orchestrer et de synchroniser votre application, le réseau et votre navigateur.

Ca ne va pas vous étonner si je vous dis que, sur les mobiles, les déconnexions peuvent être fréquentes et que le débit est « variable ».

Et bien voilà, un service worker va servir à améliorer votre navigation en choisissant par exemple d’afficher du cache sous tout ou partie de la page en cours de lecture…

Ceci va amener plusieurs avantages aux PWA :

Rapidité, C’est un des gros atouts des PWA. Grâce au travail des services workers, elles sont très rapides, très fluides.

Indépendances de connexion. les services workers vont augmenter la performance et les possibilités du cache. Une fois chargées, il sera possible de consulter le site même si vous n’avez plus de réseau.

Le fichier « manifest » ainsi que les « services workers » vont également augmenter l’expérience utilisateur grâce à l’envoi de notifications « push web ».

pwa_push_web

La sécurité, est également un point fort des PWA qui doivent communiquer par HTTPS avec un certificat SSL.
Nous parlons de protocole TLS qui va permettre :

  • La confidentialité des échanges (les sessions étant chiffrées)
  • L’authentification du serveur et du client
  • L’intégrité des données échangées

Comme les sites responsives, les PWA sont Progressives, c’est à dire qu’elles s’adaptent aux différents terminaux, navigateurs, résolutions et tailles d’écrans.

Enfin, les Progressives Web App restent un site web développé avec du HTML, CSS et Javascript. Ce sont des technologies « traditionnelles ». Un site PWA sera donc beaucoup moins couteux à développer et à maintenir qu’une application native. Enfin, les mises à jour seront beaucoup plus faciles car elles ne nécessiteront pas d’examen systématique de la part de Google à Apple.

Exemples de sites en PWA

Des PWA il y en a beaucoup !! Les technologies étant très appréciées des GAFA il y en a des très grosses. Vous trouverez, juste après, quelques exemples parmi les plus connues : Uber, Twitter, Pinterest, Spotify, Starbucks…

startbuck_icon

startbuck_pwa

Comment développe-t-on des PWA?

Il y a essentiellement 2 technologies qui sont utilisées pour créer des PWA :

1, ReactJS, créé par Jordan Walke, un ingénieur au sein de la société Facebook à la fin de l’année 2011.

2, Vuejs, créé en 2014 par Evan You après avoir travaillé pour Google en tant qu’expert AngularJS..

En filagramme, vous constaterez que, derrière ces technologies, il y a tout de même une sympathique « guéguerre » de GAFA.

guerre_gafa

Sur la partie technologie il est important de modérer mes propos sur les avantages des PWA car (comme nous sommes dans une guerre de GAFA) ces avantages peuvent être différents par navigateur, support…

Ci-dessous des tableaux qui vous résumeront cela.

A la rédaction de cet article (Juin 2021) les services fichiers manifest sont couverts par 87,11% des couples navigateurs / opérating systems.

manifest_couverture

Cliquez ici pour suivre l’évolution de cette couverture.

les services workers sont eux couverts par 95,1% des couples navigateurs / opérating systems.

service_workers_couverture

Cliquez ici pour suivre l’évolution de cette couverture.

Et les Applications mobiles natives dans tout ca !

Souvent nous parlons d’applications natives à partir du moment ou vous pouvez télécharger l’application depuis les stores d’Apple ou de Google. C’est, en réalité, plus subtil que cela. Nous avons en réalité 2 types d’applications dites natives.

1, Les applications natives

Ce sont des logiciels, construits pour un système d’exploitation mobile spécifique. Le langage est donc spécifique à la plateforme (iOS ou Android par exemple).

Les langages des applications natives

Android

Les langages de programmation les plus communs sont Java, Kotlin, C et C++.

Java est le langage natif officiel d’Android, c’est le plus populaire, le mieux supporté par l’Android Studio mais aussi le plus complexe à maitriser.

Pour pallier à cette complexité, Google a introduit Koltin.

Enfin les environnements C/C++ et C# sont des alternatives compatibles avec Android Studio et le NDK Android.

Apple

Le langage d’origine est Objective-C mais il a (depuis 2014) laissé la place à Swift.

Le C# est également une alternative.

Les avantages

Les Applications natives sont conçues exclusivement pour le système d’exploitation sur lequel elles « tournent ».

Leur principal avantage est donc leur robustesse et l’accès à l’ensemble des fonctionnalités de la machine.

Elles peuvent pas exemple permettre le geofecing (ou géo repérage), fonctionnalité permettant d’envoyer des notifications à l’approche d’un point géo localisé…

Elles intègrent toutes les fonctionnalités des smartphones (caméra, géo localisation, accéléromètre…). Elles ont passé les « examens » de Google Play ou App Store, elles sont donc considérées (par le constructeur) comme conformes. Ce qui les rend très fiables et sécurisées.

Elles sont disponibles dans les magasins d’application.

Elles peuvent être utilisées en mode déconnecté.

Elles sont très performantes rendant la navigation plus fluide.

Enfin il sera possible de proposer des contenus accessibles par l’utilisateur mais non téléchargés par le téléphone. C’est le cas par exemple des webview (page web consultable depuis l’APP).

1, Les applications hybrids

Avec l’objectif de diminuer les couts de développement, les GAFA (oui encore elles) créent en 2015 (pour Facebook) React Native et en 2017 (pour Google) Flutter.

Nous allons parler là d’applications hybrids.

Si (comme les applications natives) ces applications hybrids s’installent depuis les magasins d’applications, elles ont une différence fondamentale, elles sont compatibles entre les environnements.

Donc, plus la peine de développer 2 fois la même application. L’idée est d’embarquer des technologies web dans une « coquille » vide (ce composant est appelé WebView) et de rendre cette « coquille » installable sur tous les OS.

C’est là le premier gros avantage. Le second avantage est que nous allons être sur des langages plus communs et accessibles que les langages natifs. Il sera donc beaucoup plus facile de trouver des développeurs et/ou de mutualiser des compétences existantes.

Magique me direz-vous !

Le revers de la médaille est que les applications hybrides n’offrent pas la meilleure expérience utilisateur et ne peuvent pas se vanter d’être très performantes. Dans la plupart des cas, vous ne pouvez pas utiliser toutes les fonctionnalités propres à un système d’exploitation ni créer des applications qui dépendent fortement du matériel de l’appareil.

Enfin, il faut être conscient que ces technologies ne plaisent pas réellement aux éditeurs (spécialement à Apple qui va miser sur la qualité et préférer les app native).

Il vous faudra donc passer les barrières à l’entrée positionnées par Apple. L’une de celles-ci sera (comme il est mentionné dans leurs guideline) de présenter un minimum de fonctionnalités différenciantes (par rapport à votre site web par exemple) ce ne sera pas forcément facile avec des applications hybrid qui restent limitées en fonctionnalités.

Tous ces facteurs en font une solution suffisante pour un produit à valeur minimale, mais pas pour des produits numériques à part entière.

Les choses sont cependant en constantes évolutions et amélioration. Il existe aujourd’hui de grosses APP développées grâce en hybrid.

Les plus célèbres sont :

hybrid-app-examples-gmail

Et

hybrid_app_instagram

Le « stack » technique d’Instagram est basé sur : Django-based Stack, Celery, PostgreSQL Technology, RabbitMQ, Redis, Gearman et Node Components

L’article ci-après vous en dira plus sur le sujet.

Conclusion Hybrid, PWA, Natif ?

Alors que choisir ? Et bien comme souvent dans « la tec », le choix va dépendre de votre projet.

Les utilisateurs mobiles passent 87% de leur temps dans les app contre seulement 13% sur le web (source comscore)

Comme le montre cette statistique, les app mobiles ont encore de belles années devant elles. Mais attention à la décision car les places sont chères.

  • La durée de vie d’une application e-commerce (de son installation à sa désinstallation) est de 10,8 jours c’est plus que la moyenne qui est à 5,8 jours.
  • Un utilisateur a en moyenne 100 applications sur son téléphone portable, et il en utilise généralement 30 par mois.
  • 30% des APP ne sont plus utilisées après une semaine.

Selon Apple, Seul 0,01% des applications mobiles créées trois ans auparavant sont considérées comme un succès financier.

Enfin, les visiteurs recherchent (sur les app mobiles) essentiellement de la considération, l’achat et la fidélité.

Si les sites web mobiles attirent plus de visiteurs que les app mobiles. les visiteurs passent plus de temps dans les app (source comscore)

Croissance du temps passé dans les applications d’achat 2018-2019

Avec une application native vous aurez le « must » de la technologie mais les couts de conception et de maintenance seront élevés. Comme vous l’avez vu au dessus, il y a « beaucoup d’appelés mais peu d’élus ».
Si l’installation via les stores reste, pour votre projet une priorité, et que vous n’avez pas un gros budget, l’app hybride répondra bien à cela. Il vous restera à être vigilant à bien ajouter les fonctionnalités minimales.
Enfin, la Progressive web app apparait comme une bonne alternative, elle vous permettra d’être fort sur le web et sur le mobile. Vous n’aurez (comme l’APP hybride) qu’un « site » à maintenir et arriverez à vous approcher de l’apparence d’une APP.
Cependant attention, sur ce dernier point les OS ne sont pas tous actuellement au même niveau et Apple (encore eux et malgré les mots de Steve Jobs que j’ai repris dans l’image d’introduction) mettent beaucoup moins en avant les PWA que les App natives.
Ci-dessous un graphique qui vous résume cela :
comparatif_responsive_pwa_native

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour haut de page
%d blogueurs aiment cette page :