Qué es una Progressive Web App y cuándo puede sustituir a una aplicación móvil

Cuando una empresa quiere ofrecer una experiencia digital más avanzada, suele plantearse el desarrollo de una aplicación móvil.

La idea parece lógica: crear una app para iOS y Android, publicarla en las tiendas y permitir que los clientes accedan a servicios, contenidos o herramientas desde su teléfono.

Sin embargo, una aplicación nativa no siempre es la única opción.

En determinados proyectos, una Progressive Web App puede proporcionar una experiencia similar a la de una aplicación instalada, pero utilizando tecnologías web y una base de código común.

El usuario accede inicialmente desde el navegador. Después puede instalar la aplicación en su dispositivo, abrirla desde un icono y utilizar determinadas funciones incluso cuando la conexión es inestable o no está disponible.

Las PWA también pueden incorporar notificaciones, accesos directos, almacenamiento local y una interfaz adaptada al sistema operativo, aunque la compatibilidad concreta depende del navegador y del dispositivo utilizado.

Microsoft define las Progressive Web Apps como aplicaciones construidas con tecnologías web que pueden instalarse y ejecutarse en distintos dispositivos desde una sola base de código. En sistemas compatibles pueden ofrecer una experiencia similar a la de una aplicación nativa y seguir funcionando como una web convencional cuando se abren desde el navegador.

Esta combinación puede reducir costes y facilitar el mantenimiento.

Sin embargo, una Progressive Web App no sustituye a cualquier aplicación móvil. La decisión depende de las funciones necesarias, del acceso al hardware, de la estrategia de distribución y de las expectativas de los usuarios.

Qué es una Progressive Web App

Una Progressive Web App, también conocida como PWA, es una aplicación web mejorada mediante tecnologías que permiten integrarla de forma más profunda en el dispositivo.

Continúa siendo accesible mediante una URL, igual que cualquier página web. No obstante, puede añadir características como:

• Instalación en el dispositivo.
• Icono en la pantalla de inicio.
• Funcionamiento en una ventana independiente.
• Uso parcial sin conexión.
• Notificaciones.
• Almacenamiento local.
• Accesos directos.
• Actualizaciones automáticas.
• Integración con determinadas funciones del sistema.

Una de sus principales características es la adaptación progresiva.

La aplicación utiliza las capacidades que ofrece cada navegador y dispositivo. Cuando una función no está disponible, debería mantener una alternativa funcional.

Esto permite que el mismo proyecto pueda utilizarse desde un ordenador, un móvil o una tableta sin crear necesariamente aplicaciones completamente independientes.

En qué se diferencia de una web responsive

Una web responsive adapta su diseño al tamaño de la pantalla.

Los textos, imágenes, menús y columnas se reorganizan para que el contenido pueda consultarse correctamente desde un teléfono o una tableta.

Una PWA también debe ser responsive, pero incorpora capacidades adicionales.

Puede instalarse, mantener determinados recursos en el dispositivo y ofrecer una experiencia más parecida a la de una aplicación.

La diferencia no está únicamente en el aspecto visual.

Una web responsive puede cargar siempre su contenido desde Internet y ejecutarse dentro de una pestaña del navegador. Una PWA puede abrirse desde un icono, utilizar una ventana independiente y conservar determinados datos para mejorar la continuidad del servicio.

No todas las webs responsive necesitan convertirse en PWA.

Una página corporativa sencilla, consultada de forma ocasional, puede no beneficiarse de la instalación o del funcionamiento sin conexión.

En qué se diferencia de una aplicación nativa

Una aplicación nativa se desarrolla específicamente para un sistema operativo.

En dispositivos móviles, esto suele implicar crear una versión para iOS y otra para Android, aunque pueden utilizarse tecnologías multiplataforma para compartir parte del código.

Las aplicaciones nativas suelen distribuirse mediante tiendas y pueden acceder de forma más completa a las funciones del dispositivo.

Una Progressive Web App utiliza tecnologías como HTML, CSS y JavaScript. El navegador y el sistema operativo actúan como capa de conexión con el dispositivo.

Entre sus diferencias habituales se encuentran:

• La PWA puede abrirse mediante una URL.
• No necesita pasar obligatoriamente por una tienda.
• Puede actualizarse desde el servidor.
• Puede compartir una base de código entre plataformas.
• Su acceso a determinadas funciones puede ser más limitado.
• La instalación depende del navegador y del sistema.

