Programa ampliado · Actualización noviembre de 2026
Clase avanzada: fundamentos y aplicación real
Lee los conceptos, reproduce el ejemplo en un proyecto de prueba y después completa el laboratorio. Los fragmentos marcados como didácticos requieren adaptarse a las versiones y dependencias del proyecto.
Distinguir instalación, caché y aplicación sin conexión
Una PWA puede ofrecer instalación y una experiencia más integrada, pero cada capacidad depende del navegador y plataforma. Un service worker intercepta determinadas peticiones en su ámbito; no convierte automáticamente todo el sitio en offline. Diseña una lista precisa: recursos estáticos que sí puedes cachear, contenidos dinámicos que necesitan actualización y datos que jamás deben guardarse sin necesidad.
const CACHE = 'academy-estaticos-v1';
self.addEventListener('install', event => {
event.waitUntil(caches.open(CACHE).then(c =>
c.addAll(['/academy/', '/academy/assets/site.css'])
));
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;
// Antes de cachear cualquier respuesta, define una política por ruta.
});
Elegir una estrategia por recurso
Cache First sirve para recursos versionados que casi nunca cambian. Network First puede ayudar con páginas informativas que deben actualizarse y ofrecer copia offline, siempre con tiempos de espera razonables. Stale While Revalidate entrega una copia rápida y actualiza después, pero puede mostrar información antigua. No caches respuestas personales, paneles privados ni contenido de terceros sin considerar permisos y expiración.
Versiones, almacenamiento y limpieza
Cuando cambie CSS o JavaScript, incrementa el nombre de la caché y elimina versiones obsoletas durante activate. Considera cuotas de almacenamiento y posibilidad de eliminación por parte del navegador. Los archivos cacheados deben tener un propósito; no descargues todo un sitio por adelantado sin consentimiento si consume datos móviles.
Probar comportamiento real
Abre una página por primera vez, activa modo sin conexión en DevTools y recarga. Después edita un archivo, publícalo y confirma cuándo se actualiza la caché. Repite desde una pestaña nueva y una sesión existente. Una página «que abrió una vez» no demuestra que todos los formularios o enlaces funcionen offline.
Laboratorio guiado con evidencia
Este laboratorio es un escenario propuesto, no una afirmación sobre el código o las métricas de las aplicaciones de AppInitDev. No utilices información personal ni credenciales reales durante la práctica.
Crear un inventario de recursos cacheables
- Selecciona HTML público, CSS y JS versionado; excluye respuestas privadas.
- Configura un service worker de prueba con política explícita para cada ruta.
- Abre online, desconecta la red y comprueba qué se mantiene utilizable.
- Cambia la versión de caché y confirma que el contenido anterior se sustituye.
Entrega esperada: Matriz de rutas, estrategia y resultado de recarga offline.
Comprueba lo que entendiste
¿Un service worker vuelve offline todo el sitio?
No; solo los recursos cubiertos por sus políticas y recursos disponibles.
Autoevaluación: ¿Puedes explicar el objetivo, los datos de entrada y las condiciones de error sin copiar instrucciones? Si la respuesta es no, repite primero un caso mínimo. No confundas una herramienta que se ejecuta con una validación completa en producción.
Unidad ampliada · Subtemas y casos resueltos
Profundización temática: decisiones y criterios
Subtema 1. Caché con actualización segura
Una PWA debe diferenciar recursos estáticos reproducibles de respuestas privadas o dinámicas. Precargar una app-shell puede mejorar disponibilidad offline, pero una política cache-first sin caducidad puede mantener contenido antiguo. Diseña qué ocurre cuando el service worker actualiza y cómo se informa de errores de red. Evalúa almacenamiento disponible, permisos y limpieza. No prometas funcionamiento sin conexión si depende de fuentes externas sin caché. [1]
Subtema 2. Caso concreto explicado
Escenario de práctica: Una lección pública se abre offline tras visitarse; una página de datos personales no se cachea mediante una regla genérica.
El primer paso es describir el comportamiento esperado sin depender de una pantalla concreta. Después hay que preparar entradas controladas y registrar resultados observados. Si el resultado difiere, conviene distinguir un error de la explicación, una limitación del entorno y un defecto de implementación. El objetivo no es completar una casilla por intuición: es producir evidencia que otra persona pueda repetir. [2]
Subtema 3. Protocolo de comprobación y rúbrica
- Prepara un caso válido basado en el ejemplo y describe los prerrequisitos que necesita.
- Prueba una entrada vacía, ausente o inválida y escribe cómo debería responder el sistema.
- Repite en un segundo contexto relevante (otra pantalla, otro idioma, sin conexión o distinta versión), si corresponde a esta unidad.
- Conserva una tabla con entrada, resultado esperado, resultado observado y conclusión.
- Contrasta al menos una decisión con la documentación oficial y registra la fecha de consulta.
Subtema 4. Notas técnicas y errores que conviene evitar
Para profundizar: La primera fuente describe el mecanismo principal; la segunda amplía las condiciones o métodos de comprobación. No son certificaciones del ejemplo inventado: consulta las secciones relevantes de cada documento.
Referencias y citas de esta unidad
- web.dev. Aprender aplicaciones web progresivas. Fuente primaria ↗. Consultada: 9 de noviembre de 2026.
- MDN. Uso de archivos en aplicaciones web. Fuente primaria ↗. Consultada: 9 de noviembre de 2026.
Pregunta de reflexión: ¿qué evidencia demostraría que comprendiste este ejemplo?
Debes poder reproducir el caso, explicar el mecanismo, mostrar una prueba negativa y justificar una decisión con una fuente primaria. Si no es posible repetirlo, documenta qué información falta.
Registra tu progreso en este navegador
Esta sección almacena únicamente las casillas y tus notas mediante almacenamiento local del navegador. Puedes borrar los datos cuando quieras. No escribas contraseñas ni información confidencial.
Referencia primaria para ampliar
Consulta el alcance exacto de las APIs y políticas en su fuente oficial antes de aplicar un cambio en producción. Los ejemplos de esta página son educativos y no sustituyen una revisión de requisitos actuales.