Desarrollo Frontend · FRO-170

PWA: aplicaciones web instalables y sin conexión

Convertir una aplicación web en instalable y operativa sin cobertura mediante service workers y caché.

Próximamente Avanzado 7 módulos · 31 clases

Formato asíncrono Desarrollo JavaScript

DESARROLLO

Lo que aprenderás

Registrar un service worker y gestionar su ciclo de vida completo: install, activate y actualización.
Implementar estrategias de caché cache-first, network-first y stale-while-revalidate según el tipo de recurso.
Redactar un manifiesto web con iconos, display, scope y pantalla de arranque para la instalación.
Almacenar y sincronizar datos locales con IndexedDB para formularios rellenados sin conexión.
Encolar peticiones fallidas y reenviarlas con Background Sync cuando vuelve la conectividad.
Diagnosticar una PWA con Lighthouse y el panel Application de las herramientas de desarrollo.

Contenido del curso

7 módulos · 31 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Qué es y qué no es una PWA 4 clases

El problema del trabajo sin cobertura
Requisitos: HTTPS, manifiesto y service worker
Entorno de trabajo y depuración
El proyecto de partida del curso

Módulo 2 · Service workers 5 clases

Registro y ámbito de actuación
Ciclo de vida: install, waiting y activate
Interceptar peticiones con el evento fetch
skipWaiting y clients.claim con cabeza
Depurar desde el panel Application

Módulo 3 · Estrategias de caché 5 clases

Cache Storage frente a la caché HTTP
Cache-first para el esqueleto de la aplicación
Network-first para datos que cambian
Stale-while-revalidate y sus compromisos
Versionado y limpieza de cachés antiguas

Módulo 4 · Datos locales 4 clases

IndexedDB: almacenes, índices y transacciones
Modelar los datos que deben sobrevivir sin red
Resolver conflictos al volver a sincronizar
Interfaz que informa del estado de sincronización

Módulo 5 · Sincronización en segundo plano 4 clases

Cola de peticiones pendientes
Background Sync y sus limitaciones reales
Reintentos, caducidad y errores permanentes
Pruebas simulando pérdida de conexión

Módulo 6 · Instalación y manifiesto 5 clases

Campos del manifiesto que importan
Iconos maskable y pantalla de arranque
Controlar el aviso de instalación
Instalación en Android, iOS y escritorio
Actualizar una versión ya instalada

Módulo 7 · Aplicación de campo completa 4 clases

Formulario de parte con adjuntos
Funcionamiento con el dispositivo sin red
Auditoría con Lighthouse y corrección
Puesta en producción y seguimiento

Requisitos

JavaScript moderno con soltura: promesas, async/await, módulos y fetch.
Haber publicado antes alguna aplicación web y entender HTTPS y cabeceras de caché.
Un navegador basado en Chromium para las herramientas de depuración de service workers.

Descripción

El personal de campo trabaja en naves, sótanos, parcelas y polígonos donde la cobertura falla. La aplicación web que funciona en la oficina se queda en blanco justo cuando hay que registrar una lectura o cerrar un parte. Este curso ataca ese escenario: una aplicación que arranca sin red, guarda lo que se introduce y lo envía sola cuando vuelve la conexión.

Se parte de una aplicación web ya existente y se le añaden las piezas una a una. Primero el service worker y el control de su ciclo de vida, después las estrategias de caché diferenciadas para el esqueleto de la aplicación y para los datos, luego el almacenamiento en IndexedDB y la cola de reenvío con Background Sync, y por último el manifiesto y el flujo de instalación en escritorio y móvil.

Al cerrar el curso la aplicación se instala como una más del sistema, funciona con el avión activado y no pierde datos. Desde aquí se abre el trabajo con notificaciones push, con la actualización controlada de versiones en producción y con la integración de estas aplicaciones en flotas de dispositivos gestionados.

¿Para quién es este curso?

Desarrolladores web que mantienen herramientas internas usadas por técnicos en campo o en planta.
Perfiles de desarrollo que quieren evitar una aplicación nativa para un caso de uso acotado.
Equipos de producto que necesitan captura de datos fiable en entornos con conectividad intermitente.