Estrategias de Service Worker
Cache-first, network-first y stale-while-revalidate: elección según el tipo de recurso
Estrategias de Service Worker es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Descripción general de las estrategias de almacenamiento en caché
Un service worker intercepta las solicitudes de red y decide si debe responder desde la caché, desde la red o desde ambas. Workbox nombra cuatro estrategias principales, cada una adecuada para un tipo de recurso distinto.
CacheFirst
CacheFirst responde desde la caché y solo accede a la red cuando no encuentra el recurso. Es ideal para recursos que cambian poco y cuyas URL incluyen un hash de contenido, como las fuentes y las imágenes.
// serve cached, fall back to network on missNetworkFirst
NetworkFirst intenta acceder primero a la red y recurre a la caché cuando no hay conexión o se agota el tiempo de espera. Es ideal para respuestas de API en las que la actualidad es importante, pero se desea disponer de acceso sin conexión.
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate devuelve inmediatamente la copia almacenada en caché para ofrecer velocidad, mientras obtiene una copia nueva en segundo plano para actualizar la caché. Es excelente para los bundles de JS y CSS.
// return cache now, update cache in backgroundNetworkOnly y CacheOnly
Son los dos extremos: NetworkOnly siempre realiza una solicitud, sin almacenar en caché, y CacheOnly solo sirve contenido precargado. Utilícelas para solicitudes POST que no se puedan almacenar en caché o para recursos estrictamente precargados.
El array runtimeCaching
En la configuración de Workbox, runtimeCaching es un array de reglas. Cada regla coincide con las URL de las solicitudes y asigna una estrategia y un nombre de caché.
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});Una regla urlPattern
Cada regla tiene un urlPattern (una expresión regular o una función), un handler (el nombre de la estrategia) y options, como el nombre de la caché.
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}Almacenar recursos estáticos con CacheFirst
Haga coincidir las imágenes y las fuentes, y sírvalas con CacheFirst, ya que sus URL con hash de contenido cambian cuando cambia el archivo.
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}Almacenar bundles de JS con StaleWhileRevalidate
Sirva los bundles de scripts y estilos al instante desde la caché mientras los actualiza en segundo plano.
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}El plugin de expiración
Las cachés crecen sin límite si no se establecen límites. La opción expiration limita el número de entradas y su antigüedad máxima, y elimina primero las más antiguas.
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}Almacenar respuestas opacas en caché
Para las respuestas de API de origen cruzado, normalmente se añade cacheableResponse con los estados permitidos, de modo que solo se almacenen las respuestas correctas.
options: {
cacheableResponse: { statuses: [0, 200] }
}Comprobación rápida
¿Qué estrategia es más adecuada para respuestas de API que deben estar actualizadas, pero también disponibles sin conexión?
Recapitulación
Las estrategias de Workbox se corresponden con tipos de recursos: CacheFirst para recursos estáticos, NetworkFirst para respuestas de API y StaleWhileRevalidate para bundles de JS/CSS. Defínalas en el array runtimeCaching con un urlPattern, un handler y options, como el plugin expiration, para limitar el tamaño de la caché.
Preguntas frecuentes
¿La lección «Estrategias de Service Worker» es gratis?
Sí — el texto completo de «Estrategias de Service Worker» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estrategias de Service Worker»?
Cache-first, network-first y stale-while-revalidate: elección según el tipo de recurso Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 2 de 4.
¿Cuánto tiempo toma la lección «Estrategias de Service Worker»?
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 Vue Academy?
Sí. Cada lección de Vue 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
- Configuración de vite-plugin-pwa
- Estrategias de Service Worker
- Compatibilidad sin conexión y sincronización en segundo plano
- Notificaciones push en una PWA de Vue