Una aplicación nativa puede ofrecer más control cuando el proyecto necesita utilizar intensivamente cámaras, sensores, Bluetooth, procesamiento en segundo plano o funciones específicas del sistema operativo.

La PWA suele resultar más competitiva cuando el núcleo del servicio se basa en formularios, contenidos, reservas, catálogos, pedidos o gestión de información.

Qué necesita una PWA para poder instalarse

La instalación de una Progressive Web App se apoya principalmente en un archivo denominado web app manifest.

Este archivo informa al navegador sobre cómo debe aparecer y comportarse la aplicación cuando se instala.

Puede incluir:

• Nombre.
• Nombre abreviado.
• Iconos.
• Color principal.
• Color de fondo.
• URL de inicio.
• Modo de visualización.
• Orientación.
• Capturas.
• Accesos directos.

MDN explica que el manifiesto proporciona la información necesaria para que el navegador pueda instalar una PWA, mientras que web.dev lo describe como el archivo que define su aspecto y comportamiento dentro del sistema operativo.

La aplicación también debe utilizar HTTPS para proteger la comunicación y habilitar las funciones avanzadas asociadas a los service workers.

Los criterios exactos y la forma de instalación pueden variar entre navegadores. Por eso, debe probarse el proceso en los dispositivos prioritarios para el público del proyecto.

Qué función cumple un service worker

Un service worker es un script que funciona entre la aplicación, el navegador y la red.

Puede interceptar solicitudes y decidir si un recurso debe obtenerse desde Internet, desde una caché o mediante otra estrategia.

Esta capacidad permite:

• Guardar archivos necesarios.
• Reducir tiempos de carga.
• Mostrar una pantalla sin conexión.
• Sincronizar datos.
• Gestionar determinados procesos en segundo plano.
• Recibir notificaciones push cuando existe compatibilidad.

MDN describe los service workers como una especie de intermediario entre el navegador y la red que permite almacenar recursos y hacerlos disponibles cuando el dispositivo está sin conexión.

La implementación debe realizarse con cuidado.

Una estrategia de caché incorrecta puede mostrar información antigua, impedir que aparezcan cambios o almacenar datos que no deberían conservarse en el dispositivo.

Una PWA puede funcionar sin conexión

El funcionamiento offline es una de las ventajas más conocidas, pero no significa que todas las funciones puedan utilizarse sin Internet.

El comportamiento depende de cómo se diseñe la aplicación.

Una PWA puede permitir:

• Consultar contenidos descargados.
• Abrir documentos almacenados.
• Completar formularios pendientes de sincronización.
• Revisar información reciente.
• Continuar determinadas tareas.
• Mostrar una interfaz de emergencia.

Microsoft señala que las PWA pueden utilizar mecanismos como Cache API, almacenamiento local e IndexedDB para conservar datos y continuar trabajando cuando la red es inestable o no está disponible.

Sin embargo, algunas operaciones necesitan conexión:

• Confirmar un pago.
• Consultar stock en tiempo real.
• Validar una reserva.
• Obtener datos recientes.
• Iniciar sesión por primera vez.
• Sincronizar cambios.

La aplicación debe explicar claramente qué información está actualizada y qué operaciones quedan pendientes.

Puede enviar notificaciones

Las notificaciones permiten volver a atraer al usuario después de que haya cerrado la aplicación.

Pueden utilizarse para comunicar:

• Estado de un pedido.
• Nueva cita.
• Mensaje recibido.
• Cambio en una reserva.
• Recordatorio.
• Actualización relevante.
• Incidencia resuelta.

Las notificaciones deben solicitar permiso y aportar valor.

No conviene pedir autorización nada más abrir la web, antes de que el usuario conozca el servicio o comprenda qué mensajes recibirá.

Apple admite notificaciones web para aplicaciones añadidas a la pantalla de inicio en iOS y iPadOS desde la versión 16.4. También permite gestionar insignias y permisos desde la configuración de notificaciones.

La compatibilidad y el comportamiento pueden variar entre sistemas, por lo que la estrategia no debería depender exclusivamente de este canal.

Ventajas de una Progressive Web App

Las PWA pueden ofrecer beneficios económicos y técnicos cuando encajan con las necesidades del proyecto.

