Chapitre 6 : Workbox

1. Pourquoi Workbox ?

Écrire la logique de mise en cache à la main est fastidieux et sujet aux erreurs. Workbox est un ensemble de bibliothèques de Google qui facilite la gestion du cache et du cycle de vie des SW.

2. Stratégies simplifiées

Avec Workbox, vous pouvez définir des stratégies en quelques lignes :

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';

// Cache les polices Google avec une stratégie CacheFirst
registerRoute(
  ({url}) => url.origin === 'https://fonts.googleapis.com',
  new CacheFirst({
    cacheName: 'google-fonts',
  })
);

// Utilise Stale-While-Revalidate pour vos fichiers JS/CSS
registerRoute(
  ({request}) => request.destination === 'script' || request.destination === 'style',
  new StaleWhileRevalidate()
);

3. Précaching

Workbox permet aussi de "précacher" les fichiers critiques lors de l'installation du SW pour garantir qu'ils soient disponibles hors-ligne immédiatement.