Effectuer une mise en cache dans "Créer une application React avec Workbox"

La mise en cache des éléments avec un service worker peut accélérer les visites répétées et fournir une compatibilité hors connexion. Workbox facilite cette opération et est inclus par défaut dans Create React App.

Houssein Djirdeh

Attention : Une ou plusieurs démonstrations de cette page ne fonctionnent plus, car Glitch a arrêté l'hébergement.

Remarque  : Si vous ne comprenez pas encore le concept de base des service workers et de la mise en cache préalable, lisez d'abord le guide du module workbox-precaching.

Workbox est intégré à Create React App (CRA) avec une configuration par défaut qui pré-met en cache tous les éléments statiques de votre application à chaque compilation.

En quoi est-ce utile ?

Les service workers vous permettent de stocker des ressources importantes dans leur cache (prémise en cache). Ainsi, lorsqu'un utilisateur charge la page Web une deuxième fois, le navigateur peut les récupérer à partir du service worker au lieu d'envoyer des requêtes au réseau. Cela permet d'accélérer le chargement des pages lors des visites répétées et d'afficher du contenu lorsque l'utilisateur est hors connexion.

Workbox dans CRA

Workbox est un ensemble d'outils qui vous permettent de créer et de gérer des service workers. Dans CRA, workbox-webpack-plugin est déjà inclus dans la compilation de production et ne doit être activé que dans le fichier src/index.js pour enregistrer un nouveau service worker à chaque compilation :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

Voici un exemple d'application React créée avec CRA, pour laquelle un service worker est activé via ce fichier :

Pour voir quels assets sont mis en cache :

• Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) .
• Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
• Cliquez sur l'onglet Réseau.
• Actualisez l'application.

Vous remarquerez qu'au lieu d'afficher la taille de la charge utile, la colonne Size affiche un message (from ServiceWorker) pour indiquer que ces ressources ont été récupérées auprès du service worker.

Étant donné que le service worker met en cache tous les éléments statiques, essayez d'utiliser l'application hors connexion :

1. Dans l'onglet Réseau des outils de développement, cochez la case Hors connexion pour simuler une expérience hors connexion.
2. Actualisez l'application.

L'application fonctionne exactement de la même manière, même sans connexion réseau.

Modifier les stratégies de mise en cache

La stratégie de mise en pré-cache par défaut utilisée par Workbox dans CRA est cache-first, où tous les éléments statiques sont extraits du cache du service worker. En cas d'échec (si la ressource n'est pas mise en cache, par exemple), la requête réseau est effectuée. C'est ainsi que le contenu peut toujours être diffusé auprès des utilisateurs, même lorsqu'ils sont complètement hors connexion.

Bien que Workbox permette de définir différentes stratégies et approches pour mettre en cache des ressources statiques et dynamiques, la configuration par défaut de CRA ne peut pas être modifiée ni écrasée, sauf si vous l'éjectez entièrement. Toutefois, une proposition ouverte vise à explorer l'ajout de la compatibilité avec un fichier workbox.config.js externe. Cela permettrait aux développeurs de remplacer les paramètres par défaut en créant simplement un seul fichier workbox.config.js.

Remarque  : Pour en savoir plus sur toutes les stratégies de mise en cache qu'un service worker peut utiliser, consultez le guide de la mise en cache hors connexion.

Gérer une stratégie axée sur le cache

S'appuyer d'abord sur le cache du service worker, puis se rabattre sur le réseau est un excellent moyen de créer des sites qui se chargent plus rapidement lors des visites ultérieures et qui fonctionnent hors connexion dans une certaine mesure. Toutefois, vous devez prendre en compte les points suivants :

• Comment tester les comportements de mise en cache d'un service worker ?
• Faut-il afficher un message pour informer les utilisateurs qu'ils consultent du contenu mis en cache ?

La documentation CRA explique ces points, et bien d'autres, en détail.

Conclusion

Utilisez un service worker pour pré-mettre en cache les ressources importantes de votre application afin d'offrir une expérience plus rapide à vos utilisateurs, ainsi qu'une compatibilité hors connexion.

1. Si vous utilisez CRA, activez le service worker préconfiguré dans src/index.js.
2. Si vous n'utilisez pas CRA pour créer une application React, incluez l'une des nombreuses bibliothèques fournies par Workbox, telles que workbox-webpack-plugin, dans votre processus de compilation.
3. Pour savoir quand CRA acceptera un fichier de remplacement workbox.config.js, consultez ce problème GitHub.