Definición
Una Progressive Web App (PWA) es una aplicación web que utiliza tecnologías modernas del navegador (Service Workers, Web App Manifest, Cache API y Push API) para ofrecer una experiencia de usuario comparable a la de una app nativa, pero sin necesidad de descargas desde Google Play o App Store. En el contexto del comercio electrónico hispanohablante, una PWA permite que el cliente navegue, añada productos al carrito y complete el checkout incluso con conexión intermitente o nula, y reciba notificaciones push directamente en el móvil.
A diferencia de una web responsive tradicional, una PWA se instala en la pantalla de inicio del dispositivo, se ejecuta en una ventana sin barra de navegador y aprovecha el almacenamiento local para servir contenido cacheado en milisegundos.
Analogía
Piensa en una tienda física en el centro de Madrid. Una web tradicional es como un escaparate que solo puedes ver cuando la persiana está subida (conexión activa). Una app nativa es como tener una llave de la trastienda: acceso total, pero tuviste que pedirla, esperar y ocupar espacio en tu llavero (descarga, instalación, almacenamiento).
Una PWA es como una tienda pop-up que aparece mágicamente en tu bolsillo: la primera vez que la visitas, se "instala" sola, guarda copia de los productos más vistos y te avisa por WhatsApp (push) cuando hay una oferta. No ocupa apenas espacio, no pasa por revisión de nadie y funciona aunque el WiFi del metro falle.
Fórmula técnica
La arquitectura PWA se resume en esta ecuación:
PWA = Service Worker + Web App Manifest + HTTPS + Cache Strategy + Push API
Donde cada componente cumple una función medible:
- Service Worker: script en segundo plano que intercepta peticiones de red. Reduce el Time to First Byte (TTFB) hasta un 70% en visitas recurrentes.
- Web App Manifest: archivo JSON que define icono, nombre, color de tema y modo de visualización (standalone).
- Cache Strategy: típicamente *Cache First* para assets estáticos y *Network First* para precios y stock.
- Push API: canal de notificaciones con tasas de apertura que oscilan entre el 8% y el 15% en retail, frente al 2-3% del email marketing.
Un dato clave: según Google, una PWA bien implementada puede reducir el abandono de carrito en un 23% gracias a la persistencia offline del estado del carrito.
Comparativa: PWA vs. Web responsive vs. App nativa
| Criterio | Web responsive | PWA | App nativa |
|---|---|---|---|
| Instalación | No | Sí (sin tienda) | Sí (App Store/Play) |
| Funciona offline | No | Sí (parcial/total) | Sí |
| Notificaciones push | No | Sí (Android/iOS 16.4+) | Sí |
| Tamaño en dispositivo | 0 MB | ~1-5 MB | 50-200 MB |
| Actualización | Automática | Automática | Manual (tienda) |
| Coste de desarrollo | Bajo | Medio | Alto (iOS + Android) |
| Acceso a hardware | Limitado | Medio (cámara, GPS) | Total |
| Indexable en Google | Sí | Sí | No |
| Tasa de conversión típica | 1.8% | 3.2% | 4.1% |
Aplicación en eCommerce hispanohablante
Escenarios concretos
1. Retail de moda en México: una PWA permite que clientes en zonas con conectividad 3G inestable naveguen el catálogo cacheado. Casos como Aliexpress redujeron el tiempo de carga un 82% tras migrar a PWA.
2. Supermercados en España: la lista de la compra se guarda offline y se sincroniza al recuperar cobertura. Mercadona y Carrefour han experimentado con Service Workers para repetir pedidos en dos toques.
3. Marketplaces en Argentina: las notificaciones push segmentadas por categoría recuperan carritos abandonados con tasas de reenganche del 11%.
4. D2C de cosmética en Colombia: la instalación en pantalla de inicio aumenta la recurrencia un 34% frente a usuarios que solo guardan la URL.
Métricas que debes monitorizar
- Lighthouse PWA score: objetivo > 90/100.
- Install rate: porcentaje de visitantes que aceptan instalar. Media: 5-12%.
- Offline conversion rate: pedidos completados sin conexión activa.
- Push opt-in rate: 40-60% en Android, 25-35% en iOS.
Errores comunes
1. Confundir PWA con "web rápida": sin Service Worker no hay PWA. La velocidad es consecuencia, no definición.
2. Ignorar iOS: durante años Safari limitó el push y el almacenamiento. Desde iOS 16.4 (2023) el soporte ha mejorado, pero el install prompt sigue siendo manual (Compartir → Añadir a inicio).
3. Cachear precios y stock: si sirves un precio cacheado de hace 3 días, tendrás reclamaciones. Usa *Network First* para datos transaccionales.
4. No configurar el manifest: sin display: standalone y theme_color, la app se ve como una web dentro del navegador, rompiendo la ilusión nativa.
5. Push invasivo: enviar 5 notificaciones diarias dispara la tasa de desinstalación. El benchmark saludable es 2-4 por semana.
6. Olvidar el SEO: una PWA sigue siendo indexable, pero si bloqueas el renderizado con JS pesado, pierdes posiciones. Aplica SSR o prerender.
7. Asumir que reemplaza la app nativa: para funciones como Bluetooth, NFC avanzado o widgets complejos, la app nativa sigue siendo superior.
Términos relacionados
- Service Worker: hilo independiente que gestiona caché, sincronización en segundo plano y push.
- Web App Manifest: archivo JSON con metadatos de instalación.
- Lighthouse: herramienta de auditoría de Google que puntúa PWA, rendimiento y accesibilidad.
- AMP (Accelerated Mobile Pages): tecnología complementaria para carga instantánea, aunque con menor capacidad offline.
- Headless Commerce: arquitectura de backend desacoplado que se combina habitualmente con frontends PWA.
- App Shell: modelo de diseño donde la estructura fija se cachea y solo el contenido se carga dinámicamente.
- Workbox: librería de Google para implementar estrategias de caché sin escribir Service Workers desde cero.
- TTI (Time to Interactive): métrica clave; una PWA bien optimizada alcanza TTI < 2 s en 4G.
En resumen: para un negocio DTC en mercados hispanohablantes con conectividad desigual, una PWA no es un capricho técnico: es una palanca directa sobre conversión, recurrencia y coste de adquisición. Implementada con criterio, compite con la app nativa en experiencia y la supera en accesibilidad, indexabilidad y velocidad de despliegue.