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 Crear app de React de forma predeterminada.

Houssein Djirdeh

Nota: Si aún no comprendes la idea básica de los service workers y el almacenamiento previo en caché, primero lee la guía Almacenamiento previo en caché con la Caja de trabajo.

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

¿Por qué es útil?

Los service workers 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 el navegador puede recuperarlas del service worker, en lugar de enviar solicitudes a la red. Esto da como resultado que la página se cargue más rápido en visitas repetidas, así como en la mostrar contenido cuando el usuario está sin conexión.

Cuadro de trabajo en CRA

Workbox es un conjunto de herramientas que te permiten crear y mantener servicios trabajadores. En los CRA, los 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é elementos se almacenan en caché, haz lo siguiente:

• Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona 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, en la columna Size, se muestra un mensaje (from ServiceWorker) para indicar que se recuperaron estos recursos del service worker.

Dado que el service worker almacena en caché todos los recursos estáticos, intenta usar la aplicación en línea:

1. En la pestaña Red de Herramientas para desarrolladores, habilita la casilla de verificación Sin conexión para 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 conexión.

Modifica las estrategias de almacenamiento en caché

La estrategia predeterminada de almacenamiento previo en caché que usa Workbox en CRA es cache-first, donde 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. Esta es cómo el contenido se puede seguir entregando a los usuarios, incluso cuando están en sin conexión.

Aunque Workbox ofrece asistencia para definir diferentes estrategias y enfoques para almacenar en caché recursos estáticos y dinámicos, la configuración predeterminada en CRA no puede modificarse o sobrescribirse, a menos que lo expulses por completo. Sin embargo, hay una propuesta abierta para explorar cómo agregar compatibilidad con un archivo workbox.config.js externo. Esta permitiría a los desarrolladores anular la configuración predeterminada con solo crear un solo archivo workbox.config.js.

Nota: Para obtener más detalles sobre todas las estrategias de almacenamiento en caché que puede usar un service worker, consulta la Guía de soluciones sin conexión.

Controla una estrategia en la que se prioriza la caché

Depender de la caché del service worker primero y, luego, recurrir 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, hay algunas cosas que deben debe tenerse en cuenta:

• ¿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 consultando? contenido almacenado en caché?

La CRA documentación explica estos puntos, entre otros, en detalle.

Conclusión

Usa un service worker para almacenar en caché por adelantado los recursos importantes de tu aplicación proporcionar una experiencia más rápida a los usuarios y soporte sin conexión.

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