Progressive web apps: lo mejor de la web y del móvil
Gjethe desarrolla progressive web apps: sitios web que se instalan en la pantalla de inicio, siguen funcionando sin conexión y envían notificaciones push, a partir de un único código web que funciona en iOS, Android y escritorio. Creamos PWA nuevas y convertimos sitios existentes añadiendo un web app manifest, un service worker, páginas sin conexión e invitaciones de instalación.
- Primera consulta gratuita
- Presupuesto por escrito para su proyecto
- Pagos fraccionados por hitos, con flexibilidad
De un vistazo
- Funciona en
- iOS, Android y escritorio
- Instalar
- Desde el navegador, mediante un enlace
- Offline
- Caché con service worker
- Updates
- Instantánea, sin revisión de tienda
Definition
Qué es las aplicaciones web progresivas?
Una progressive web app (PWA) es un sitio web creado con las capacidades modernas del navegador, un web app manifest y un service worker, de modo que puede instalarse como una app, cargar al instante, funcionar sin conexión y enviar notificaciones.
No todo producto necesita estar en la App Store. Para herramientas de reservas, aplicaciones internas, productos de contenido y portales de clientes, una PWA ofrece una experiencia parecida a la de una app desde un enlace: sin descargas desde una tienda, sin proceso de revisión para las actualizaciones y con un solo código en lugar de tres. Cuando un producto sí necesita funciones avanzadas del dispositivo, se lo diremos y recomendaremos en su lugar una app nativa o en React Native.
¿Para quién es?
Herramientas de reservas y pedidos
Los clientes repiten pedidos o reservas con regularidad y se benefician de un icono en su pantalla de inicio.
Herramientas internas de empresa
Los equipos de campo y el personal necesitan una app sin la carga de publicarla en las tiendas.
Productos de contenido y medios
Los lectores quieren una carga rápida y lectura sin conexión con malas conexiones.
Startups que validan una idea de app
Compruebe si la gente usa el producto antes de invertir en apps nativas.
Qué está incluido y qué se queda usted
Qué incluye
- Web app manifest e iconos
- Service worker con una estrategia de caché
- Páginas sin conexión y datos offline-first donde haga falta
- Invitaciones de instalación para Android y escritorio, guía para iOS
- Notificaciones push
- Sincronización en segundo plano para formularios y acciones
- Arquitectura app-shell para una carga instantánea
- Diseño responsive para cualquier tamaño de pantalla
- Comprobaciones de PWA y accesibilidad con Lighthouse
- Analítica de instalaciones y de interacción
Lo que recibe
Se entrega al final. Suyo para siempre.
- La PWA en producción en su dominio
- Código fuente en su repositorio
- Configuración y documentación de las notificaciones push
- Documentación de la estrategia de caché
- Guía de instalación para sus usuarios
¿PWA o app nativa?
| Aplicación web progresiva | App nativa (iOS/Android) | |
|---|---|---|
| Instalar | Desde el navegador, mediante un enlace | Desde la App Store y Google Play |
| Updates | Instantánea, sin revisión | Mediante revisión de la tienda |
| Offline | Sí, con service workers | Sí |
| Notificaciones push | Sí (en iOS cuando está instalada en la pantalla de inicio) | Sí |
| Acceso avanzado al dispositivo | Limitado: Bluetooth y tareas en segundo plano varían según la plataforma | Completo |
| Codebase | Un único código web | Uno por plataforma, o compartido con React Native |
¿Cómo funciona el modo sin conexión?
Un service worker se sitúa entre la app y la red. Cuando la app está conectada, almacena los archivos y datos que el usuario necesita; cuando se pierde la conexión, los sirve desde ese almacén en lugar de mostrar un error.
Elegimos una estrategia de caché para cada tipo de contenido. El app shell (diseño, estilos y scripts) se guarda en caché de antemano para que se abra al instante. Los datos que cambian con frecuencia usan network-first con una alternativa en caché, y las acciones realizadas sin conexión, como enviar un formulario, se ponen en cola y se envían automáticamente cuando vuelve la conexión.
Dónde funcionan especialmente bien las PWA
Pedidos y reservas
Los clientes habituales repiten el pedido desde un icono de la pantalla de inicio sin descargar nada de una tienda.
Equipos de campo y de reparto
El personal usa la app con conexiones irregulares; el modo sin conexión y la sincronización en segundo plano mantienen el trabajo en marcha.
Plataformas de aprendizaje
Las lecciones y los materiales cargan rápido y pueden guardarse para estudiar sin conexión.
Portales de clientes
Los clientes consultan pedidos, facturas o reservas con una experiencia similar a la de una app sin un proyecto móvil aparte.
Qué hace que una PWA se sienta como una app de verdad
- Se abre al instante desde la pantalla de inicio, incluso sin conexión
- Navegación que funciona con los pulgares, no solo con un ratón
- Respuesta clara cuando se pierde o vuelve la conexión
- Notificaciones útiles y fáciles de controlar
- Sin barra de direcciones del navegador en modo independiente
- Transiciones fluidas entre pantallas
Cómo funcionan las aplicaciones web progresivas, paso a paso
Cada paso tiene un resultado claro que puede revisar. Los plazos se acuerdan en su presupuesto.
- 1
Comprobación del caso de uso
Confirmamos que una PWA encaja, o recomendamos una app nativa si el producto depende de funciones del dispositivo que los navegadores no ofrecen.
- 2
Diseño UX
Navegación similar a la de una app, estados sin conexión y momentos de instalación diseñados en Figma.
- 3
Construir
Desarrollo de la aplicación web con el manifest, el service worker y la estrategia de caché.
- 4
Notifications
Configuración de las notificaciones push con solicitudes de permiso programadas para cuando los usuarios ven el valor.
- 5
Probar
Instalación, comportamiento sin conexión y notificaciones probados en navegadores de iOS, Android y escritorio.
- 6
Launch
Despliegue, analítica y orientación para los usuarios sobre cómo instalar la app.
Herramientas y qué determina su presupuesto
El precio depende de su proyecto y se acuerda en su presupuesto. Esto es lo que lo hace variar.
| Factor | Por qué importa |
|---|---|
| Desarrollo nuevo o conversión | Añadir funciones de PWA a un sitio existente cuesta menos que crear una app desde cero. |
| Requisitos sin conexión | El modo de solo lectura sin conexión es más sencillo que la edición completa sin conexión con sincronización. |
| Notificaciones push | La lógica de notificaciones, los segmentos y los flujos de permisos añaden trabajo. |
| Cuentas y datos | Las experiencias con sesión iniciada necesitan autenticación y un tratamiento seguro de los datos. |
| Integrations | Los pagos, los sistemas de reservas o las herramientas de back office añaden desarrollo. |
| Área | Tools |
|---|---|
| Frameworks | Next.js, React, Vue / Nuxt |
| Service workers | Workbox, service workers a medida |
| Push | Web Push, Firebase Cloud Messaging |
| Pruebas | Lighthouse, Chrome DevTools, dispositivos reales |
Errores habituales que evitar
Lo que vemos fallar con más frecuencia y cómo lo evita un buen proyecto.
Pedir las notificaciones de inmediato
Una solicitud de permiso en la primera visita suele rechazarse. Pídala después de que el usuario vea por qué las notificaciones le ayudan.
Guardar todo en caché para siempre
Una caché demasiado agresiva sirve contenido desactualizado. Cada tipo de dato necesita su propia estrategia.
Ignorar el comportamiento de iOS
La instalación y las notificaciones funcionan de otra manera en el iPhone. Los usuarios necesitan indicaciones claras para añadir la app a su pantalla de inicio.
Elegir una PWA para apps que dependen mucho del hardware
Los productos basados en Bluetooth, la ubicación en segundo plano o una integración profunda con el sistema operativo corresponden a apps nativas.
Preguntas frecuentes
¿Funcionan las PWA en el iPhone?
Sí. Los usuarios de iPhone añaden una PWA a la pantalla de inicio desde el menú de compartir de Safari, y las PWA instaladas pueden recibir notificaciones push en las versiones recientes de iOS.
¿Puede publicarse una PWA en las tiendas de aplicaciones?
Google Play acepta PWA empaquetadas como Trusted Web Activities. La App Store de Apple suele exigir un contenedor nativo que ofrezca funcionalidad real de app.
¿Pueden convertir mi sitio web actual en una PWA?
Sí. Añadimos el manifest, el service worker, las páginas sin conexión y las invitaciones de instalación, y ajustamos la navegación para que se sienta como una app.
¿Es una PWA más barata que una app nativa?
Normalmente sí, porque un único código web sirve a todas las plataformas y las actualizaciones no pasan por la revisión de las tiendas. La diferencia se reduce si de todos modos desarrollaría con React Native.
¿Puede una PWA aceptar pagos?
Sí, mediante proveedores de pago web estándar como Stripe, incluidos Apple Pay y Google Pay en los navegadores compatibles.
¿Cómo encuentran e instalan los usuarios la PWA?
A través de su sitio web, un enlace o un código QR. En Android y escritorio el navegador ofrece instalarla; en iOS mostramos una guía breve.
¿La indexará Google?
Sí. Una PWA sigue siendo un sitio web, así que sus páginas públicas pueden rastrearse y posicionarse como cualquier otra.
¿Puede la PWA funcionar con nuestro backend actual?
Sí. La PWA es un front end; puede usar sus APIs, CMS o base de datos actuales, o podemos desarrollar el backend junto a ella.
¿Puede una PWA usar la cámara o la ubicación?
Sí. Los navegadores modernos permiten el acceso a la cámara, el micrófono y la ubicación con el permiso del usuario. Algunas capacidades más avanzadas, como la ubicación en segundo plano o el Bluetooth en el iPhone, siguen requiriendo una app nativa.
¿Cómo llegan las actualizaciones a los usuarios?
Cuando desplegamos una nueva versión, el service worker la recoge en la siguiente visita del usuario, de modo que todos reciben la última versión sin pasar por una tienda de aplicaciones.
¿Funcionan las PWA en ordenadores de escritorio?
Sí. Chrome y Edge permiten instalar una PWA en Windows, macOS y ChromeOS, donde se abre en su propia ventana como una aplicación de escritorio, algo útil para herramientas internas y paneles.
Servicios relacionados
Desarrollo de aplicaciones móviles
Aplicaciones iOS y Android, desde el diseño hasta el lanzamiento en las tiendas.
Aplicaciones web y SaaS
Portales, paneles y productos por suscripción.
Desarrollo con Next.js
Sitios y aplicaciones React renderizados en el servidor.
Desarrollo con React Native
Aplicaciones multiplataforma con módulos nativos cuando hace falta.
Aplicaciones web progresivas por sector
Construya su PWA.
Cuéntenos qué necesita. Recibirá una valoración honesta, un plan claro y un presupuesto por escrito. La primera consulta es siempre gratuita.
- Qué ocurre después
- 1Usted nos cuenta qué necesita
- 2Nos proponemos responder en 24 horas con preguntas
- 3Recibe un presupuesto por escrito para su proyecto