La mise en cache des ressources avec un service worker permet d'accélérer les visites répétées et d'offrir une assistance hors connexion. Workbox facilite cette opération et est inclus par défaut dans Create React App.
Workbox est intégré à
Créez une application React (CRA) avec une configuration par défaut qui met en pré-cache tous les
des éléments statiques
dans votre application à chaque build.
En quoi est-ce utile ?
Les service workers permettent de stocker des ressources importantes dans son cache (mise en cache préalable) de sorte que lorsqu'un utilisateur charge la page Web pour la deuxième fois, la le navigateur peut les récupérer auprès du service worker au lieu d'envoyer des requêtes le réseau. Cela se traduit par un chargement plus rapide des pages lors des visites répétées ainsi que dans Possibilité d'afficher du contenu lorsque l'utilisateur est hors connexion
Boîte de travail dans l'ARC
Workbox est un ensemble d'outils permettant de créer et de gérer des services
les nœuds de calcul. 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 afin d'enregistrer un nouveau service worker à chaque
build:
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 afficher les éléments mis en cache:
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite 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'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
à partir 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 : pour simuler une expérience hors connexion.
- Actualisez l'application.
L'application fonctionne exactement de la même manière, même sans réseau d'une connexion !
Modifier les stratégies de mise en cache
La stratégie de mise en cache par défaut utilisée par Workbox dans CRA est la stratégie cache-first, où tous les éléments statiques sont extraits du cache du service worker, et en cas d'échec (si la ressource n'est pas mise en cache, par exemple), la requête réseau est effectuée. Ce est la façon dont le contenu peut toujours être présenté aux utilisateurs, même lorsqu'ils sont dans un hors connexion.
Workbox permet de définir différentes stratégies et approches,
à la mise en cache des ressources statiques et dynamiques, la configuration par défaut dans CRA ne peut pas
être modifiés ou écrasés, sauf si vous les éjectez complètement. Cependant, il existe un
ouvrir la proposition
pour découvrir comment prendre en charge un fichier workbox.config.js externe. Ce
permet aux développeurs de remplacer les paramètres par défaut en créant simplement
fichier workbox.config.js unique.
Gérer une stratégie "cache-first"
S'appuyer d'abord sur le cache du service worker, puis revenir au réseau constitue un excellent moyen de créer des sites qui se chargent plus rapidement lors des visites suivantes travailler hors connexion dans une certaine mesure. Cependant, il y a quelques choses qui doivent doivent être prises en compte:
- Comment tester les comportements de mise en cache d'un service worker ?
- Y a-t-il un message pour indiquer aux utilisateurs qu'ils consultent du contenu mis en cache ?
L'ARC documentation explique ces points, et plus encore, en détail.
Conclusion
Utiliser un service worker pour mettre en pré-cache des ressources importantes de votre application offrir une expérience plus rapide à vos utilisateurs et une assistance hors connexion.
- Si vous utilisez CRA, activez le service worker préconfiguré dans
src/index.js - Si vous n'utilisez pas CRA pour créer une application React, incluez l'un des
de nombreuses bibliothèques fournies par Workbox, telles que
workbox-webpack-plugin, dans votre le processus de compilation. - Vérifiez quand l'ARC acceptera un fichier de remplacement
workbox.config.jsdans cette Problème GitHub.