Chez Agaetis nous pensons que les PW A sont une alternative performante à une partie des applications natives. Ce sont des programmes que l’on peut installer sur un ordinateur, un smartphone, aussi appelés client lourd (ex : Word ou WhatsApp). 

Pourquoi une alternative ? Elles ne demandent pas de processus d’installation, de mises à jour manuelles et fonctionnent sur tous les appareils quel que soit le système d’exploitation. 

Notre site web est désormais une « Progressive web App » (PWA), un cas concret parfait pour expliquer la technique et détailler les avantages et inconvénients.

Qu’est-ce qu’une Progressive Web App ?

Le terme PWA désigne un concept ou une norme d’applications web, poussé par Google. À l’origine, la légende dit que Steve Jobs est le premier à en avoir eu l’idée peu après l’apparition de l’IPhone en 2007. Mais c’est bien un concept poussé par Google de nos jours avant tout, à travers Chrome (en réalité Chromium et tous ses dérivés évidemment). Le concept est encore très récent mais se développe de plus en plus, Firefox et Safari implémentent d’ailleurs les mêmes fonctionnalités pour suivre.

Des PWA de sites connus ? Twitter, Spotify, Instagram ou encore Pinterest. Chacun de ces sites  a communiqué une amélioration des taux de conversion suite à l’implémentation . Pourquoi ? Parce qu’une PWA c’est avant tout un cache sur l’appareil de l’utilisateur, il y a donc un gain de performances. Mais c’est aussi bien plus que cela !

Une PWA, c’est un site web installable qui peut fonctionner en hors ligne

Concrètement, on installe la PWA sur un PC ou un smartphone et elle peut fonctionner hors ligne. Préalablement il faut accéder au site pour qu’il soit mis en cache, ce n’est pas magique !

N’étant pas réellement installée, la PWA prend moins d’espace pour son fonctionnement et s’exécute plus rapidement. On ajoute une simple icône qui permet de pointer vers la web app. Elle donne l’impression d’utiliser une application native alors qu’elle fonctionne à travers le navigateur. La PWA n’a pas besoin d’être téléchargée ou maintenue à jour.

Un site qui implémente la norme PWA a l’autre particularité de pouvoir accéder aux commandes « natives » de nos systèmes d’exploitation, comme la  caméra sur smartphone, le Bluetooth, ou encore les notifications . Il est nécessaire de donner l’autorisation au préalable tout comme une application native.

N’importe quel site ou application Web peut être converti en PWA : un WordPress, une application React ou encore un site PHP « old school » (MVC). Cet ajout est plus utile pour une application web que l’on souhaite rendre accessible sur mobile, plutôt que pour un site vitrine. On note tout de même un gain de performance important sur les pages déjà parcourues, plus la possibilité de pouvoir « sauvegarder » un article ou une offre pour y accéder en hors ligne (pour le lire dans le métro par exemple).

Exemple concret avec le site d’Agaetis

Pour mieux comprendre voici un exemple concret avec ce site, qui vient tout juste de devenir une PWA.

Première connexion sur le site : ce qu’il se passe dans les coulisses

La première fois que vous accédez au site, il est chargé normalement comme tout autre site Web. Cependant à la fin de ce chargement initial, un fichier spécial appelé « service-worker.js » va être  téléchargé et activé dans votre navigateur . C’est ce fichier qui opère la « magie » pour que les PWA soient possibles. 

Si vous rafraîchissez la page, votre navigateur va retélécharger tous les fichiers qui la composent depuis notre serveur. Cette fois-ci le service-worker enregistrera la plupart de ces fichiers dans votre navigateur. Nous gardons toujours la main sur la configuration et ce qu’il doit enregistrer de façon transparente et invisible pour vous. 

C’est là qu’il va devenir utile, si vous rafraîchissez la page encore une fois, les fichiers du site seront servis depuis le service-worker et non plus depuis le serveur. Vous permettant ainsi de gagner toute la latence induite par une requête sur Internet. Pour un seul fichier le résultat peut sembler maigre, mais si votre navigateur a besoin de 10 fichiers interdépendants, ou plus comme ici, vous gagnez rapidement 1 seconde sur le chargement de la page ! C’est à partir de là que le mode hors ligne est rendu possible.

À noter qu’en parallèle, le service-worker va effectuer les vraies requêtes sur notre serveur pour récupérer d’éventuels changements de contenu et au cas échéant, mettre à jour son cache. Vous aurez ainsi accès aux nouveautés au prochain rafraîchissement (ou lorsque vous réaccéderez aux pages correspondantes). Si le site en lui-même est modifié il vous affichera un message vous informant qu’une mise à jour est disponible.

Chaque page que vous parcourez au préalable est mise en cache et accessible en hors ligne

Maintenant que les fichiers sont mis en cache, si vous perdez la connexion, la page sera toujours accessible même si vous la rafraîchissez ou si vous avez fermé l’onglet et le rouvrez. Vous pouvez essayer vous-même en déconnectant volontairement votre ordinateur/smartphone (mode avion par exemple). Si vous avez parcouru plusieurs pages du site ainsi que la page d’accueil, vous pourrez faire de même hors connexion, y compris en ayant éteint votre appareil entre temps !

Vous pouvez utiliser cette fonctionnalité à votre avantage en parcourant les pages ou articles que vous souhaitez lire plus tard. Chargez juste leur page et ils seront accessibles en hors ligne. 

