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 lo hace fácil y se incluye en Crear app de React de forma predeterminada.

Houssein Djirdeh

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

¿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 desde el service worker en lugar de enviar solicitudes a la red. Esto hace que las páginas se carguen más rápido en visitas repetidas, además de la capacidad de mostrar contenido cuando el usuario no tiene conexión.

Caja de trabajo en CRA

Workbox es una colección de herramientas que te permiten crear y mantener trabajadores de servicio. En CRA, workbox-webpack-plugin ya está incluido 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:

Sigue estos pasos para ver qué elementos se almacenan en caché:

• Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
• Presiona "Control + Mayús + J" (o bien "Comando + Opción + 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 el service worker recuperó estos recursos.

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

1. En la pestaña Red de 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 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 la de priorizar la caché, en la que todos los elementos estáticos se recuperan de la caché del service worker. Si esto falla (por ejemplo, si el recurso no está almacenado en caché), se realiza la solicitud de red. De esta manera, se puede entregar contenido a los usuarios, incluso cuando están completamente sin conexión.

Aunque Workbox brinda compatibilidad con la definición de 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 cómo agregar compatibilidad con un archivo workbox.config.js externo. Esto permitiría a los desarrolladores anular la configuración predeterminada con solo crear un único archivo workbox.config.js.

Controla una estrategia en la que se priorice la caché

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

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

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

Conclusión

Usa un service worker para almacenar en caché recursos importantes de tu aplicación con el objetivo de brindar una experiencia más rápida a los usuarios y obtener 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. Ten en cuenta cuándo CRA admitirá un archivo de anulación workbox.config.js en este problema de GitHub.