Le futur des applications mobiles : les Progressive Web Apps

Native app : Application créée spécifiquement pour une plateforme

Celle-ci s'installe via un store d'applications sur le mobile et profite de l'ensemble de l'accès au hardware. C'est la solution la plus complète et efficace pour créer une application de qualité, cependant les coût et la durée de développement sont importants, car il est nécessaire de développer spécifiquement pour chaque plateforme (iOS, Android, Windows…).

Hybrid app : Site internet empaqueté dans une application

Elle est le mix entre le site internet et l'application. Le temps de développement est réduit mais la résultante est que la qualité de l'application est parfois moins bonne que l'application native. L'avantage principal pour ce type d'application est de pouvoir utiliser les fonctionnalités hardware non disponibles à partir de la version mobile du site internet.

Ici, on développe d’abord son application dans un langage dédié (souvent du JavaScript comme avec Phonegap) puis une fois cette phase validée, on compile pour autant de “stores” que souhaités.

L’autre inconvénient de ce type d’applications par rapport aux versions natives et que l’on se base sur le plus petit dénominateur fonctionnel commun. A moins de multiplier les exceptions et y passer autant de temps de développement que pour une application native...

Progressive web app : L'application web présente sur un site internet

Elle représente la synthèse entre une version responsive et une application native.

Premier avantage, elle ne requiert pas d'installation puisque les fichiers nécessaires à son fonctionnement sont stockés dans le cache du navigateur et chargés depuis celui-ci pour réduire la quantité de données appelées depuis le site. Une progressive web app ressemble et se comporte de la même manière qu'une application native mais cette application est une application web.

Deuxième avantage, elle n'a pas besoin d'être publiée dans les app stores, vous optimisez l'expérience utilisateur sans imposer la démarche de téléchargement.

Qu'est-ce qu'est une progressive web app ?

Pour faire court : c'est une application web responsive, fonctionnant aussi en mode hors ligne, qui peut être accessible depuis la page d'accueil d'un smartphone sans téléchargement.

Par "installer", nous parlons d'un raccourci créé vers la progressive web app depuis la page d'accueil de votre smartphone. Lorsque l'utilisateur clique sur ce raccourci, la progressive web app va être chargée dans le navigateur en mode plein écran, de la même manière qu'une application native.

Cette application, bien qu'étant le croisement entre l'application native et une version mobile d'un site internet, n'est pas une application hybride qui, elle, est un site internet empaqueté dans une application qui doit être téléchargée depuis les app stores. La démarche est contraire à l'application hybride puisque c'est une application disposée sur un site internet et affichée directement dans le navigateur.

HTML5 et ses APIs à la rescousse

Le temps où les navigateurs internet étaient coupés du reste du système (PC, tablette, smartphone) sur lesquels ils étaient installés est révolu depuis quelques années. D’abord réservées à quelques navigateurs, les API permettant d’accéder aux ressources basses du système (fichiers, géolocalisation, capteurs) se standardisent peu à peu.

Il y aura toujours de nouvelles fonctionnalités ajoutées à nos smartphones favoris qui seront hors de portée des APIs du navigateur, mais l’écart se réduit. Les nouveautés s’intègrent peu à peu.

Si vous voulez avoir une idée de ce qu’il est aujourd’hui possible de faire, Google a un site entier rempli d’expérimentations . Au programme, 3D, musique et d’autres choses qui semblaient hors de portée du navigateur internet il y a quelques années.

Quels sont les bénéfices de l'utilisation de l'application progressive pour les utilisateurs et les développeurs ?

Pour les utilisateurs

