2018 : année des Progressive Web Apps (PWA)

Souvenez vous, il a bien longtemps, plus de 10 ans, XMLHttpRequest évoluait dans l'indifférence générale, jusqu'à ce que par la magie du verbe - ou plutôt du nom, 'AJAX' - il devienne l'acteur principal du Web 2.0. Il est en train de se passer la même chose avec le service worker et les PWA.

En août 2015, Alex Russel a nommé les applications web qui recourent à un ensemble de technologies - service workers, cache, push notification ... - des Progressive Web Apps ou PWA. Cela a eu pour effet de les rendre plus visibles et plus populaires parmi les développeurs, particulièrement depuis la rentrée de septembre 2017. Exactement comme ça été le cas il a plus 10 ans avec XMLHttpRequest et AJAX.
Autrement dit, nous sommes à l'aube d'un tournant aussi majeur que l'a été AJAX. Ce qui revient à avoir en sa possession une boule de cristale qui nous annonce que les développeuses et développeurs qui sauront transformer des applications web classiques en PWA, ou directement créer des PWA, seront recherchés en 2018.


inscrivez vous à la newsletter de meanjs.fr


Les PWA : une greffe réussi entre application web et applications natives

Les applications web possèdent l'énorme avantage d'être faciles à découvrir. Pas besoin de les faire accepter sur un store : un lien suffit pour y accéder. Les applications natives quant à elles disposent de la possibilité de pouvoir fonctionner hors ligne, d'être idéalement affichées dans sur toute la surface d'un écran plutôt que dans un navigateur, d'interagir avec le hardware d'un device (smartphone, tablette ...) et de pouvoir vous notifier lorsque qu'un événement intéressant se produit.
Les PWA sont à la croisée de ces deux mondes : toujours appli web mais en même temps appli natives. En surfant depuis un smartphone, un utilisateur découvre votre application web. A la prochaine visite, il peut accepter de l'installer comme il le ferait avec une application native, avec pour avantage de pouvoir désormais l'afficher en plein écran (plutôt que dans un navigateur) et de pouvoir y accéder via une icone de lancement, comme c'est le cas avec une application native. Il aura ainsi pu bénéficier de l'usage direct de votre application web sans avoir eu à effectuer la moindre installation ou recherche sur un store, puis améliorer son expérience en acceptant par la suite une installation rapide.

Vos applications web plus rapides

Le service worker peut jouer le rôle de proxy, en se positionnant entre le navigateur de votre visiteur et votre serveur web. Le service worker pourra ainsi mettre les pages visitées en cache afin de pouvoir les afficher plus rapidement lors de la prochaine utilisation. L'affichage des pages déjà visitées dans le passé devient quasi immédiat.

Vos applications web accessibles en mode dégradé

Vous pourrez même mettre en concurrence le cache et le réseau et décider d'afficher le contenu qui sera disponible le premier, ou si la fraîcheur de l'info est votre prioriété, mettre en oeuvre une stratégie de 'network first', où le service worker ira d'abord chercher la page sur le serveur, mais se rabattra sur le cache si le réseau est inaccessible. Ainsi, lorsque l'utilisateur est temporairement privé de connexion (dans un ascenceur ou une rame de métro) ou bien lorsque le WiFi, partagé par beaucoup d'utilisateurs, provoquera des interruptions fréquentes, le service worker pourra de nouveau servir des pages qu'il aura préalablement mises en cache car déjà visitées dans le passé.

Notifier vos utilisateurs

Le service worker pourra également écouter des notifications push, que votre application web soit ouverte ... ou pas ! La PWA d'une compagnie ferrovière peut ainsi prévenir l'utilisateur de l'entrée en gare de son train, ou bien l'informer d'un retard.

Le service worker au coeur des PWA

Vous l'aurez compris, pour devenir un maître dans l'art du développement des PWA, il faudra maîtriser le service worker, puis les API qu'il utilisera et les évenements qu'il gérera. C'est ce que vous permettre de faire notre prochaine formation : 'Les PWA par la pratique'.