AppInitDev Academy · Herramientas web · Nivel intermedio

Service Worker: estrategias de caché para una PWA

Diseña experiencia sin conexión, actualizaciones y limpieza de recursos.

← Ver todos los temas

Guía formativa completa · Actualizada el 9 de noviembre de 2026

Esta unidad comprende cuatro subtemas, un ejemplo, notas de implementación, una práctica y referencias oficiales. Los ejemplos son demostraciones pedagógicas, no implementaciones auditadas de AppInitDev.

Nota editorial. Este material distingue hechos documentados, un ejemplo elaborado para aprender y recomendaciones de implementación. Las referencias numeradas llevan a las fuentes primarias; los escenarios con dominios ficticios y datos simulados no representan una auditoría en producción. Comprueba versiones, políticas, permisos y respuestas reales antes de aplicar cambios.

1. Ámbito y ciclo de vida

Un service worker controla páginas dentro de su ámbito cuando está instalado y activo. No puede transformar una web en una app offline mágica: solo responderá con recursos disponibles o estrategias definidas. Planifica instalación, activación y actualización. Verifica funcionamiento en HTTPS y navegador compatible. [1]

Ejemplo contextualizado: La portada abre sin red tras una primera visita completa y muestra un aviso si una guía no está almacenada.

Nota de estudio: antes de pasar al siguiente apartado, formula en una frase cuál es el problema que este mecanismo resuelve y en qué situación no deberías aplicarlo. Si no puedes explicarlo, contrasta el caso con la documentación enlazada.

2. Estrategias según recursos

Cache-first favorece recursos versionados; network-first es útil para información pública que cambia y puede tener respaldo. Stale-while-revalidate muestra contenido guardado y actualiza después. No uses reglas indiscriminadas para sesiones, respuestas privadas, datos personales o páginas que deban ser frescas. [1]

Ejemplo contextualizado: Los iconos versionados usan cache-first, pero la página de novedades intenta la red y ofrece copia pública anterior.

Nota de estudio: antes de pasar al siguiente apartado, formula en una frase cuál es el problema que este mecanismo resuelve y en qué situación no deberías aplicarlo. Si no puedes explicarlo, contrasta el caso con la documentación enlazada.

3. Actualización y almacenamiento

Pon nombre de versión a las cachés y borra versiones antiguas al activar una nueva. Indica a la persona que una actualización está disponible si su acción puede verse afectada. Observa límites de almacenamiento y diseña una recuperación cuando el navegador limpia los datos. [2]

Ejemplo contextualizado: Academy actualiza CSS a una versión nueva y elimina recursos obsoletos tras activación.

Nota de estudio: antes de pasar al siguiente apartado, formula en una frase cuál es el problema que este mecanismo resuelve y en qué situación no deberías aplicarlo. Si no puedes explicarlo, contrasta el caso con la documentación enlazada.

4. Pruebas de desconexión

Prueba primera visita offline, segunda visita offline, actualización del SW y eliminación de datos. Simula recursos ausentes y confirma un mensaje útil. Evita afirmar offline completo si enlaces externos y herramientas dependientes de API siguen requiriendo Internet. [2]

Ejemplo contextualizado: Abre una guía previamente leída sin red; una guía nunca visitada muestra una alternativa clara.

Nota de estudio: antes de pasar al siguiente apartado, formula en una frase cuál es el problema que este mecanismo resuelve y en qué situación no deberías aplicarlo. Si no puedes explicarlo, contrasta el caso con la documentación enlazada.

Ejemplo técnico comentado

Este fragmento resume el concepto de la unidad. Utilízalo solo como punto de partida: comprueba dependencias, sintaxis contextual y seguridad antes de incorporarlo a un proyecto real.

// Cache-first solo para assets versionados de la misma origin; validar solicitudes antes de guardar.

Laboratorio guiado y evidencias

  1. Preparar: elige una pantalla, archivo o proyecto pequeño que no contenga datos reales; anota requisitos y versión del entorno.
  2. Implementar: reproduce el ejemplo central del tema y registra cada decisión que tomaste.
  3. Probar: ejecuta un caso correcto, uno erróneo y otro límite; compara lo esperado con lo observado.
  4. Contrastar: revisa las dos fuentes numeradas y anota al menos una condición que el ejemplo simplificado omite.
  5. Entregar: genera una tabla con las entradas, capturas o logs sin datos personales, hallazgos y siguientes acciones.

Rúbrica: 25 % explicación del concepto, 25 % reproducción del caso, 25 % pruebas y límites, 25 % evidencia y referencias. Es una rúbrica educativa, no una certificación.

Preguntas para comprobar el aprendizaje

¿Por qué no basta con copiar el ejemplo y ver que funciona una vez?

Porque faltan casos de error, verificación de entorno y pruebas de los límites documentados. Una sola ejecución no demuestra compatibilidad general.

¿Cómo decidir entre dos estrategias posibles en este tema?

Explica el objetivo, compara riesgos y recursos, consulta las fuentes primarias y conserva los resultados de una prueba repetible.

Fuentes y citas numeradas

Las citas [1] y [2] apuntan a documentación primaria; los ejemplos y actividades son elaboración educativa original de Academy, no citas textuales. Consultadas el 9 de noviembre de 2026.

  1. web.dev. Aprender aplicaciones web progresivas. Fuente primaria ↗. Consultada: 9 de noviembre de 2026.
  2. MDN. Fetch API. Fuente primaria ↗. Consultada: 9 de noviembre de 2026.

Tu progreso y notas

El progreso se guarda solo en este navegador. No introduzcas datos sensibles.

Progreso pendiente de guardar.

Continúa aprendiendo

Herramientas locales · Rutas de aprendizaje · Biblioteca de fuentes