Almacenamiento previo en caché en la creación de una app de React con Workbox

Almacenar recursos en caché con un service worker puede acelerar las visitas repetidas y proporcionar asistencia sin conexión. Workbox facilita este proceso y se incluye en Create React App de forma predeterminada.

Houssein Djirdeh

Workbox está integrado en Create React App (CRA) con una configuración predeterminada que almacena en caché todos los recursos estáticos de tu aplicación con cada compilación.

Solicitudes y respuestas con service worker

¿Por qué es útil?

Los service workers te permiten almacenar recursos importantes en su caché (almacenamiento previo en caché) para que, cuando un usuario cargue la página web por segunda vez, el navegador pueda recuperarlos del service worker en lugar de realizar solicitudes a la red. Esto genera cargas de página más rápidas en las visitas repetidas, así como la capacidad de mostrar contenido cuando el usuario no tiene conexión.

Workbox en CRA

Workbox es una colección de herramientas que te permiten crear y mantener service workers. En CRA, el workbox-webpack-plugin ya se incluye en la compilación de producción y solo debe habilitarse en el archivo src/index.js para registrar un nuevo service worker con cada compilación:

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();

Este es un ejemplo de una app de React compilada con CRA que tiene un service worker habilitado a través de este archivo:

Para ver qué recursos se almacenan en caché, sigue estos pasos:

  • Para obtener una vista previa del sitio, presiona View App y, luego, Fullscreen pantalla completa.
  • Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir las Herramientas para desarrolladores.
  • Haga clic en la pestaña Red.
  • Vuelve a cargar la app.

Notarás que, en lugar de mostrar el tamaño de la carga útil, la columna Size muestra un mensaje (from ServiceWorker) para indicar que estos recursos se recuperaron del service worker.

Solicitudes de red con un service worker

Como el service worker almacena en caché todos los recursos estáticos, intenta usar la aplicación sin conexión:

  1. En la pestaña Red de las Herramientas para desarrolladores, habilita la casilla de verificación Sin conexión para simular una experiencia sin conexión.
  2. Vuelve a cargar la app.

La aplicación funciona exactamente de la misma manera, incluso sin una conexión de red.

Modifica las estrategias de almacenamiento en caché

La estrategia de almacenamiento previo en caché predeterminada que usa Workbox en CRA es primero la caché, en la que todos los recursos estáticos se recuperan de la caché del service worker y, si eso falla (por ejemplo, si el recurso no se almacena en caché), se realiza la solicitud de red. De esta manera, se puede seguir publicando contenido para los usuarios, incluso cuando están completamente sin conexión.

Aunque Workbox proporciona compatibilidad para definir diferentes estrategias y enfoques para almacenar en caché recursos estáticos y dinámicos, la configuración predeterminada en CRA no se puede modificar ni reemplazar, a menos que expulses por completo. Sin embargo, hay una propuesta abierta para explorar la posibilidad de agregar compatibilidad con un archivo workbox.config.js externo. Esto permitiría que los desarrolladores anulen la configuración predeterminada con solo crear un único archivo workbox.config.js.

Cómo controlar una estrategia centrada en la caché

Confiar primero en la caché del service worker y, luego, recurrir a la red es una excelente manera de crear sitios que se carguen más rápido en las visitas posteriores y funcionen sin conexión hasta cierto punto. Sin embargo, hay algunos aspectos que se deben tener en cuenta:

  • ¿Cómo se pueden probar los comportamientos de almacenamiento en caché de un service worker?
  • ¿Debería haber un mensaje para los usuarios que les informe que están viendo contenido almacenado en caché?

En la documentación de la CRA, se explican estos puntos y mucho más en detalle.

Conclusión

Usa un service worker para almacenar en caché previa los recursos importantes de tu aplicación y, así, proporcionar una experiencia más rápida a los usuarios, además de asistencia sin conexión.

  1. Si usas CRA, habilita el service worker preconfigurado en src/index.js.
  2. Si no usas CRA para compilar una aplicación de React, incluye una de las muchas bibliotecas que proporciona Workbox, como workbox-webpack-plugin, en tu proceso de compilación.
  3. Presta atención a cuándo CRA admitirá un archivo de anulación workbox.config.js en este problema de GitHub.