Estrategias de caché sin conexión: CacheFirst y NetworkFirst
Implemente Cache-First para recursos estáticos y Network-First para respuestas de API mediante la Cache API y la biblioteca Workbox.
Estrategias de caché sin conexión: CacheFirst y NetworkFirst es una lección gratuita de Frontend 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Por qué son importantes las estrategias de caché
Los service workers pueden interceptar cada fetch, pero necesita una estrategia. Cada tipo de contenido necesita reglas diferentes: un logotipo debería almacenarse en caché para siempre, una respuesta de API debería estar siempre actualizada y los artículos de noticias se benefician de Stale While Revalidate.
La Cache API
Los service workers utilizan la Cache API: un almacén de pares Request → Response con un ámbito por origen. Los datos se conservan entre sesiones.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Cache First
Compruebe primero la caché. Si encuentra el recurso, devuélvalo. Si no, recurra a la red y almacene la respuesta en caché. Ideal para: recursos estáticos, fuentes, logotipos y el app shell.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Network First
Pruebe primero la red. Si falla (sin conexión), recurra a la caché. Ideal para: llamadas a API y contenido dinámico en el que la actualidad importa más que la velocidad.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Stale While Revalidate
Devuelva la caché inmediatamente (es rápido); después, obtenga el recurso en segundo plano y actualice la caché para la próxima vez. Ideal para: avatares, artículos de noticias y datos relativamente recientes.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Network Only
Omita completamente la caché y acceda siempre a la red. Úselo para solicitudes que no se pueden almacenar en caché (endpoints de autenticación, analíticas y mutaciones).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache Only
No acceda nunca a la red: devuelva la caché o produzca un error. Resulta útil para archivos precargados en caché que no desea actualizar durante una sesión.
Estrategias de Workbox
Workbox incluye todas las estrategias como clases con nombre. Así se reduce el código repetitivo.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Expiración de la caché
Las cachés crecen indefinidamente a menos que establezca límites. Workbox proporciona ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Respuesta almacenable en caché
De forma predeterminada, los navegadores solo almacenan en caché las respuestas 200. Omita las respuestas 4xx, 5xx y opacas (cross-origin no-cors) para evitar llenar la caché de errores.
Página alternativa sin conexión
Muestre una página sin conexión amigable cuando falle una navegación: ofrece una mejor experiencia que el error predeterminado del navegador.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Elegir la estrategia adecuada
Recursos estáticos (logotipo, fuente, CSS): Cache First. Datos de API (perfil de usuario, feed): Network First. Contenido que debe estar relativamente actualizado (avatares, noticias): Stale While Revalidate. Autenticación: Network Only. Archivos estáticos preinstalados: Cache Only.
Comprobación rápida
¿Qué estrategia de caché es la mejor para un archivo CSS que cambia pocas veces, pero debe cargarse rápidamente?
Resumen: estrategias de caché
Cache First: recursos estáticos (más rápido, puede quedar obsoleto). Network First: datos de API (más actualizados, más lento). Stale While Revalidate: sirve la caché y obtiene el recurso en segundo plano. Network Only: autenticación y mutaciones. Cache Only: app shell preinstalado. Use Workbox para reducir el código repetitivo. Establezca límites de expiración. Añada una página alternativa sin conexión. Elija la estrategia según el tipo de recurso.
Preguntas frecuentes
¿La lección «Estrategias de caché sin conexión: CacheFirst y NetworkFirst» es gratis?
Sí — el texto completo de «Estrategias de caché sin conexión: CacheFirst y NetworkFirst» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estrategias de caché sin conexión: CacheFirst y NetworkFirst»?
Implemente Cache-First para recursos estáticos y Network-First para respuestas de API mediante la Cache API y la biblioteca Workbox. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 caché sin conexión: CacheFirst y NetworkFirst»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- El manifiesto de la aplicación web
- Registro y ciclo de vida de un Service Worker
- Estrategias de caché sin conexión: CacheFirst y NetworkFirst
- Notificaciones push