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.
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.
![Solicitudes/respuestas con service worker](https://web.dev/static/articles/precache-with-workbox-react/image/requestsresponses-servi-008f1f41abc53.png?authuser=19&hl=es)
¿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:
- 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.
- 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
.
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.
- Si usas CRA, habilita el service worker preconfigurado
src/index.js
- 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. - Presta atención a cuándo la CRA admitirá un archivo de anulación
workbox.config.js
en esta Problema de GitHub.