L’arrivée des smartphones et tablettes a chamboulé notre façon d’utiliser internet.
L’apparition des applis mobiles a permis (dans certains cas) d’accéder à des infos et fonctionnalités sans internet.
Depuis quelques années, ceci est également possible pour n’importe quel site internet (ou presque) grâce à ce qu’on appelle les Progressive Web Apps (PWA pour les intimes).

Une PWA, qu’est-ce-que c’est?

Avec un peu de JS et un fichier JSON, il est possible d’ajouter de nouvelles fonctionnalités à votre site web :

  • le rendre installable
  • permettre d’y accéder hors-ligne (via le cache)
  • retranscrire un ressenti proche de celui qu’on peut avoir avec une appli mobile (plein écran, splash screen, etc)
  • envoyer des notifications à l’utilisateur.

Après des débuts un peu difficiles, les PWA sont désormais accessibles sur la plupart des supports et navigateurs actuels.
On se retrouve donc avec une façon d’aborder le développement mobile moins lourde que le développement natif ou même hybride.
En bonus, le site devient plus performant après la première visite. Et les mises à jour peuvent être prises en charge via un update partiel du cache (plutôt que de re-télécharger une appli en entier). La PWA semble donc avoir un impact écologique moins conséquent que celui des applis mobiles natives ou même hybrides (allégement du cycle de développement et de maintenance, livrable plus léger et moins de téléchargements pour l’utilisateur final). Il est même possible de déposer sa PWA sur les stores Google, Apple (et Windows).
Le site PWA Stats présente plusieurs exemples de retombées positives.
PWA.rocks présente une large sélection de PWA.
Plus technique, HNPWA compare plusieurs stacks techniques pour lire HackerNews (un peu comme todoMVC).

Comme souvent, MDN vient à votre secours pour un topo plus complet. Dev.to propose aussi une intro très détaillée sur le sujet.

Construire une PWA

C’est bien beau, tout ça, mais comment mettre ça en place?
Si vous partez de rien, vous trouverez facilement des templates et boilerplates pour partir du bon pied.
Sinon, des plugins sont disponibles pour certains outils existants (Wordpress, Jekyll, etc).
Le plus simple pour comprendre comment ça marche reste de mettre soi-même cela en place. Ceci peut se faire en principalement deux étapes, sachant que vous pouvez très bien choisir de ne faire que l’une de ces étapes :

  • ressembler à une appli mobile
  • permettre un accès hors-ligne.

Ressembler à une appli mobile

Commencez déjà par vous assurer que votre site soit responsif.
Ensuite, tout ou presque se fait dans le fichier manifest.json (qu’il ne faut pas oublier de lier à votre HTML).
La doc sur MDN est là aussi bien faite.
Une fois ce fichier bien défini, vous aurez une application installable avec un splash screen à l’ouverture.
Pour vous aider dans la construction du manifest.json, un outil bien pratique existe. A ceci s’ajoutent PWA Builder dont on reparlera plus loin ainsi que divers templates et boilerplates disponibles par ailleurs.
Le seul point un peu pénible est qu’il faut obligatoirement des icônes de différentes tailles (128x128, 144x144, 152x152, 192x192, 512x512). Comme toujours, un outil en ligne permet de se faciliter la vie : Favicon generator.
Petite astuce : au cas où, il peut être bien de prévoir un bouton toujours disponible quelque part sur le site afin de procéder à l’installation.

Notifications

Pour avoir vraiment l’impression d’utiliser une appli mobile, il est aussi possible de mettre en place les notifications push.
Comme pour tout ce qui a trait aux PWA, Google est une bonne source d’info. Microsoft Edge propose aussi un tutorial très bien conçu.
A mon avis, ça reste inutilement complexe et lourd (un serveur, une BDD, des échanges de clés afin de sécuriser les échanges, etc). Même si des façons de faire plus simples existent probablement, je reste de base réfractaire à cette fonctionnalité trop souvent mal mise en place et trop intrusive. Je ne vous ferai pas ici le topo complet sur l’économie de l’attention et la nécessité de rendre nos smartphones moins “smart” mais, en résumé, limitez autant que possible les notifications que vous recevez pour soulager un peu votre cerveau.

Permettre un accès hors-ligne

C’est ici le Service Worker qui fera le gros du boulot.
L’idée est de vérifier dans le HTML que le navigateur prend en charge cette fonctionnalité puis de l’installer.

<script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
          .then(function() {
                console.log('Service Worker Registered');
          });
      }
</script>

Vous pourrez ensuite le trouver dans l’onglet Application des DevTools de votre navigateur.
Reste ensuite à renseigner le fichier sw.js dont le rôle principal dans un premier temps sera de nommer le cache utilisé, de lister les fichiers à placer dedans et de prendre en charge le remplissage du cache ainsi que la récupération de ce qui se trouve dedans.

var cacheName = 'my-page';
var filesToCache = [
  '/',
  '/index.html',
  '/styles.css'
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, { ignoreSearch: true }).then(response => {
      return response || fetch(event.request);
    })
  );
});

Rien qu’avec ça, vous installez le service worker et celui-ci se charge de gérer le cache pour vous.
Attention à bien lister tous les fichiers à placer dans le cache.
Mozilla a mis en place un site permettant de découvrir plus en détail les services workers.
Google propose via workbox plein d’outils afin de faciliter la gestion du cache.

Bonus : tester le offline

Chrome permet de tester directement le offline depuis l’onglet Network des DevTools. Il est même possible d’y tester différents types de connexions internet (car tout le monde n’a pas la chance d’avoir une connexion au top).

Gérer ses données hors-ligne

L’un des principaux obstacles que l’on rencontre rapidement avec une PWA est l’impossibilité d’accéder à une base de données.
Il existe heureusement quelques solutions au-delà du classique (mais limité) Local storage.
Ce tutoriel suit chaque étape de la construction d’une PWA utilisant IndexedDB pour stocker des données. A noter que TurtleDB repose sur le même principe mais reste plus simple d’utilisation. D’autres solutions existent mais celle-ci a particulièrement retenu mon attention.

Bonus : le mode easy

Le site PWABuilder vous accompagne pas-à-pas dans la construction de votre PWA. Il vous permet par la même occasion de compiler et d’extraire votre webapp afin qu’elle puisse être importée dans les différents stores d’applications (pour peu que vous preniez en charge la construction de l’archive via Androïd Studio ou autre).
Sinon, les DevTools de Chrome (accessible via F12) proposent une checklist dédiée dans l’onglet Audits -> Progressive Web Apps qui vous guidera pas-à-pas.

Conclusion

La PWA, désormais largement adoptée, présente une alternative très intéressante aux applis mobiles classiques. Les fonctionnalités sont nombreuses et permettent d’améliorer grandement l’expérience utilisateur. L’impact écologique est moindre, ce qui n’est pas négligeable non plus.