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 atelier de programmation d'une série d'ateliers complémentaires pour l'atelier sur les applications Web progressives. 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

• 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 suivre 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 sur la branche starter. Le fichier ZIP contient également le code de cette branche.

Cette base de code 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 avec lesquels vous travaillerez 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 le mode hors connexion

Avant d'apporter des modifications, testons pour montrer que l'application Web 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. Actualisez la page sans fermer les outils pour les développeurs Chrome.

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

4. Utiliser le mode hors connexion

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 vous assurer 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 standard 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 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.

Prémettre en cache les ressources

Pour que l'application Web fonctionne hors connexion, le navigateur doit pouvoir répondre aux requêtes réseau et choisir où les acheminer. Pour ce faire, ajoutez le code suivant à 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 maintenant 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, mettez-vous à nouveau hors connexion et actualisez le site. Vous devriez constater 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 elle met en cache de manière préemptive l'ensemble des fichiers lors de l'installation, au lieu de les mettre en cache lorsqu'ils sont nécessaires ou demandés.

Une fois que le service worker contrôle le site, les ressources demandées passent par le service worker 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. S'il y en a une, il répond avec la ressource mise en cache. S'il n'y a pas 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 lorsqu'elle est hors connexion.

5. Félicitations !

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

L'atelier de programmation suivant de la série est Utiliser Workbox.