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 brindar soporte sin conexión. Workbox facilita este proceso y se incluye en Create React App de forma predeterminada.

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

Solicitudes o respuestas con service worker

¿Por qué es útil?

Los trabajadores de servicio 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 trabajador de servicio en lugar de realizar solicitudes a la red. Esto genera cargas de páginas más rápidas en las visitas repetidas, así como la posibilidad 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 trabajadores de servicio. En CRA, el workbox-webpack-plugin ya se incluye en la compilación de producción y solo se debe habilitar en el archivo src/index.js para registrar un nuevo trabajador de servicio 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 trabajador de servicio habilitado a través de este archivo:

Para ver qué elementos se almacenan en caché, haz lo siguiente:

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.
  • Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir 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 mientras no tengas conexión:

  1. En la pestaña Red de DevTools, 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 la CRA es priorizar la caché: se recuperan todos los elementos estáticos 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, el contenido se puede seguir entregando a 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 la 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 a los desarrolladores anular la configuración predeterminada con solo crear un solo archivo workbox.config.js.

Cómo controlar una estrategia en la que se prioriza la caché

Depender primero del almacenamiento en caché del service worker y, luego, recurrir a la red es una excelente manera de compilar sitios que se carguen más rápido en 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 trabajador de servicio?
  • ¿Debería haber un mensaje para los usuarios que les informe que están mirando el contenido almacenado en caché?

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

Conclusión

Usa un trabajador de servicio para almacenar en caché previamente recursos importantes en tu aplicación y brindar una experiencia más rápida a los usuarios, así como compatibilidad 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. Consulta cuándo la CRA admitirá un archivo de anulación workbox.config.js en este problema de GitHub.