Cela signifie qu'ils n'ont pas besoin d'installer l'application (ils se dispensent donc de toute la procédure relative à la recherche, le téléchargement et l'installation). Le fait que l'application ne soit pas installée sur l'appareil signifie également qu'elle prendra moins de place dans le terminal mobile de l'utilisateur et simplifie grandement l'installation de l'application

Pour les développeurs

Le plus grand bénéfice pour les développeurs est de pouvoir commencer à s'affranchir des app stores et de leurs contraintes. Plus de délais d'attente pour la publication de l'application, plus de délais pour les mises à jour, des règles moins contraignantes et la disparition des commissions reversées à Google ou Apple lorsque vous vendez via l'in-app purchase.

... Mais avant de trinquer, faisons un état des lieux de cette technologie.

L'état actuel des progressive web apps - Service Workers or not ? Telle est la question.

Service Workers est un script que votre navigateur exécute en arrière-plan sur votre terminal mobile. Il ouvre la porte à des fonctionnalités qui n'ont pas besoin de page web ou d'une interaction utilisateur. 

Pour le moment, les progressive web apps fonctionnent seulement sur Google Chrome sur Android. Concernant votre iPhone, il n'est pas capable de gérer les progressive web apps à cause de l'absence du support de Service Workers. La bonne nouvelle c'est que vous serez redirigé vers l'app store, la mauvaise est que tant que Service Workers ne sera pas supporté, vous resterez dans ce cas.

Les navigateurs mobile n'ont pas accès à toutes les fonctionnalités matérielles du smartphone, donc vous serez cantonné à l'application native.

Les avantages de la progressive web app :

• Possibilité de déclencher des notifications directement sur le terminal mobile de l'utilisateur.
• Une interface responsive encore mieux gérée permettant une navigation plus simple et rapide par rapport à un site internet affiché sur le smartphone de l'utilisateur.
• Une grande variété d'accès aux fonctionnalités hardware (géolocalisation, utilisation de la caméra et du microphone, vibrations, orientation d'écran, accéléromètre, gyroscope, niveau de batterie etc...).
• Une utilisation plus faible de la connexion de données permettant aux utilisateurs de se connecter à la progressive web app dans des zones avec une connexion à internet lente ou limitée.
• Accessibilité à l'application accrue grâce à l'absence de l'obligation de téléchargement ou d'achat de l'application, seule l'URL est nécessaire.
• Mise en ligne gratuites et instantanées.
• Contrairement à l'application native, elle n'est plus soumises aux règles des app stores, ce qui signifie l'ouverture à un grand nombre de thématiques.
• Plus de commission aux app stores pour chaque vente, sachant que les commissions sont égales à 30% du montant de la vente (sur Google Play et App Store).
• Aucune procédure d'approbation des app stores.
• Pas d'installation.

La progressive web app est née pour réduire les étapes conduisant à l'utilisation de l'application. En utilisant l'application native, voici les étapes que devront passer les utilisateurs :

• Cliquer sur le call to action présent sur votre site :
• Charger le store
• Cliquer sur installer
• Accepter les permissions
• Télécharger et installer
• Recherche du contenu depuis l'application
• Accès au contenu

Chaque page d'une progressive web app détient une URL, ce qui signifie que le contenu peut être partagé facilement. L'application ne peut pas faire cela, si ce n'est l'envoi du lien de la version desktop du site internet qui imposera au destinataire de recommencer le processus de téléchargement de l'application ou devra se contenter de la version mobile du site internet.

Pour nous autres Européens, il n'y a pas de problème particulier. Par contre pour les utilisateurs provenant de pays en voie de développement ayant une connexion limitée en vitesse ou quantité ne pourra pas se permettre de télécharger une application (plus ou moins 20mb).

Étude de cas : La société Konga

Prenons une étude menée par Google concernant la plateforme e-commerce Nigériane Konga. Il convient tout d'abord de préciser le contexte pour mettre en exergue les bienfaits de la progressive web app.

Les résultats

Lors de la première connexion sur le site internet, Konga a réussi à réduire la quantité de chargement de données de 92% grâce à la progressive web app par rapport à l'application native.

• 82% de données en moins ont été consommées pour atteindre la première transaction par rapport à l'application native.
• 63% de données en moins par rapport à la version mobile du site internet.
• 84% de données en moins ont été consommées pour atteindre la première transaction en comparaison avec la version web responsive du site internet.

