PWA (Progressive Web App) (PWA)

Qué es una PWA

PWA (Progressive Web App) es una aplicación web que se comporta como una app nativa, con capacidades modernas: instalable en el dispositivo, funcionamiento offline, notificaciones push, acceso a APIs del sistema.

Una PWA es una web normal, escrita en HTML/CSS/JS, pero con mejoras que la hacen sentir como app.

Características clave

1. Instalable

El usuario puede “instalar” la PWA en su pantalla de inicio (móvil) o escritorio (desktop). Aparece un icono como una app real.

2. Funciona offline

Gracias a Service Worker, la PWA funciona sin conexión: muestra contenido cacheado, mantiene UI, sincroniza cuando vuelve la red.

3. Carga rápida

Service Worker cachea recursos. Segunda visita es casi instantánea.

4. Push notifications

Puede enviar notificaciones al usuario aunque la app esté cerrada (con su permiso).

5. Acceso a APIs del sistema

Geolocalización
Cámara
Almacenamiento local
Sensores (acelerómetro, etc.)

6. Responsive y mobile-first

Diseñada para funcionar en cualquier device.

7. Sin App Store

Distribución directa desde tu URL. Sin tasas Apple/Google, sin proceso de revisión.

Requisitos técnicos para ser PWA

HTTPS obligatorio
Service Worker registrado
manifest.json con metadata (nombre, icons, theme color, display mode)
Iconos en varios tamaños (192x192, 512x512 mínimo)
Responsive o adaptable

Lighthouse audita estos requisitos y puntúa si tu web cumple PWA standards.

manifest.json ejemplo

{
  "name": "IMPERO",
  "short_name": "IMPERO",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#030303",
  "theme_color": "#4285F4",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Y en HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4285F4">

PWA vs app nativa

Aspecto	PWA	App nativa
Coste desarrollo	1x	2-3x (iOS + Android)
Distribución	Tu URL	App Store + Play Store
Tasas	0	15-30% comisión Apple/Google
Actualización	Instantánea	Revisión del store (1-2 semanas)
SEO	Sí (indexable)	No
Acceso APIs del sistema	Limitado	Completo
Rendimiento	Bueno	Excelente

Cuándo usar PWA

✓ Buenos casos

Ecommerce
News / blog / magazine
Tools online
SaaS con UI rica
Aplicaciones de productividad
Cuando quieres presencia “tipo app” sin coste nativo

✗ Casos donde no es ideal

Apps con uso pesado de APIs del sistema (cámara avanzada, sensores, AR)
Juegos 3D pesados
Apps que requieren acceso a Bluetooth, USB, NFC (algunas APIs no disponibles aún en PWA)

Ejemplos famosos

Twitter Lite: PWA, mucho más ligera que la app nativa
Pinterest: PWA aumentó conversiones móviles 60%
Starbucks: PWA duplicó usuarios diarios activos
Uber: PWA para mercados emergentes
Spotify Web Player: PWA instalable

Limitaciones en iOS

Apple ha resistido las PWAs durante años. iOS las soporta pero con limitaciones:

Almacenamiento local limitado a 50 MB
Push notifications solo desde iOS 16.4 (2023)
Sin acceso a algunas APIs disponibles en Android
Apple intenta desincentivar PWAs en favor del App Store

Aun así, en 2026, las PWAs en iOS funcionan razonablemente bien.