En 2022 Twitter convirtió su versión web móvil en una Progressive Web App. El resultado: las sesiones aumentaron un 65%, los tuits enviados un 75%, la tasa de rebote bajó un 20% y el tamaño de la app se redujo un 97% frente a la app nativa de iOS. Este ejemplo muestra el potencial de las PWA, pero también que no son la solución adecuada para todo el mundo. Saber cuándo elegir una
Qué es una Progressive Web App
Una Progressive Web App es una web que usa tecnologías web modernas para ofrecer una experiencia parecida a la de una app nativa. Google acuñó el término en 2015, pero la tecnología en la que se basa ha madurado mucho desde entonces. Una PWA no es un tipo concreto de tecnología: es un conjunto de características que una aplicación web puede tener o no.
Las características fundamentales de una PWA son tres:
Service Worker: un script de JavaScript que se ejecuta en segundo plano y gestiona la caché, la sincronización en segundo plano y las notificaciones push
Web App Manifest: un archivo JSON que define el nombre, los iconos, los colores y el comportamiento de inicio de la app instalada
HTTPS: obligatorio; los Service Workers solo funcionan con conexiones seguras
PWA frente a app nativa: la comparación completa
La elección entre una PWA y una app nativa nunca es absoluta: depende del caso de uso concreto, del público objetivo, del presupuesto y de las funciones necesarias. Veamos la comparación en cada dimensión relevante.
- Coste de desarrollo: un 40-60% inferior al de las apps nativas iOS + Android
- Distribución: URL directa, sin tiendas, actualizaciones instantáneas
- Visibilidad: indexada por Google, se puede encontrar a través de la búsqueda
- Tamaño: unos pocos KB frente a decenas de MB de las apps nativas
- Acceso al hardware: limitado; cámara, GPS y acelerómetro sí; Bluetooth, NFC y sensores avanzados con limitaciones
- Rendimiento: algo inferior en operaciones intensivas
- Coste de desarrollo: más elevado; requiere dos códigos separados o un framework multiplataforma
- Distribución: App Store / Play Store, con proceso de aprobación y comisiones del 15-30%
- Visibilidad: solo en las tiendas, sin SEO
- Tamaño: normalmente 50-200+ MB
- Acceso al hardware: completo; todos los sensores y API del dispositivo
- Rendimiento: óptimo para operaciones gráficas intensivas y videojuegos
Cuándo elegir una PWA: los casos de uso ideales
Las PWA no son la solución adecuada para todos los proyectos. Estos son los casos en los que son la mejor opción.
Las PWA para e-commerce combinan la visibilidad SEO de la web con la experiencia fluida de una app. Starbucks desarrolló una PWA que funciona sin conexión (permite consultar la carta y personalizar el pedido incluso sin conexión), pesa 233 KB frente a los 148 MB de la app nativa de iOS y duplicó el número de pedidos web diarios tras su lanzamiento.
Noticias, revistas, plataformas educativas, pódcasts: cualquier aplicación en la que el contenido sea el producto principal encaja de maravilla con una PWA. The Washington Post redujo el tiempo de carga un 88% con su PWA y aumentó la retención de los lectores que llegan desde la búsqueda orgánica.
Paneles de control, CRM simplificados, herramientas de gestión de proyectos, aplicaciones de intranet: en las herramientas que se usan sobre todo en ordenadores de sobremesa o portátiles con navegadores modernos, las PWA eliminan la necesidad de instalación, simplifican el despliegue en la empresa y permiten actualizar sin interrumpir el servicio.
En los mercados en los que la conexión a internet es lenta o intermitente (y en los que el coste de los datos móviles es relevante), las PWA con funcionamiento sin conexión y tamaño reducido suelen ser superiores a las apps nativas. Uber, por ejemplo, desarrolló una PWA específicamente para estos mercados.
Cuándo NO elegir una PWA
El Service Worker: el corazón técnico de la PWA
El Service Worker es el script de JavaScript que hace posibles las funciones avanzadas de una PWA. Se ejecuta en segundo plano, separado de la página web principal, e intercepta las peticiones de red para aplicar estrategias de caché sofisticadas.
Las principales estrategias de caché que puede aplicar un Service Worker:
- Cache First: comprueba primero la caché local y después la red. Ideal para recursos estáticos (CSS, JS, imágenes) que cambian rara vez.
- Network First: intenta primero la red y usa la caché como alternativa. Ideal para contenido que debe estar siempre actualizado pero también tiene que funcionar sin conexión.
- Stale While Revalidate: sirve de inmediato desde la caché mientras la actualiza en segundo plano desde la red. Un excelente equilibrio entre velocidad y actualidad de los datos.
- Cache Only: solo desde la caché. Para recursos que nunca cambian (fuentes, iconos del sistema).
La librería Workbox de Google simplifica enormemente la implementación de los Service Workers con estrategias de caché predefinidas y API fáciles de usar. Es el estándar de facto para el desarrollo de PWA en 2026.
PWA e iOS: los límites que debes conocer
Apple ha limitado históricamente el soporte de las PWA en iOS para proteger el ecosistema de la App Store. En 2024, la presión normativa europea (la Ley de Mercados Digitales) obligó a Apple a ampliar el soporte de las PWA en iOS, pero siguen existiendo algunas limitaciones.
En iOS, las PWA instaladas en la pantalla de inicio siguen teniendo limitaciones frente a Android: el almacenamiento en caché se limita a unos pocos MB (en Android puede ser mucho mayor), las notificaciones push en iOS requieren iOS 16.4 o superior y solo funcionan en las PWA instaladas (no en las abiertas en el navegador), y algunas API web están disponibles en Chrome/Android pero no en Safari/iOS.
Si tu público objetivo usa sobre todo iPhone —lo que en Italia supone alrededor del 50-60% de los smartphones—, estas limitaciones de iOS deben tenerse en cuenta al elegir entre PWA y app nativa. Para algunos casos de uso, un enfoque híbrido (PWA + envoltorio nativo con Capacitor o Ionic) permite combinar la ventaja de un único código con la distribución en la App Store.
Cómo se desarrolla una PWA: tecnologías y frameworks
Una PWA se puede desarrollar con cualquier tecnología web moderna. Los frameworks de JavaScript más usados para las PWA en 2026 son:
El framework full-stack de React más extendido. El soporte de PWA llega con el plugin next-pwa, que integra Workbox automáticamente. Ideal para e-commerce, paneles de control y aplicaciones web complejas. Su soporte nativo de Server-Side Rendering y Static Generation mejora las Core Web Vitals.
Un framework progresivo apreciado por su curva de aprendizaje gradual. Nuxt.js (el meta-framework de Vue) incluye un módulo PWA oficial con una configuración simplificada. Muy popular en Europa y con una documentación excelente.
El framework enterprise de Google, con soporte nativo de PWA mediante @angular/pwa. Ideal para aplicaciones B2B complejas con muchas funciones y equipos de desarrollo medianos o grandes.
Métricas para evaluar una PWA: Lighthouse y Core Web Vitals
Google Lighthouse es la herramienta oficial para evaluar la calidad de una PWA. Disponible directamente en Chrome DevTools (pestaña Lighthouse), analiza la página en cuatro dimensiones: Rendimiento (Core Web Vitals), Accesibilidad, Buenas prácticas y SEO. La categoría PWA se eliminó de Lighthouse 10 como lista independiente y se integró en las demás categorías.
Una PWA bien desarrollada obtiene: Rendimiento 90+ (Core Web Vitals en verde), Accesibilidad 90+ (accesible para usuarios con discapacidad), Buenas prácticas 100 (HTTPS, sin errores en la consola, sin vulnerabilidades conocidas) y SEO 100 (metaetiquetas correctas, robots.txt, sitemap). Esta puntuación alta también es un requisito previo para una buena indexación en Google.
Instalación de la PWA: optimizar el aviso de instalación
Uno de los aspectos más infravalorados del desarrollo de PWA es la optimización del flujo de instalación. El navegador muestra automáticamente un aviso de instalación cuando la PWA cumple ciertos criterios (Web App Manifest completo, Service Worker registrado, HTTPS, que el usuario haya visitado la web al menos dos veces), pero mostrar el aviso en el momento adecuado puede marcar la diferencia entre una tasa de instalación del 2% y una del 20%.
La buena práctica es
En iOS no existe el aviso de instalación automático: el usuario tiene que encontrar por su cuenta la opción "Añadir a pantalla de inicio" en el menú Compartir de Safari. Esto significa que la educación del usuario es fundamental: un tooltip o un banner que explique el procedimiento ("Toca el botón Compartir y después 'Añadir a pantalla de inicio' para una mejor experiencia") aumenta notablemente la tasa de instalación en iPhone.
Rendimiento de la PWA: estrategias avanzadas de optimización
Una PWA lenta es una contradicción: si la experiencia no es al menos comparable a la de una app nativa en velocidad percibida, la ventaja competitiva de la PWA se reduce drásticamente. Optimizar el rendimiento no es opcional, sino fundamental.
Las estrategias de rendimiento específicas para PWA que marcan una diferencia real: arquitectura App Shell —guardar en caché la interfaz básica de la app (cabecera, navegación, diseño) por separado del contenido, de modo que la estructura visual aparezca al instante mientras carga el contenido—; CSS crítico en línea —el CSS necesario para el primer renderizado visual se inserta en línea en el HTML para eliminar peticiones de red bloqueantes—; carga diferida agresiva —imágenes, componentes y scripts no críticos se cargan solo cuando el usuario está a punto de verlos—; y precarga estratégica —Workbox puede precargar en segundo plano las páginas que el usuario probablemente visitará después, a partir de los enlaces de la página actual.
El resultado de estas optimizaciones es medible: una PWA bien optimizada en un 3G lento debe cargarse y ser interactiva en 3 segundos (First Contentful Paint por debajo de 1,8 s, Time to Interactive por debajo de 3,8 s). Estas cifras no se pueden alcanzar con una web tradicional sin optimizar, pero son el estándar de una PWA competitiva en 2026.
PWA para e-commerce: el caso de Flipkart y las lecciones aplicables
Flipkart, el mayor e-commerce de la India, fue uno de los pioneros de las PWA en 2015. Después de probar una app nativa (que los usuarios con conexiones lentas y dispositivos con poca memoria apenas descargaban), lanzó Flipkart Lite, una PWA. Los resultados: 3 veces más tiempo en la app, una tasa de reenganche un 40% más alta y un 70% de las conversiones procedentes de usuarios nuevos.
Las lecciones de Flipkart aplicables a cualquier e-commerce: la barrera para instalar una PWA es mucho menor que la de una app nativa (sin descarga desde una tienda, sin necesidad de espacio), lo que da lugar a una base de usuarios más amplia aunque menos "comprometida"; la posibilidad de navegar sin conexión por los productos ya vistos se valora especialmente en contextos de conectividad intermitente; y las notificaciones push con ofertas personalizadas tienen tasas de apertura entre 4 y 7 veces superiores a las del email marketing tradicional.
Para un e-commerce pequeño o mediano, convertir la web en PWA —añadiendo un Service Worker y un Web App Manifest y optimizando el rendimiento— puede ser una de las iniciativas técnicas con mejor retorno, sobre todo si una parte importante del tráfico llega desde el móvil con conexiones que no siempre son rápidas, como ocurre en algunas zonas.
Notificaciones push en las PWA: implementación y buenas prácticas
Las notificaciones push son una de las funciones más potentes de las Progressive Web Apps, y una de las más fáciles de usar mal. Una notificación push bien ajustada puede hacer que un usuario vuelva a la web con una tasa de clics un 400% superior a la de un email de marketing. Una notificación push agresiva o irrelevante acaba bloqueada por el usuario, que revoca el permiso, y es casi imposible recuperarlo.
La implementación técnica de las notificaciones push en una PWA requiere tres componentes: la solicitud de permiso al usuario (mediante la Notification API del navegador), un servicio que gestione las suscripciones (Push Manager API) y un backend que envíe las notificaciones mediante el protocolo Web Push. Librerías como web-push para Node.js simplifican mucho la parte del servidor.
Las reglas de oro de las notificaciones push en las PWA: pide permiso solo cuando el usuario haya mostrado un interés real (no nada más llegar a la web), explica con claridad qué recibirá antes de pedir el permiso ("Recibe novedades sobre los nuevos artículos"), personaliza las notificaciones según las preferencias o el comportamiento del usuario, limita la frecuencia (como máximo 1-2 notificaciones a la semana para un blog de contenidos, más frecuentes solo en e-commerce con ofertas de tiempo limitado) e incluye siempre una forma sencilla de gestionar o desactivar las notificaciones desde la propia PWA.
La tasa de aceptación de las notificaciones push varía enormemente según el sector y el momento en que se pide el permiso. La media general ronda el 10-15% de los usuarios que visitan una web. Para las PWA con una propuesta de valor clara en sus notificaciones, puede llegar al 30-40%. La comparación con el 2-5% de suscripción a las newsletters tradicionales explica por qué las notificaciones push, bien gestionadas, son uno de los canales de reenganche más eficaces que existen.
Auditoría y optimización de una PWA existente: de web a PWA paso a paso
Si ya tienes una web que funciona y quieres convertirla en PWA, el proceso es más sencillo de lo que parece. No tienes que reescribirlo todo desde cero: se trata de añadir las capas tecnológicas de forma progresiva, una a una.
Paso 1: añade HTTPS si todavía no lo tienes (obligatorio: sin HTTPS los Service Workers no funcionan). Paso 2: crea el Web App Manifest con name, short_name, iconos en todos los tamaños estándar (72, 96, 128, 144, 152, 192, 384, 512 px), theme_color, background_color y display: "standalone". Paso 3: registra un Service Worker básico con una estrategia de caché para los recursos estáticos. Paso 4: optimiza las Core Web Vitals usando Lighthouse como guía. Paso 5: añade un flujo de instalación personalizado. Paso 6: implementa las notificaciones push si encajan en tu caso de uso.
Cada paso añade funciones PWA de forma independiente: puedes detenerte en cualquier punto y tener igualmente una experiencia mejor que la de la web original. Este carácter "progresivo" forma parte del propio nombre de la tecnología.
PWA y SEO: cómo se indexan las aplicaciones web progresivas
Una de las preguntas más frecuentes sobre las PWA tiene que ver con su impacto en el SEO. La buena noticia: Google indexa las PWA exactamente igual que las webs tradicionales. Googlebot ejecuta JavaScript, interpreta el DOM renderizado e indexa el contenido. No existe una penalización ni una ventaja SEO directa por ser una PWA.
Lo que influye de forma indirecta en el SEO es el rendimiento técnico, y aquí las PWA bien optimizadas suelen destacar: las Core Web Vitals (LCP, INP, CLS) miden la calidad de la experiencia de usuario y son factores de posicionamiento confirmados por Google. Una PWA con arquitectura App Shell, un Service Worker con una caché óptima y recursos minimizados consigue casi siempre mejores Core Web Vitals que una web tradicional sin optimizar.
El principal riesgo SEO de las PWA creadas con frameworks de JavaScript pesados (React, Vue, Angular sin SSR) es el renderizado en el cliente: el contenido lo genera JavaScript en el navegador en lugar de estar presente en el HTML inicial. Google puede indexar contenido JavaScript, pero con más retraso que el HTML estático. La solución es el
Para comprobar que tu PWA se indexa correctamente, usa la herramienta de inspección de URL de Google Search Console: introduce la URL de una página de la PWA y revisa el marcado renderizado; debe mostrar el contenido completo de la página, no solo el armazón HTML vacío.
Conclusión: la PWA es el siguiente paso evolutivo de la web
La Progressive Web App no es una tecnología de nicho para proyectos técnicos avanzados: es la evolución natural de cualquier web que quiera ofrecer una experiencia de usuario moderna. No sustituye a la app nativa en todos los casos, pero para la mayoría de los negocios, e-commerce y herramientas B2B ofrece la mejor relación entre coste de desarrollo, rendimiento, visibilidad y mantenimiento.
Si estás valorando si desarrollar una PWA, una app nativa o mejorar tu web actual, descubre el servicio de desarrollo de aplicaciones web o contáctame para hablar de tu caso concreto.
La mejor tecnología es la que resuelve tu problema concreto de la forma más eficiente, no la más avanzada en términos absolutos.
Si quieres aplicarlo a tu proyecto, echa un vistazo a mi servicio de desarrollo de aplicaciones web a medida: precios claros desde 850 €, presupuesto gratuito y respuesta en 24 horas.
