Comment une page marche-t-elle hors ligne ?
Un service worker est un script que le navigateur garde en arrière-plan et qui répond aux requêtes d'une page. Il peut les servir depuis une copie enregistrée dans un cache, donc la page s'ouvre même sans réseau.
Cette leçon explique son cycle de vie, les stratégies de cache et ce qui peut le faire échouer.
À la fin de cette leçon
Remarque
Je peux expliquer comment une page marche hors ligne.
Mots clés
| Mot | Ce que ça veut dire |
|---|---|
| Service worker | un script que le navigateur garde et qui répond aux requêtes de la page |
| Cache | un stock de copies de fichiers enregistrées sur l'appareil |
| Requête | la demande d'un fichier faite par la page |
| Stratégie de cache | la règle qui dit d'où vient la réponse : cache ou réseau |
| Installation | l'étape où le service worker enregistre ses premiers fichiers |
| Adresse sécurisée | une adresse en https, que les navigateurs exigent pour un service worker |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Le service worker s'intercale avant le réseau
Sans service worker, chaque requête de la page part vers le réseau. Avec un service worker, la requête lui arrive d'abord. Il choisit de répondre avec une copie du cache ou de demander au réseau.
Sans réseau, c'est la copie qui répond.
Un service worker court, ligne par ligne
// Les fichiers gardés au moment de l'installation.
const CACHE = "carnet-v1";
const FICHIERS = ["/", "/style.css", "/app.js"];
self.addEventListener("install", (evenement) => {
evenement.waitUntil(
caches.open(CACHE).then((cache) => cache.addAll(FICHIERS))
);
});
// Chaque requête passe par ici : la copie d'abord, le réseau sinon.
self.addEventListener("fetch", (evenement) => {
evenement.respondWith(
caches.match(evenement.request).then((copie) => copie || fetch(evenement.request))
);
});Exemple : les trois stratégies de cache
| Stratégie | Ordre | Bon choix pour |
|---|---|---|
| Cache d'abord | la copie, puis le réseau si elle manque | les styles, les scripts et les images, qui changent peu |
| Réseau d'abord | le réseau, puis la copie s'il échoue | les pages et les données, qu'on veut à jour |
| Réseau seul | le réseau, sans copie | les envois de formulaire et les paiements |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Vérifier le service worker de l'application
Le service worker de l'application du laboratoire garde huit fichiers à l'installation. Un script lit sa liste et contrôle que chaque fichier existe.
Ses mots sont en anglais : exists veut dire le fichier existe, MISSING il manque. Le Run doit montrer le cache habits-v1, huit fichiers, sept qui existent et un absent.
Contrôler les fichiers à garder
docker exec jupyter python3 steps/offline.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Un seul fichier absent fait échouer l'installation
L'instruction addAll enregistre toute la liste en une fois. Si un seul fichier ne peut pas être récupéré, elle échoue en bloc et le service worker ne s'installe pas.
Une liste de fichiers doit donc toujours être contrôlée : un fichier oublié ou mal orthographié coûte tout le mode hors ligne.
Un service worker exige une adresse sécurisée
Les navigateurs n'acceptent un service worker que sur une adresse sécurisée, en https, ou sur l'adresse locale de la machine. Sur l'aperçu du laboratoire, un navigateur peut le refuser.
Sur une adresse sécurisée, les outils de développement listent le service worker, souvent dans un onglet nommé Application. Ils montrent aussi le cache, et une option permet de simuler l'absence de réseau.
Une erreur fréquente
Attention
Beaucoup pensent qu'il suffit de modifier un fichier pour que tout le monde voie le changement. Faux : avec le cache d'abord, la personne reçoit l'ancienne copie. On change le nom du cache, par exemple de carnet-v1 à carnet-v2, pour que l'ancienne copie soit remplacée.