Langage avancé Service Worker - PWA

Un service worker est un script qui joue le rôle de proxy entre le navigateur et le réseau. Le service worker intercepte donc toutes les requêtes web et choisit de laisser passer, de modifier, de mettre en cache ou d’effectuer n’importe quelle opération sur les ressources. Cela offre au développeur la maitrise du comportement du navigateur dans certaines situations.

C’est notamment indispensable pour créer des applications offline, mais pas uniquement. Voir d’autres cas d’utilisation.

Un service worker fonctionne comme les autres workers : il s’exécute dans un thread parallèle, est non bloquant et totalement asynchrone. Par conséquence, il n’a donc pas accès au DOM et aux autres interfaces du navigateur (localStorage, etc.). Il existe néanmoins une méthode de communication avec l’API postMessage

Autre contrainte, les service workers fonctionnent uniquement en HTTPS pour des raisons de sécurité.

Les service workers permettent également d’effectuer des actions en arrière-plan, comme l’envoi de notifications en Push, que le site web soit actuellement visible ou non.

Utilisation#

Un service worker doit d’abord être enregistré. En cas de succès, il passera alors par trois phases :

téléchargement du script
installation
activation

Lorsque la page est alors affichée une seconde fois (rafraichissement, nouvelle visite, etc.), c’est alors le service worker qui a la main.

Voici un exemple de service worker qui cache toutes les ressources lors de son installation (première visite), puis retourne toujours les fichiers depuis le cache lors d’une requête (le site web n’a donc plus besoin de réseau)

// register service worker
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js');
}

// sw.js

// install event
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('nom_du_cache')
      .then((cache) => {
        return cache.addAll([
          './',
          'index.html',
          'app.css',
          'app.js',
          'manifest.json'
       ]);
      })
      .then(() => {
        return self.skipWaiting();
      })
  );
});

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

Pour en savoir plus sur la politique de mise à jour

Quelques pattern de traitement de requêtes

Exercice - Service Worker#

Récupérez la page de base (HTML, CSS, images)
Installez un service worker
Premièrement, faites en sorte que cette page fonctionne en offline
- Créez un cache et stockez les ressources
- Lors de l’événement fetch, retournez les ressources du cache si existantes, sinon fetch
Vérifiez que la page fonctionne sans réseau

Le HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Oh, my lovely website</h1>
  <ul>
    <li><img src="imgs/a.jpg" alt=""></li>
    <li><img src="imgs/b.jpg" alt=""></li>
    <li><img src="imgs/c.jpg" alt=""></li>
    <li><img src="imgs/d.jpg" alt=""></li>
  </ul>
</body>
</html>

Le CSS :

html {
  background: #000;
  color: #fff;
  font: 1em sans-serif;
}
li {
  list-style-type: none;
}
ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
}

Les images :

Fake image 1 Fake image 2 Fake image 3 Fake image 4

Progressive Web Apps#

Les service workers sont à la base des Progressive Web Apps. Voir :

Pour créer une application installable, il faut également ajouter un manifest.

Dans le <head>

<link rel="manifest" href="manifest.json" />

Exemple de manifest.json

{
  "name": "Nom de l'app",
  "start_url": "./",
  "icons": [
    {
      "src": "imgs/icone.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "display": "fullscreen"
}

Pour en savoir plus: Making PWA installable

Pour tout le reste, et notamment pour la rendre disponible sur les App Stores, il est vivement conseillé d’utiliser PWA Builder

Exercice - PWA#

En partant de l’exercice Service Worker

Ajoutez un manifest.json avec les infos nécessaires
Ajoutez une icone PNG de minimum 144x144 pixels

Déploiement :

Initialisez un repo Git pour cette mini-app
Poussez sur GitHub, sur un projet en mode public, sur la branche gh-pages
Attendez quelques secondes (et vérifiez dans Settings/Pages de votre projet)
Allez sur l’URL de votre app https://votre_pseudo.github.io/votre-app depuis votre smartphone
Installez votre app !