Les Progressive Web Apps

# web# mobile# js
écrit par Félix Sabatié publié le jeudi 24 octobre 2019

Imaginez n’avoir à écrire qu’une base de code pour toutes les plateformes, tout en offrant toutes les fonctionnalités d’une application native ! C’est la promesse que fait la technologie des Progressive Web Apps, ou PWA.

Une Progressive Web App, qu’est-ce que c’est au juste?

Les Progressive Web Apps sont une version améliorée d’un site web qui permettent d’ajouter des fonctionnalités très pratiques, et qui peuvent même être installées par l’utilisateur localement sur sa machine ou son smartphone, comme s’il s’agissait d’une application provenant de l’app store. Voici quelques fonctionnalités proposées par les PWA :

 

 

  • L’application entière est téléchargée lors de la première ouverture, ce qui offre des temps de chargement accélérés sur l’appareil de l’utilisateur, comparé à un site web qui doit télécharger des ressources à chaque changement de page
  • L’accès aux fonctionnalités matérielles de l’appareil à l’aide du navigateur, comme la caméra, la géolocalisation ou encore le micro
  • L’affichage de notifications
  • Le fonctionnement hors ligne pour pouvoir accéder aux informations mises en cache même lorsque l’on est en panne de réseau

 


Les PWA sont écrites avec les langages classique d’un client web : HTML, CSS et Javascript. L’avantage, c’est qu’il n’y a pas besoin d’ajouter beaucoup de code pour transformer une application web classique en PWA (comme nous le verrons dans un exemple un peu plus tard). Quand l’utilisateur visite un site web compatible PWA, un message proposant d’ajouter le site sur son écran d’accueil lui est proposé, ce qui l’installera instantanément sur son appareil s’il accepte.

Le message sur firefox mobile

Le message sur firefox mobile

Les PWA sont supportées sur tous les navigateurs modernes (désolé IE) et sur Android et IOS, bien que sur ce dernier il n’est pas encore possible d’envoyer des notifications et que d’autres restrictions s’appliquent.

La version bureau de Google Chrome supporte également depuis la version 73 l’installation des PWA comme applications de bureau, ce qui offre une alternative très intéressante à Electron (qui est déjà utilisé par Slack, Discord ou encore Visual Studio Code).

De plus en plus de grands sites utilisent les PWA, comme Aliexpress, Trivago, Forbes, le Washington Post, Twitter, Telegram…

Comment fonctionne une PWA?

Une PWA est en fait tout simplement un site web local qui tourne sur une instance d’un navigateur, dont l’url et autres caractéristiques propres au navigateur sont masquées.

A la base du fonctionnement des PWA, on retrouve deux éléments : Le manifest et le service worker.

  • Le manifest est un fichier json qui contient les informations de base sur l’application, comme son nom, le chemin de son icône, la couleur de fond et du thème…
  • Le service worker est un script qui fait le lien entre l’application cliente et le serveur. Lorsque l’application veut accéder à une ressource, elle interroge le service worker, qui va alors la récupérer sur le serveur ou dans son cache selon la situation et la stratégie adoptée.

Fonctionnement global simplifié d'une PWA

 

Pour bien démarrer, je vous propose de rentrer dans le vif du sujet avec un petit tutoriel explicatif sur le paramétrage nécessaire de votre projet afin d'utiliser PWA avec Angular.

Exemple avec Angular 2+

Attention, préparez vous car la configuration n’est vraiment pas évidente avec angular. Tout d’abord, lancez la commande suivante dans un terminal à la racine du projet angular :

ng add @angular/pwa --project *nom-du-projet*

Et voilà, c’est terminé !

“Quoi, c’est tout ?”

 

Oui ! En lançant cette commande, le framework effectue les actions suivantes :

  • Ajout du package @angular/service-worker au projet
  • Activation du support du build pour le service worker dans le CLI
  • Import et enregistrement du service worker dans le module de l’application
  • Mise à jour du fichier index.html
    • Ajout d’un lien au fichier manifest.json
    • Ajout des balises meta pour la couleur du thème
  • Création des fichiers d’icônes avec plusieurs tailles
  • Création du fichier de configuration du service worker ngsw-config.json

Il ne reste plus qu’à build le projet pour voir le résultat. L’application générée par le build est désormais une PWA, mais vous ne pourrez tester cet aspect de l’application qu’à partir de la version build de l’application, et pas avec la commande ng serve. Il est donc possible d’utiliser par exemple le package npm http-server pour vérifier que tout fonctionne comme vous le souhaitez.

Service workers sur Chrome

Les Service Workers doivent être activés dans le menu développeur sur Chrome

Si l’application fait appel à un serveur externe pour récupérer des données que l’on veut mettre en cache, il faut configurer le comportement dans le fichier ngsw-config.json en ajoutant un datagroup, je ne rentrerai pas dans les détails de comment le faire mais je vous invite à aller voir la documentation sur le fichier de configuration des service workers sur angular.

Pour plus de détails sur l’implémentation des service workers sur angular, allez jeter un oeil sur la documentation. Je conseille également ce tutoriel vidéo qui montre un cas d’utilisation très simple des service workers sur angular.

Pour conclure

Les PWA permettent de créer des applications multi plateformes très rapidement et facilement, et peuvent offrir une expérience utilisateur très proche des applications natives. Cependant elles ne sont pas encore prêtes à remplacer ces dernières, elles ont encore beaucoup de restrictions sur IOS et il n’est pas non plus possible de les publier sur l’app store d’Apple.

De plus, si l’utilisateur refuse le message d’ajout du site sur son écran d’accueil, il est impossible de relancer le message depuis le code et l’utilisateur doit activement aller dans les menus du navigateur pour installer l’application s’il change d’avis. Et d’ailleurs, peu de gens sont au courant des avantages que propose cette option, et ils iront sur l’app store s’ils veulent une application.

Si la promesse de n’écrire qu’un seul code pour toutes les plateformes n’est pas encore remplie, il faut garder un oeil attentif sur la technologie des PWA qui va probablement prendre de l’ampleur dans les années à venir !

Sources

Quelques liens utiles

https://en.wikipedia.org/wiki/Progressive_web_applications

https://developers.google.com/web/progressive-web-apps/

https://angular.io/guide/service-worker-getting-started 

https://medium.com/poka-techblog/turn-your-angular-app-into-a-pwa-in-4-easy-steps-543510a9b626

https://medium.com/iquii/progressive-web-app-pwa-what-they-are-pros-and-cons-and-the-main-examples-on-the-market-318f4538c670

Quelques sites compatibles PWA : https://pwa.rocks/

Images