La mise en cache des éléments avec un service worker peut accélérer les visites répétées et fournir une assistance hors connexion. Workbox facilite cette opération et est inclus par défaut dans "Créer une application React".
Workbox est intégré à la création d'application React (CRA) avec une configuration par défaut qui 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 son cache (pré-mise en cache). Ainsi, lorsqu'un utilisateur charge la page Web pour une deuxième fois, le navigateur peut les récupérer auprès du service worker au lieu d'envoyer des requêtes au réseau. Les pages se chargent plus rapidement lors de visites répétées, et l'utilisateur peut afficher du contenu hors connexion.
Boîte de travail dans CRA
Workbox est un ensemble d'outils qui vous permet de créer et de gérer des service workers. Dans CRA, le workbox-webpack-plugin est déjà inclus dans le build 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 éléments sont mis en cache:
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur 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'indiquer 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:
- Dans l'onglet Réseau des outils de développement, cochez la case Hors connexion pour simuler une expérience hors connexion.
- 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 cache par défaut utilisée par Workbox dans l'ARC est le cache-first. Tous les éléments statiques sont extraits du cache du service worker et, en cas d'échec (par exemple, si la ressource n'est pas mise en cache), la requête réseau est effectuée. Le contenu peut ainsi toujours être diffusé auprès des utilisateurs, même lorsqu'ils sont complètement hors connexion.
Bien que Workbox permet de définir différentes stratégies et approches de mise en cache des ressources statiques et dynamiques, la configuration par défaut de l'objet CRA ne peut pas être modifiée ni remplacée, sauf si vous l'excluez complètement. Cependant, il existe une proposition ouverte pour envisager d'ajouter la prise en charge d'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.
Gérer une stratégie axée sur le cache
S'appuyer d'abord sur le cache du service worker, puis en revenant au réseau est un excellent moyen de créer des sites qui se chargent plus rapidement lors des visites suivantes et qui fonctionnent dans une certaine mesure hors connexion. Toutefois, vous devez tenir compte de certains éléments:
- Comment tester les comportements de mise en cache par un service worker ?
- Les utilisateurs doivent-ils recevoir un message les informant qu'ils consultent du contenu mis en cache ?
La documentation de l'ARC explique entre autres ces points en détail.
Conclusion
Utilisez un service worker pour mettre en cache les ressources importantes de votre application afin d'offrir une expérience plus rapide à vos utilisateurs et une assistance hors connexion.
- Si vous utilisez l'ARA, activez le service worker préconfiguré dans
src/index.js. - Si vous n'utilisez pas CRA pour compiler une application React, incluez l'une des nombreuses bibliothèques fournies par Workbox, telles que
workbox-webpack-plugin, dans votre processus de compilation. - Pour savoir quand l'ARC prendra en charge un fichier de remplacement
workbox.config.js, consultez ce problème GitHub.