Conclusion : La progressive web app va-t-elle tuer toutes les autres apps ?

Il serait erroné d'opposer la native app par rapport à la progressive web app, il faut garder à l'esprit que l'hybrid app est née pour rendre un site internet utilisable sur mobile en ayant les capacités d'une application native.

Disons que la progressive web app est la réponse au besoin de rendre les sites internet beaux, rapides et animés sur mobile. Les progressive web apps s'affichent comme étant l'évolution naturelle des hybrid apps et les versions responsive des sites internet.

Il y a quelques années, soit vous disposiez de moyens financiers important pour développer une application pour chaque store, soit vous étiez condamnés à être absent des terminaux mobiles.

Le web responsive a changé la donne en permettant à tout site de pouvoir s’afficher sur smartphone et tablettes. Mais pour exploiter la pleine puissance de ces nouveaux terminaux il fallait encore débourser une somme supplémentaire pour un développement natif. Ceci étant particulièrement vrai lorsqu’on souhait adopter une stratégie SoLoMo comme l’on disait à cette époque.

Cela fait déjà plusieurs mois chez bluedrop.fr que nous ne nous posons même plus la question lorsque nous répondons à un marché ou un appel d’offre : le site sera bien entendu responsive ! D’ailleurs, cette mention autrefois récurrente dans les cahiers des charges tend à passer au second plan voir carrément à disparaître car elle va désormais de soi. Il s’agit d’une bonne pratique tacite et son coût supplémentaire se marginalise via l’utilisation de framework HTML/CSS comme Foundation qui de toute façon intègrent le responsive dès le début, voir le mobile-first !

On nous demande aujourd’hui d’exposer le contenu de nos sites Drupal sous la forme d’API que consommeront d’autres applications mobiles (le plus souvent hybrides). Heureusement que notre CMS de choix est bien outillé pour cela, surtout depuis la version 8.

Nos donneurs d’ordre et nos clients ne nous parlent pas encore d’applications progressives, mais il y a fort à parier que cela va rapidement changer.

Transformer son site internet en progressive web app n’est pas encore un processus transparent. Cela demande avant tout de bien réfléchir à la stratégie à adopter. Sur un site de quelques pages, la question ne se pose pas, mais sur des sites plus conséquents on ne peut pas tout passer en cache.

Cela peut avoir en revanche tout son intérêt quand il s’agit de fournir à ses clients / usagers des informations essentielles qu’ils soient susceptibles de consulter hors ligne ou avec un réseau dégradé. Cela peut être vos informations de contacts, vos horaires, ou une procédure (tunnel de vente, demande de devis).

Dans le cas d’applications de type extranet / intranet cela peut également permettre à des commerciaux de commencer leurs saisies en toute circonstance en attendant d’avoir suffisamment de réseau pour se synchroniser avec le serveur !

Nous ne pensons pas que dans un futur immédiat, les progressive web apps remplacent à 100% les applications natives. Mais elles participent du même processus de démocratisation que les versions responsives en leurs temps. Tout le monde ne partage pas ce point de vue, mais nous croyons comme Tim Berner Lee (un des pères fondateurs du web) qu’il n’y a qu’un seul web : There is one web !

What's very important from my point of view is that there is one web … Anyone that tries to chop it into two will find that their piece looks very boring.

Le géant du web Google mobilise toutes ses forces pour promouvoir au maximum ce nouveau type d'application. De l’autre côté de la rive, Apple a introduit un système permettant à une application native de ne pas entièrement se télécharger à l'installation, mais de le faire à la demande. Une autre solution a été apportée : celle de permettre via un site internet responsive de ne charger qu'un fragment de l'application, pour le paiement par exemple.

Le mobile, comme le web est en évolution constante, donc la formule habituelle à appliquer est le fameux « wait and see ».

- Douichen Sofiane