Una base de código común

La empresa puede mantener una misma aplicación para diferentes dispositivos.

Esto reduce la necesidad de implementar cada cambio varias veces.

Aunque pueden existir adaptaciones específicas, la mayor parte de la lógica y de la interfaz puede compartirse.

Acceso mediante una URL

El usuario puede probar el servicio sin instalar nada.

Puede llegar desde Google, un correo, un código QR o una campaña y comenzar a utilizar la aplicación inmediatamente.

Esta facilidad reduce la fricción inicial.

Instalación más sencilla

En sistemas compatibles, la aplicación puede añadirse directamente desde el navegador.

Una vez instalada, aparece junto a otras aplicaciones y puede abrirse en una ventana independiente.

En Windows, Microsoft indica que las PWA instaladas se comportan de forma similar a otras aplicaciones del sistema.

Actualizaciones centralizadas

Cuando la empresa publica una nueva versión en el servidor, los usuarios pueden recibirla sin descargar manualmente una actualización desde una tienda.

Es necesario gestionar correctamente la caché para evitar que convivan versiones incompatibles.

Menor coste en determinados proyectos

Compartir tecnologías y procesos puede reducir el coste inicial y el mantenimiento.

El ahorro dependerá del alcance. Una PWA compleja sigue necesitando diseño, desarrollo, pruebas, seguridad e infraestructura profesional.

Cuándo puede sustituir a una aplicación móvil

Una Progressive Web App puede ser suficiente cuando las funciones principales se ejecutan correctamente mediante tecnologías web.

Áreas privadas de clientes

Una empresa puede permitir que sus clientes:

• Consulten documentos.
• Revisen pedidos.
• Descarguen facturas.
• Actualicen datos.
• Envíen solicitudes.
• Consulten el estado de un proyecto.

Estas funciones suelen encajar bien en una PWA.

Aplicaciones internas

Los empleados pueden utilizarla para:

• Registrar trabajos.
• Consultar tareas.
• Completar partes.
• Revisar inventario.
• Acceder a procedimientos.
• Recopilar datos desde diferentes ubicaciones.

El funcionamiento parcial sin conexión puede resultar especialmente útil para equipos que trabajan en zonas con cobertura irregular.

Plataformas de reservas

Una PWA puede gestionar:

• Disponibilidad.
• Reservas.
• Confirmaciones.
• Cancelaciones.
• Recordatorios.
• Historial.

El usuario puede instalarla si utiliza el servicio con frecuencia, pero también acceder desde un enlace cuando solo la necesita ocasionalmente.

Tiendas online de compra recurrente

Los clientes habituales pueden instalar la tienda, recibir comunicaciones autorizadas y acceder más rápidamente al catálogo o a sus pedidos.

No obstante, el proceso de compra debe seguir funcionando correctamente desde el navegador para los usuarios que no quieran instalarla.

Herramientas de formación

Una plataforma educativa puede permitir consultar materiales, realizar actividades y guardar determinados contenidos.

La experiencia offline dependerá de los vídeos, documentos y funciones que deban almacenarse.

Cuándo conviene desarrollar una aplicación nativa

Una PWA puede no ser suficiente cuando el proyecto depende intensamente de capacidades específicas del dispositivo.

Una aplicación nativa suele resultar más adecuada cuando necesita:

• Procesamiento avanzado en segundo plano.
• Uso continuo de Bluetooth.
• Integración profunda con dispositivos externos.
• Realidad aumentada avanzada.
• Funciones complejas de cámara.
• Rendimiento gráfico elevado.
• Sensores específicos.
• Integración completa con el sistema.
• Experiencias intensivas de videojuegos.
• Presencia estratégica en las tiendas.

La compatibilidad web continúa evolucionando, pero no todas las APIs están disponibles en todos los navegadores.

Una función puede operar correctamente en Android y presentar restricciones en iOS, o funcionar en escritorio y no estar disponible en móvil.

La evaluación debe realizarse sobre los dispositivos reales del público objetivo.

Limitaciones que debe conocer una empresa

La principal limitación es la variabilidad entre plataformas.

Las capacidades, el proceso de instalación y la presentación pueden cambiar según el navegador.

También hay que considerar:

