Progressive Web Apps : passer hors connexion

1. Bienvenue

Dans cet atelier, vous allez prendre une application Web existante et la rendre utilisable hors connexion. Il s'agit du premier d'une série d'ateliers de programmation complémentaires pour l'atelier sur les progressive web apps. Cette série comporte sept autres ateliers de programmation.

Points abordés

• Écrire un service worker à la main
• Ajouter un service worker à une application Web existante
• Utiliser le service worker et l'API Cache Storage pour rendre les ressources disponibles hors connexion

À savoir

• HTML et JavaScript de base

Ce dont vous avez besoin

• Un navigateur compatible avec les service workers

2. Préparer l'atelier

Commencez par cloner ou télécharger le code de démarrage nécessaire pour effectuer cet atelier de programmation :

Cloner le dépôt

Télécharger le fichier ZIP

Si vous clonez le dépôt, assurez-vous d'être dans la branche starter. Le fichier ZIP contient également le code de cette branche.

Ce code de base nécessite Node.js 14 ou version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier du code afin d'installer toutes les dépendances dont vous aurez besoin. Ensuite, exécutez npm start pour démarrer le serveur de développement de l'atelier de programmation.

Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. De plus, voici les principaux fichiers existants que vous utiliserez tout au long de cet atelier de programmation :

Fichiers clés

• js/main.js : fichier JavaScript de l'application principale
• service-worker.js : fichier du service worker de l'application

3. Tester hors connexion

Avant d'apporter des modifications, testons l'application Web pour montrer qu'elle ne fonctionne pas actuellement hors connexion. Pour ce faire, mettez votre ordinateur hors connexion et rechargez l'application Web, ou, si vous utilisez Chrome :

1. Ouvrez les outils pour les développeurs Chrome.
2. Passez à l'onglet "Application".
3. Accédez à la section "Service Workers".
4. Cochez la case "Hors connexion".
5. Actualiser la page sans fermer les outils pour les développeurs Chrome

Maintenant que le site a été testé et que le chargement hors connexion a échoué, il est temps d'ajouter des fonctionnalités en ligne. Décochez la case "Hors connexion" et passez à l'étape suivante.

4. Intégrez votre contenu d'autres plates-formes.

Il est temps d'ajouter un service worker de base. Cette opération se déroule en deux étapes : l'enregistrement du service worker et la mise en cache des ressources.

Enregistrer un service worker

Il existe déjà un fichier de service worker vide. Pour que les modifications s'affichent, enregistrons-le dans notre application. Pour ce faire, ajoutez le code suivant en haut de js/main.js :

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

import.meta est une méthode normalisée permettant de récupérer des métadonnées spécifiques au contexte concernant un module JavaScript. env est injecté par notre outil de compilation pour nous fournir des informations sur l'environnement actuel, DEV étant une valeur booléenne indiquant si nous sommes en mode développement ou non.

Explication

Ce code enregistre le fichier de service worker service-worker.js vide une fois la page chargée, et uniquement si le site est compatible avec les service workers.

Mise en cache préalable des ressources

Pour que l'application Web fonctionne hors connexion, le navigateur doit être en mesure de répondre aux requêtes réseau et de choisir où les acheminer. Pour ce faire, ajoutez les éléments suivants à service-worker.js

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

Revenez ensuite au navigateur, fermez l'onglet d'aperçu, puis rouvrez-le. Vous devriez voir des console.log correspondant aux différents événements du service worker.

Si les événements console.log ne s'affichent pas, vérifiez la zone "Service Worker" de l'onglet "Applications" pour vous assurer qu'il n'y a pas d'erreur avec votre service worker et qu'il n'est pas en état d'attente.

Ensuite, repassez hors connexion et actualisez le site. Vous devriez voir qu'il se charge même si vous êtes hors connexion.

Explication

Lors de l'événement d'installation du service worker, un cache nommé est ouvert à l'aide de l'API Cache Storage. Les fichiers et les routes spécifiés dans precacheResources sont ensuite chargés dans le cache à l'aide de la méthode cache.addAll. On parle de pré-mise en cache, car l'ensemble de fichiers est mis en cache de manière préventive lors de l'installation, au lieu d'être mis en cache lorsqu'il est nécessaire ou demandé.

Une fois que le service worker contrôle le site, les ressources demandées le traversent comme un proxy. Chaque requête déclenche un événement de récupération qui, dans ce service worker, recherche une correspondance dans le cache et, si une correspondance est trouvée, répond avec la ressource mise en cache. En l'absence de correspondance, la ressource est demandée normalement.

La mise en cache des ressources permet à l'application de fonctionner hors connexion en évitant les requêtes réseau. L'application peut désormais répondre avec un code d'état 200 en mode hors connexion.

5. Félicitations !

Vous avez appris à rendre votre application Web hors connexion à l'aide des service workers et de l'API Cache Storage.

Le prochain atelier de programmation de la série est Utiliser Workbox.