Le cache a néanmoins une limite de taille : s’il manque une page c’est que vous en avez parcouru beaucoup et que celle-ci a été écrasée. Il y a également une limite de temps de 30 jours, au-delà les enregistrements sont supprimés.

N’hésitez pas à « l’installer » sur votre appareil !

Les PWA sont donc installables, c’est ce qui les distingue des sit es utilisant les service-worker seuls. Sur Chrome et ses dérivés sur PC (Opéra, Brave, Edge, etc…), une petite icône est présente à cet effet, à droite de la barre d’url. Il suffit de cliquer dessus pour voir le site avec une icône séparée sur la barre des tâches : 

Ici, le petit plus à côté de l'étoile

Pour la désinstaller il suffit d’aller dans les paramètres de cette fenêtre, vous ne pouvez pas le faire depuis Windows (pour l’instant en tout cas).

Sur mobile ou d’autres navigateurs comme Firefox, cherchez dans le menu quelque chose comme « Ajouter à l’écran d’accueil » ou « installer l’application » et vous aurez le même rendu.

Pourquoi les « Progressives Web Apps » sont probablement une bonne alternative aux applications natives ?

Cette partie est plus subjective, nous pensons que les PWA ont beaucoup de potentiel pour simplifier le développement d’applications multiplateformes. Voici notre point de vue sur les PWA face aux clients lourds sous la forme avantages/inconvénients.

Avantages des PWA face aux applications natives

• Le défaut principal des applications natives : elles demandent à être téléchargées et installées. Or la capacité de stockage peut être rapidement limitée, surtout sur smartphone… les Messengers qui font 500Mo, non merci ! Le problème ne se pose pas avec les PWA bien conçues. On parle d’une réduction de taille d’un rapport de 1 à 20 ou 25 en moyenne.
• De la même manière les clients lourds demandent à être mis à jour manuellement (et jusqu’à peu sur Android il était nécessaire de retélécharger l’entièreté de l’application à chaque fois), c’est laborieux et ça consomme de la data, encore une fois gênant, surtout sur mobile ! Vous l’aurez compris les PWA sont majoritairement orientées mobile first. En parallèle ce système de mise à jour peut gêner les développements, les utilisateurs choisissant de garder une ancienne version (problématiques de rétrocompatibilité).
• Les applications natives posent de nombreux problèmes pour les développeurs et/ou les entreprises qui les créent, puisqu’il faut quasiment les développer en autant de fois qu’il y a de systèmes d’exploitation (Android, iOS, Windows, Mac, ChromeOS, etc…). C’est ici le gros avantage du Web sur le reste, au niveau technique, d’autant plus que la tendance est au remplacement justement à cause de ces contraintes économiques.

Quelques inconvénients des PWA

• Les PWA peuvent fonctionner en hors ligne mais restent plutôt orientées sur un mode connecté (cette innovation vient du Web, ce n’est pas pour rien). Il faut s’y être connecté au moins une fois pour que le mode hors-ligne fonctionne. Cela peut être une limite à l’installation depuis un « store », mais il faut également être connecté pour télécharger une application donc en soi rien de vraiment problématique. En revanche, d’un point de vue développeur il faut posséder un serveur pour la rendre accessible, alors qu’une application mobile n’a pas cette contrainte.
• Elles ne sont pas encore entièrement implémentées comme il faut d’un point de vue des API natives (les accès hardware), surtout sur les navigateurs autres que Chrome et ses dérivés. Pour l’instant, il est encore un peu risqué pour une entreprise de se lancer sur une PWA en souhaitant toutes les fonctionnalités d’une application native. Mais dans un futur assez proche cela ne devrait plus être le cas et le problème ne se pose que si l’on souhaite faire appel à des fonctionnalités spécifiques (téléphonie, NFC notamment). Il faut garder en tête que cette technologie est encore en partie expérimentale. Dans notre cas, il nous a fallu participer à la librairie  next-pwa  pour l’implémenter.
• Côté performances, il est évident que rien ne vaut une application native. Mais rares sont les cas d’usage sur mobile qui requièrent autant de performances au point que ça pose un réel problème.

En conclusion

Depuis quelques années, on a constaté l’apparition d’outils éditeurs de texte en ligne, à travers Google drive d’abord, puis avec la suite Office, elle aussi entièrement disponible en ligne (à travers Office 365). En plus d’être accessibles très rapidement sans demander d’installation spécifique, ils sont gratuits et déjà en train de tuer la suite office classique. Chez Agaetis tout passe maintenant par ces outils sur le Web ! Signe de plus que les PWA sont des concurrents sérieux aux applications natives, notamment grâce au fonctionnement hors-ligne, maintenant possible.

Dernier argument en leur faveur, depuis mai 2019 environ, il est possible d’ajouter une PWA sur le Google Store après quelques manipulations assez simples, d’ailleurs  Google priorise les PWA sur ChromeOS face aux applications Android depuis quelque temps.  De même sur l’Apple Store (après des manipulations un peu plus complexes) et c’est sur le Store Microsoft depuis quelque temps déjà (pour Windows 10). Et d’ailleurs depuis le début de cette année, Bing, le moteur de recherche de Microsoft, indexe tout seul les PWA pour pouvoir les ajouter automatiquement dans leur store dans un futur proche. Que demander de plus ?

Alors qu’en pensez-vous ? N’hésitez pas à nous donner votre avis !