Afin de découvrir les meilleures manières de développer une Progressive Web App, rappelons déjà ce que cela représente :
Une PWA regroupe à la fois les fonctionnalités d’un site, un internet et d’une application native.
Grâce à l’amélioration des standards du web, les navigateurs supportent désormais le Service Worker et le Web App Manifest. Il est donc possible de naviguer sur un site sans internet, que l’on soit sur mobile ou sur ordinateur, comme une application. La possibilité de recevoir des notifications via le navigateur et d’ajouter le site comme une application sur l’écran d’accueil rendent maintenant les sites internet encore plus proches du comportement des applications natives.
Un inconvénient majeur pour les sites a été leur navigation plus longue en téléchargeant chaque page à la demande par rapport à l’affichage immédiat des applications natives. Maintenant que tous les fichiers peuvent être sauvegardées en amont et la navigation sans internet possible, cette différence s’est clairement effacée par la sensation réelle de rapidité.
Petit bémol : si vous voulez réaliser une application dont les performances sont accrues par les graphismes et les calculs (jeu vidéo, ..), il reste à considérer le développement natif qui sera toujours plus rapide sur l’appareil client.
Pour résumé, une PWA est un site développé par les technologies standards du web (HTML, CSS et Javascript) mais qui se comporte en tout point comme une application native.
#Les outils de développement :
Si vous choisissez de développer ou d’effectuer la transition de votre site vers une PWA, en fonction du projet voici différents outils actuellement les plus populaires :
React :
https://fr.reactjs.org/
Un framework javascript sorti et maintenu par Facebook.
Cet outil est connu pour être plus léger et plus flexible qu’Angular. Vous pourrez ajouter des fonctionnalités au fil de l’eau, et être relativement libre dans l’organisation du code, mais les contraintes de développements sont souvent favorisées dans des équipes plus grandes.
Un avantage est qu’apprendre ce framework permet de connaître également ReactNative (de Facebook) qui permet lui de créer des applications natives.
Angular :
https://angular.io/
Le framework conçu et maintenu par Google. Framework dit « lourd » au sens où il contraint assez le développement et vient avec une suite de fonctionnalités javascript dès le départ.
Avantages et inconvénients : Intérêt pour les équipes grandissantes et/ou des projets long terme car le code est tenu d’être bien organisé. L’embarquement de Typescript va aussi dans ce sens, car il va prendre plus de temps à court terme d’écrire en Typescript qu’en javascript, mais le code sera plus lisible et les erreurs seront plus faciles à détecter.
Vue.js :
https://vuejs.org/
Framework open-source fabriqué par un ancien développeur de chez Google. Ce framework est plus récent et est monté en flèche ces dernières années, due à sa dite simplicité et bonne performance. De la même manière que React, cet outil vient de manière légère et permet d’ajouter des bibliothèques javascript au fur à mesure dans votre projet.
Ionic :
https://ionicframework.com/
Un framework pour développer des applications hybrides et des PWA. Par l’intermédiaire d’une Webview, Ionic permet d’obtenir une application sur le store avec les technologies web. Il est également possible de développer des PWA avec cette plateforme qui supporte également React et Angular.
Polymer :
https://www.polymer-project.
Développée par Google, Polymer est une bibliothèque javascript pour créer des applications web. Plus proche des standards du web mais moins populaire ; il est possible de suivre l’éventuel futur du web via cette technologie qui pousse le langage existant plutôt que de se conformer à un framework.
Lighthouse :
https://developers.google.com/
Outil développé par Google afin de mesurer les différents curseurs de PWA d’un site internet. Cela peut être bien utile durant le développement des fonctionnalités PWA (test de navigation hors ligne, de performance, etc).
Bon développement !
Maxime, Développeur Full Stack@UX-Republic
