¿Qué es una PWA? ¿App móvil o web?

01¿Qué significa Progressive Web App?

Una progressive web app es un enfoque que añade capacidades de aplicación a un sitio web convencional. El usuario abre el sitio en el navegador y, si le gusta, lo añade a su pantalla de inicio con un solo toque. En los accesos posteriores se inicia como una aplicación, sin barra de direcciones y con su propio icono y pantalla de inicio.

La palabra “progressive” de su nombre es importante. La aplicación gana capacidades en la medida en que el navegador las admite: en un navegador antiguo funciona como un sitio normal, y en uno moderno entran en juego el modo sin conexión, las notificaciones y la instalación en la pantalla de inicio. Nadie se queda fuera.

La base de este enfoque son los estándares web; no depende de una plataforma ni de un framework concretos. Cualquier sitio escrito con React, Vue o JavaScript puro puede convertirse en PWA siguiendo los pasos adecuados.

02Las tres piezas que convierten un sitio en PWA

Técnicamente, para que un sitio se considere PWA hacen falta tres componentes básicos. Los tres son estándares y su descripción oficial está en fuentes como web.dev.

{
  "name": "Tienda de ejemplo",
  "short_name": "Tienda",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b5cff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

HTTPS

Las funciones de una PWA solo funcionan con una conexión segura. En un sitio sin certificado SSL no se puede registrar un service worker.

Web app manifest

El manifest es un pequeño archivo JSON que describe el nombre de la aplicación, sus iconos, el color del tema y cómo debe abrirse. El navegador propone añadirla a la pantalla de inicio a partir de este archivo.

Service worker

El service worker es un archivo JavaScript que se sitúa entre el navegador y la red. Almacena páginas y archivos en caché, muestra el contenido guardado cuando se corta internet y, en las plataformas compatibles, gestiona las notificaciones.

03Ventajas de una PWA

La mayor de estas ventajas suele notarse en el coste. En lugar de dos apps móviles distintas, dos mantenimientos y dos procesos de tienda, se gestiona un único proyecto web. Los factores que realmente influyen en el presupuesto son el número de pantallas, la complejidad de los escenarios sin conexión y los sistemas a los que haya que conectarse.

• Una sola base de código: no hace falta desarrollar por separado para iOS, Android y escritorio.
• Independencia de las tiendas: no espera ninguna aprobación para publicar una actualización; el cambio llega a todos al instante.
• Poca fricción de instalación: el usuario empieza directamente desde el enlace, sin pasar por la tienda.
• Visible en los buscadores: como el contenido es una página web, Google puede rastrearlo.
• Ligera: en el teléfono suele ocupar mucho menos espacio que las aplicaciones nativas.
• Puede funcionar sin conexión: incluso con mala cobertura se abre el contenido guardado en caché.

04Los límites de una PWA

Una PWA no responde a todas las necesidades; para una comparación honesta hay que conocer también sus límites.

El soporte en iOS es más limitado que en Android. Funciones como añadir a la pantalla de inicio o las notificaciones han mejorado con el tiempo, pero algunos comportamientos siguen siendo distintos y la sugerencia de instalación no aparece automáticamente: el usuario debe añadirla desde el menú de compartir.

El acceso al hardware también es limitado. Funciones básicas como la cámara, la ubicación y la vibración pueden usarse desde la web, pero en necesidades como dispositivos Bluetooth, seguimiento continuo de la ubicación en segundo plano o juegos con gráficos exigentes, la aplicación nativa sigue llevando ventaja.

Por último está la cuestión de la visibilidad en las tiendas. Algunos usuarios buscan la aplicación solo en la tienda. En Android, las PWA pueden publicarse en Play Store con ciertos métodos; en iOS, este camino suele requerir una aplicación nativa contenedora.

05¿App móvil o sitio web?

Esta pregunta es en realidad una decisión entre tres opciones: un sitio web adaptado a móviles, una PWA y una aplicación móvil nativa. La tabla siguiente resume las diferencias.

06¿Para qué empresas es adecuada una PWA?

Donde más brilla una PWA es en los escenarios en los que el usuario vuelve con frecuencia pero le da pereza descargar una app aparte. Para el usuario con la memoria del teléfono llena que no quiere instalar otra aplicación, una experiencia ligera que se abre desde un enlace y se añade a la pantalla de inicio suele ser el camino más corto.

• Tiendas e-commerce: una tienda que abre rápido y permanece en la pantalla de inicio para el cliente que vuelve a comprar.
• Restaurantes y cafeterías: cartas y pantallas de pedido que se abren desde el código QR de la mesa y se usan sin descargar ninguna app.
• Reservas y citas: repetir una reserva con rapidez en un hotel, una clínica o una peluquería.
• Equipos de campo: servicio técnico o equipos de ventas que rellenan formularios donde la cobertura es débil.
• Sitios de contenido: noticias, guías y catálogos, contenidos que se leen con frecuencia.

07¿Qué determina el coste?

El presupuesto de un proyecto PWA depende menos de la pregunta “¿app o sitio?” que de los detalles del alcance. Hay una gran diferencia entre añadir un manifest y una caché a un sencillo sitio de contenido y montar una aplicación de campo que tome pedidos sin conexión.

Los conceptos que más influyen en el presupuesto son: el número de pantallas y flujos, la complejidad de las operaciones que funcionarán sin conexión, los escenarios de notificaciones, los sistemas a los que haya que conectarse, como pagos, stock o reservas, y cuán original sea el diseño. A ello hay que sumar la necesidad de mantenimiento y actualización tras la publicación.

Al comparar con una aplicación nativa, no mire solo el coste del primer desarrollo. El seguimiento de versiones para dos plataformas, las actualizaciones en las tiendas y las pruebas en dispositivos son partidas que se repiten cada año. En una PWA, una parte importante de ellas se concentra en un único proceso web; el verdadero ahorro suele aparecer ahí.

08Antes de empezar un proyecto PWA

El código de una PWA se escribe sobre todo en JavaScript; en proyectos grandes se prefiere TypeScript por la seguridad de tipos. Si le interesa el reparto de tareas entre la interfaz y el servidor, nuestro artículo sobre la diferencia entre frontend y backend lo explica de forma sencilla. Para quien quiera empezar desde cero, el artículo qué es JavaScript es un buen punto de entrada.

1. Arregle la experiencia móvil: un sitio rápido, legible y pensado para el tacto es la condición básica.
2. Fije un objetivo de velocidad: los umbrales de Core Web Vitals (LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1) son una buena referencia inicial.
3. Defina el escenario sin conexión: sin internet, ¿qué debe poder ver y hacer el usuario?
4. Determine la estrategia de notificaciones: pida el permiso no en el primer segundo, sino después de haber demostrado valor.
5. Pruebe en dispositivos reales: pruebe por separado el comportamiento de instalación y apertura, sobre todo en iOS y Android.