Progressive Web Apps (PWA)
Este artículo es una explicación conceptual sobre Progressive Web Apps, incluyendo preguntas de examen y etiquetas.
En resumen
Las PWA son aplicaciones web que se comportan como apps nativas, con funcionalidad offline, instalación y notificaciones push.
Descripción técnica concisa
Las Progressive Web Apps combinan la apertura de la web con características de las aplicaciones nativas. Se ejecutan en el navegador, pero pueden instalarse en la pantalla de inicio, funcionan sin conexión gracias a los Service Workers y ofrecen notificaciones push, caché y sincronización de datos. Requisitos previos: diseño responsivo, HTTPS, Web App Manifest y Service Worker. Las PWA usan APIs web modernas para proporcionar un comportamiento similar al de una app, independiente de la plataforma.
Puntos clave para el examen
- PWA = app web con funciones nativas
- Requiere HTTPS, Service Worker, Web App Manifest
- Capacidad offline mediante caché (Cache API)
- No necesita publicación en tienda de apps
- Puede instalarse como icono en la pantalla de inicio
- Los Service Workers pueden presentar riesgos de seguridad
- Reduce costos de desarrollo separado para iOS y Android
- Los requisitos técnicos y datos del Manifest deben documentarse
Componentes clave
- HTML, CSS, JavaScript
- Service Worker (procesos en segundo plano)
- Web App Manifest (archivo .webmanifest)
- Estrategias de caché (Network First, Cache First)
- Diseño responsivo
- Obligatoriedad de HTTPS
- Push Notifications
- Sincronización en segundo plano
- Capacidad de instalación (Add to Homescreen)
- Principio de Progressive Enhancement
Ejemplo práctico
// manifest.json
{
"name": "Meine PWA",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{ "src": "icon.png", "sizes": "192x192", "type": "image/png" }
]
}Explicación: Este Manifest permite que la PWA aparezca como una app nativa en el dispositivo, con su propio icono y comportamiento de inicio.
Ventajas e inconvenientes
Ventajas
- Independiente de la plataforma
- Funciona sin conexión
- Sin necesidad de tienda de apps
- Ciclo de desarrollo más rápido
Inconvenientes
- Acceso limitado al hardware (Bluetooth, NFC, etc.)
- Soporte parcial en iOS
- Sin marketing en tienda (rankings, reseñas)
Preguntas típicas de examen (con respuesta breve)
- ¿Qué es una PWA? Aplicación web con funciones de app como offline, push e instalación.
- ¿Componentes técnicos? Service Worker, Web App Manifest, HTTPS.
- ¿Instalación? A través del navegador con “Añadir a la pantalla de inicio”.
- ¿Ventaja frente a apps nativas? Sin tienda necesaria, más rápida, independiente de plataforma.
- ¿Uso offline? Mediante caché a través de Service Worker y Cache API.
- ¿Web App Manifest? Archivo JSON con el nombre de la app, URL de inicio e icono.
- ¿Requisito de seguridad obligatorio? Conexión HTTPS.
- ¿Por qué es interesante económicamente? Una única base de código para varias plataformas, sin comisiones de tienda.
Continuando con el recorrido de PWA
Todos los artículos sobre PWA ya están completos. Vuelve al primer artículo: Progressive Web Apps (PWA) einfach erklärt.