Estrategias de almacenamiento en caché
Aplique los patrones cache-first y network-first.
Estrategias de almacenamiento en caché es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Por qué son importantes las estrategias
Los distintos recursos requieren tratamientos diferentes. Un logotipo puede servirse desde la caché indefinidamente, mientras que una fuente de datos de API debe estar actualizada. Una estrategia de caché determina si se consulta primero la caché o la red, y cómo se combinan ambas.
Cache-first
Cache-first: compruebe la caché; si encuentra el recurso, devuélvalo; de lo contrario, obténgalo de la red. Es ideal para recursos estáticos que cambian poco, como fuentes, CSS e imágenes.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}Cache-first con almacenamiento en caché de respaldo
Si no encuentra el recurso en la caché, puede obtenerlo y almacenar también el resultado para que la siguiente solicitud sea rápida. Así, la caché se va llenando de forma progresiva mientras los usuarios navegan.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Network-first
Network-first: intente acceder a la red; si tiene éxito, use la respuesta y almacénela en caché; si falla (porque no hay conexión), recurra a la caché. Es la mejor opción para contenido que se actualiza con frecuencia, como las noticias o los paneles.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Stale-While-Revalidate
Stale-while-revalidate: devuelve inmediatamente la copia almacenada en caché para ofrecer rapidez, mientras obtiene una copia actualizada en segundo plano para actualizar la caché de cara a la próxima vez. Un excelente equilibrio entre rapidez y actualización.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Network-Only y Cache-Only
Dos extremos sencillos:
- Network-only: siempre obtiene los datos de la red y nunca usa la caché (por ejemplo, para balizas de analítica).
- Cache-only: solo sirve recursos precargados en la caché y nunca accede a la red (por ejemplo, para la estructura básica de una aplicación).
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);Enrutamiento por tipo de solicitud
Las aplicaciones reales eligen una estrategia para cada solicitud. Inspeccione request.url o request.destination en el controlador de fetch y enrute la solicitud según corresponda.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});Gestión de alternativas sin conexión
Cuando no se encuentra el recurso ni en la red ni en la caché, devuelva una página sin conexión o un marcador amigable en lugar de una respuesta incorrecta.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}Almacenamiento en caché solo de respuestas correctas
Evite almacenar errores en la caché. Compruebe response.ok (o el estado) antes de guardar la respuesta, para que un 404 o un 500 no contamine la caché.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;Elegir una estrategia
Adapte la estrategia al contenido:
- Recursos estáticos: cache-first
- Datos dinámicos: network-first
- Contenido mixto: stale-while-revalidate
La mayoría de las aplicaciones combinan varias estrategias mediante el enrutamiento de solicitudes.
Resumen de las estrategias
Las estrategias de almacenamiento en caché permiten que un único service worker sirva toda la aplicación de forma inteligente: recursos estáticos instantáneos, datos dinámicos actualizados y alternativas sin conexión adecuadas, todo elegido según cada solicitud.
Comprobación rápida
Compruebe su comprensión de las estrategias de almacenamiento en caché.
Resumen
Ha aprendido las estrategias de almacenamiento en caché:
- Cache-first para recursos estáticos.
- Network-first para obtener datos dinámicos actualizados.
- Stale-while-revalidate para combinar rapidez y actualización.
- Enrutar cada solicitud mediante
request.url/destination. - Almacenar en caché solo las respuestas correctas y proporcionar alternativas sin conexión.
A continuación, la sincronización en segundo plano y las actualizaciones de la caché.
Preguntas frecuentes
¿La lección «Estrategias de almacenamiento en caché» es gratis?
Sí — el texto completo de «Estrategias de almacenamiento en caché» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estrategias de almacenamiento en caché»?
Aplique los patrones cache-first y network-first. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Estrategias de almacenamiento en caché»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Registro de un Service Worker
- La API Cache
- Estrategias de almacenamiento en caché
- Sincronización y actualizaciones en segundo plano