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

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.

Houssein Djirdeh

Remarque : Si vous ne comprenez pas encore le concept de base des service workers et de la précaching, commencez par lire le guide Precaching with Workbox.

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:

1. Dans l'onglet Réseau des outils de développement, cochez la case Hors connexion pour : pour simuler une expérience hors connexion.
2. 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.

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

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.

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'un des de nombreuses bibliothèques fournies par Workbox, telles que workbox-webpack-plugin, dans votre le processus de compilation.
3. Vérifiez quand l'ARC acceptera un fichier de remplacement workbox.config.js dans cette Problème GitHub.