PWA (Progressive Web App)

Chaque société, qu’il s’agisse d’une start-up, d’une PME ou d’un TPE, possède un site internet afin de développer son activité.
D’après des études récentes, l’utilisation de téléphone portable ou tablette pour accéder à l’internet a dépassé celle des ordinateurs. Afin de s’adapter à ces nouvelles habitudes, les sociétés ont dû développer une version mobile de leur site web et pour certaines des applications mobiles natives. Contrairement à un site web, une application mobile apporte de nouvelles fonctionnalités. Elle permet le fonctionnement en hors ligne et l’envoi de rappel (notification push). Ce qui est encore plus profitable pour le développement des activités de ces sociétés. Progressive Web App (PWA) est une solution idéale pour toutes les entreprises, nous verrons les avantages offerts par PWA.

PWA

Qu’est-ce que PWA ?

PWA a été développé par Google. C’est une application web référencée sur les moteurs de recherche et accessible sur tous les appareils à travers un navigateur. Elle peut se développer avec le langage de programmation web (HTML & CSS, JS).

PWA peut s’installer sur toutes les plateformes afin d’être utiliser comme une application native. Ce qui la rend utilisable hors-ligne et lui permet d’accéder aux caractéristiques matériels des appareils. Une application PWA peut s’installer sur l’écran de téléphone via l’Internet (adresse web). Elle est aussi installable depuis le Play Store pour les OS Android. Cependant, iOS ne permet pas de l’installer depuis son store à l’heure actuelle. Il faut passer par un navigateur. La transformation d’une application Web en PWA a également une incidence positive sur le SEO.

Qu’est-ce qu’une application native ?

Les applications natives sont des applications mobiles qui permettent d’accéder aux caractéristiques des appareils (localisation, caméra, etc.). Elles permettent d’envoyer des notifications push et sont utilisable en hors-ligne.

C’est une application téléchargeable depuis les stores (App Store ou Play Store) et adaptée à tous les besoins. Cependant, son coût de développement reste le plus élevé, car chaque système d’exploitation requiert un langage de programmation spécifique. Le système Android requiert une connaissance en langage java ou kotlin. Le système iOS requiert une connaissance en langage objective-c ou swift.

Qu’est-ce qu’une application Hybride ?

Les applications hybrides sont des applications web qu’on transforme en applications mobiles par la technologie webview. Elles possèdent toutes les fonctionnalités d’une application native et sont téléchargeables depuis le store comme les applications natives. Cependant, elles ne sont pas adaptées à tous les besoins, car la transformation d’une application web en native impactent grandement les performances de celle-ci.

Malgré une simplification du développement avec la technologie webview, permettant de simuler un navigateur à travers une application native, certaines implémentations sont nécessaires afin d’accéder à certaines fonctionnalités de l’appareil, car chaque OS a ses spécificités.

Une application hybride peut être déployée sur les différents OS avec un seul code source. Pour développer une application hybride, il faut utiliser un framework (ionic, cordova, flutter, react, etc.) qui permettra d’utiliser la technologie webview. Les applications hybrides ont plusieurs avantages :

  • Elles sont plus rapides à développer
  • Elles sont multiplateformes
  • Leur coût de développement est généralement inférieur à celui des applications natives.

Qu’est-ce qui différencie PWA de l’application Native et Hybride ?

Les applications PWA se différencient des applications natives et hybrides par leur langage de développement qui est le langage Web (HTML, CSS et JS) ainsi que par leur simplicité de développement et d’installation. L’installation d’une application PWA se fait directement depuis un navigateur. Dès qu’on se connecte sur un site internet utilisant la technologie PWA, le navigateur la reconnaît et propose d’installer l’application. Il suffit pour cela de cliquer sur “Installer”, ce qui permettra de rendre l’application disponible via une icône sur le bureau de l’ordinateur ou sur l’écran du téléphone.

Une application PWA ressemble à une application hybride à la différence qu’elle est exécutée par le navigateur, ce qui induit un gain de performance. Le développement est simple et rapide et généralement à moindre coût. Cette technologie permet entre autres de n’avoir qu’une seule application Web, disponible sur tous les supports, ce qui simplifie grandement la maintenance.

Développement de PWA :

La mise en place d’une application PWA se réalise simplement en ajoutant 2 fichiers au site web que l’on souhaite transformer en PWA :

  • Un fichier JSON (manifest.json) qui contient les méta-données liées aux installations d’applications telles que le nom, logo, etc. et qui permet de transformer en une application native. Il est possible de générer ce fichier “manifest.json” en ligne, voici quelque générateur en ligne :
  • Un fichier Service Workers (SW) : c’est un fichier javascript qui permet de gérer la communication entre le navigateur et l’application web. Il intercepte les requêtes réseaux et gère le cache afin de rendre l’application hors ligne. Elle continue à tourner même quand l’application est fermée afin de faire la synchronisation de fond. La synchronisation permet de sauvegarder les échanges lorsque le réseau est faible et d’effectuer ces échanges avec le serveur lorsque le réseau permet. SW est l’élément principal, car il permet d’envoyer des notifications push ou mettre en cache les données d’application web afin de la rendre accessible hors-ligne.

Conclusion

Pour conclure, les applications PWA sont un bon compromis entre application web et application mobile . PWA est simple de développement et de mise en place. Elle permet toutefois d’offrir aux utilisateurs des fonctionnalités comme l’installation sur l’écran d’accueil, l’accès hors ligne ou encore les notifications push permettant de donner une vraie expérience mobile aux utilisateurs.

Une application PWA est à privilégier dès lors que vous offrez à vos utilisateurs une application web, cela permettra d’accélérer le chargement initial de l’application et de profiter du contenu en hors-ligne, car celui-ci aura été téléchargé et les PWA sont aussi simples à gérer que les applications hybrides ou natives.