Unidad 2 · Semanas 3–9
Desarrollo de aplicaciones web progresivas
El alumno integrará tecnologías web y APIs de terceros para desarrollar una PWA completa: su app de ventas, instalable y funcional offline.
Resultados de aprendizaje
- Identifica los componentes de una PWA.
- Diferencia renderizado en cliente (CSR) y en servidor (SSR).
- Aplica APIs de almacenamiento y sincronización.
- Comprende el proceso integral de desarrollo de una PWA.
Sesiones 20 h
Componentes y configuración
Manifiesto, App Shell, Service Worker, notificaciones y contenido: arquitectura interna
(Application Shell Architecture). ABP: cada equipo arma el app shell y el manifest.json
de su app de ventas, validado con PWABuilder.
Renderizado: CSR y SSR
Elementos y características del renderizado en cliente vs. servidor. Desarrollo guiado de vistas para ambos casos, y diseño de las pantallas de splash y home de la app.
Obtención y sincronización de datos
APIs de almacenamiento local (IndexedDB/localStorage), remoto y sincronización offline/online para el catálogo de productos y el carrito de ventas.
Programación de la PWA
Service Worker (generado con Workbox) y notificaciones push. Pruebas de funcionamiento offline y acceso a sensores/permisos del dispositivo (cámara, ubicación, según lo requiera la app de ventas).
Pruebas y distribución
Plan de pruebas aplicado a la PWA (Lighthouse, checklist de PWABuilder). Publicación en GitHub Pages y verificación de instalación/actualización en un dispositivo real.
Del tema del programa al paso concreto
Cómo se traduce cada exigencia oficial en una acción con el stack elegido.
| Tema oficial | Paso concreto en clase |
|---|---|
| Manifiesto / JSON manifest | Escribir manifest.json a mano y validarlo con PWABuilder. |
| Service Worker | Generar el sw.js con Workbox (workbox-cli) y probar caché offline. |
| CSR / SSR | Una vista con JS puro en el navegador (CSR) y otra servida ya renderizada desde un archivo estático (SSR simulado). |
| Almacenamiento y sincronización | localStorage/IndexedDB para el carrito, con una función de "sincronizar" cuando vuelve la conexión. |
| Notificaciones push | Notification API del navegador con permiso solicitado en la UI de la app. |
| Acceso a características del dispositivo | Geolocation API o Camera (input file capture) según el giro de la app de ventas. |
| Pruebas y distribución | Auditoría Lighthouse (PWA ≥ 90) + publicación en GitHub Pages con URL entregable. |
Evidencia final
Repositorio con la PWA
Debe incluir: splash/home, vistas CSR y SSR, datos locales/remotos/offline, notificaciones y uso de elementos del dispositivo, más un reporte de pruebas y la URL de la app publicada con una guía breve de instalación.
Ir a la guía paso a paso completa (Django SSR, CSR, Service Worker...) → · Ver la rúbrica completa (E/A/B/R/NA) en el Anexo →