• Menor visibilidad en algunas tiendas.
• Acceso limitado a determinadas funciones.
• Menos control sobre procesos en segundo plano.
• Diferencias en notificaciones.
• Dependencia del motor del navegador.
• Necesidad de gestionar correctamente la caché.
• Posibles dificultades para explicar la instalación.

Una PWA tampoco debería ser una simple web envuelta en una ventana.

Para justificar su instalación necesita ofrecer una experiencia útil, rápida y coherente.

Publicación en tiendas de aplicaciones

Aunque una PWA puede distribuirse directamente desde la web, también puede empaquetarse para aparecer en determinadas tiendas.

Microsoft permite publicar PWA en Microsoft Store utilizando herramientas de empaquetado como PWABuilder.

En otras plataformas pueden utilizarse envoltorios o proyectos complementarios, aunque cada tienda mantiene sus propias políticas y requisitos.

Publicar en una tienda puede mejorar el descubrimiento y la confianza, pero también introduce revisiones, materiales comerciales y mantenimiento adicional.

La empresa debe valorar si sus usuarios buscan realmente la aplicación mediante ese canal.

La importancia de una buena experiencia de instalación

No conviene presionar al visitante para que instale la aplicación inmediatamente.

La invitación debería aparecer después de que el usuario haya comprendido su utilidad.

Puede resultar adecuado sugerir la instalación cuando:

• Ha utilizado varias veces el servicio.
• Ha completado una tarea.
• Consulta frecuentemente su área privada.
• Quiere recibir notificaciones.
• Necesita acceso rápido.
• Solicita funcionamiento sin conexión.

También debe explicarse qué ventaja obtendrá.

Un mensaje como “Instala nuestra aplicación” aporta poca información.

Resulta más útil indicar:

“Añade la aplicación para consultar tus pedidos y documentos desde la pantalla de inicio”.

Rendimiento, accesibilidad y seguridad

Convertir una web en PWA no corrige automáticamente sus problemas.

La aplicación debe seguir siendo:

• Rápida.
• Accesible.
• Segura.
• Comprensible.
• Adaptada a móviles.
• Fácil de actualizar.

También debe gestionar correctamente:

• Inicio de sesión.
• Cierre de sesión.
• Datos almacenados.
• Dispositivos compartidos.
• Caducidad de sesiones.
• Sincronización.
• Errores de red.
• Actualizaciones.

Si se almacenan datos personales o empresariales en el dispositivo, debe analizarse qué información puede conservarse y cómo se elimina.

Cómo decidir entre PWA y aplicación nativa

Antes de elegir una tecnología conviene responder:

• ¿Qué tareas realizará el usuario?
• ¿Qué funciones del dispositivo necesita?
• ¿Debe funcionar sin conexión?
• ¿La instalación es imprescindible?
• ¿Necesita estar en las tiendas?
• ¿Qué dispositivos utiliza el público?
• ¿Qué presupuesto existe?
• ¿Qué frecuencia de actualización tendrá?
• ¿Quién mantendrá el proyecto?
• ¿Qué nivel de rendimiento necesita?

También debe diferenciarse entre necesidades actuales y posibles funciones futuras.

Una PWA puede ser un excelente primer producto para validar un servicio antes de invertir en aplicaciones nativas.

En otros casos, la empresa puede utilizar una arquitectura híbrida: una PWA para la mayoría de usuarios y una app nativa para funciones especializadas.

Una alternativa flexible cuando el proyecto lo permite

Una Progressive Web App combina el alcance de una página web con algunas capacidades propias de las aplicaciones instaladas.

Puede accederse mediante una URL, instalarse en dispositivos compatibles, conservar información y ofrecer una experiencia adaptada a diferentes sistemas.

Para áreas de clientes, herramientas internas, reservas, ecommerce y plataformas de contenidos, puede sustituir a una aplicación móvil sin obligar a mantener dos desarrollos independientes.

Sin embargo, no es la mejor opción cuando el proyecto necesita una integración profunda con el dispositivo, alto rendimiento gráfico o funciones no disponibles de forma consistente en la web.

La decisión debe partir de los procesos, de los usuarios y de las capacidades necesarias, no únicamente del coste inicial.

En Calltek desarrollamos aplicaciones web, Progressive Web Apps y soluciones móviles personalizadas. Analizamos las funciones, los dispositivos y el modelo de uso para determinar qué arquitectura puede ofrecer una experiencia sólida sin añadir costes o complejidad innecesarios.