Las Aplicaciones Web Progresivas son una parte muy interesante del actual ecosistema de Android. Recientemente, Google ha apostado por este tipo de apps para lanzar Google Maps Go, su versión ligera de la app de mapas. En Android Ayuda te contamos qué son las PWA, cómo funcionan, qué ventajas tienen frente a las apps nativas, dónde conseguirlas y cómo crear las tuyas propias paso a paso sin descuidar aspectos clave como el SEO, la seguridad o la compatibilidad entre dispositivos.
¿Qué son las Aplicaciones Web Progresivas? ¿Cómo funcionan?
Las Aplicaciones Web Progresivas (PWA por sus siglas en inglés, Progressive Web Apps) son sitios web avanzados que se comportan y se sienten como una aplicación nativa. Están construidas con tecnologías estándar como HTML, CSS y JavaScript, pero añaden una capa extra de funcionalidades que les permite instalarse en el dispositivo, funcionar sin conexión, enviar notificaciones push y aprovechar muchas APIs del navegador.
Esto significa que, sin llegar al nivel de algo que puedas instalar a través de la Play Store como una app nativa tradicional, las PWA ofrecen funciones avanzadas que las diferencian de los sitios web estáticos de toda la vida. Se abren utilizando un navegador móvil y, gracias a su arquitectura, pueden ofrecer una experiencia casi idéntica a una app instalada de forma clásica.
Las PWA se abren utilizando un navegador móvil. En general, funcionarán mejor con Chrome de Google, pero también puedes utilizar otros como Brave Browser o Firefox, que ofrecen buen soporte para Service Workers y Web App Manifest. Dependerá también del tipo de navegador, ya que otros como Firefox Focus o Flynx no sirven para estos casos porque no implementan todas las APIs necesarias para las PWA.
A pesar de abrirse con un navegador, las PWA pueden funcionar de manera offline, lo que supone un punto diferenciador respecto a los sitios web estáticos. Gracias a un componente llamado Service Worker, la aplicación guarda en caché los recursos esenciales (HTML, CSS, JavaScript, imágenes y datos clave) cuando hay conexión. Después, aunque no tengas Internet, la PWA puede seguir mostrándote contenido y respondiendo con rapidez.
Esto significa que, por ejemplo, podrás ver tu historial de Twitter Lite sin conexión o navegar por un catálogo de productos ya cargado. Además, podrás añadir enlaces directos a tu pantalla de inicio, lo que hará que sea mucho más fácil lanzarlas posteriormente. En algunos casos, las PWA te ofrecen esta opción al entrar por primera vez mediante un banner de instalación. En las PWA más avanzadas, el icono aparecerá también en tu cajón de aplicaciones y podrán ejecutarse en su propia ventana, sin barra de direcciones del navegador, como si fueran una app instalada más.
Las PWA también son capaces de mostrar notificaciones push, programar sincronizaciones en segundo plano, actualizar datos periódicamente incluso cuando la app no se está ejecutando y aprovechar APIs modernas del navegador como WebBluetooth, WebUSB, WebAuthn o WebAssembly, que les permiten hacer tareas antes reservadas a las apps nativas, como gestionar archivos, acceder al portapapeles o trabajar con gráficos acelerados por hardware.
Ventajas y desventajas de las Aplicaciones Web Progresivas
Las Aplicaciones Web Progresivas tienen ventajas e inconvenientes, tanto para las personas usuarias como para quienes desarrollan proyectos digitales. Entender estos puntos es clave para decidir si una PWA es la mejor solución para tu caso.
Entre sus puntos a favor está el hecho de que son compatibles con una gran multitud de dispositivos. Dado que se lanzan a través de un navegador móvil o de escritorio, dependen de este motor de navegación y no tanto del sistema operativo concreto. Una PWA bien construida puede funcionar en Android, iOS, Windows, macOS o Linux sin necesidad de desarrollar versiones diferentes.
Además, las PWA tienen un coste de desarrollo multiplataforma menor que las aplicaciones compiladas que requieren un código base específico e independiente para cada plataforma, como Android, iOS y cada sistema operativo de escritorio. Con una PWA, puedes usar un único código base que se comparte entre tu sitio web, aplicación móvil y aplicación de escritorio, lo que simplifica el mantenimiento y acelera la evolución del proyecto.
Otra ventaja importante es que las PWA pueden ser indexadas por los motores de búsqueda como cualquier web. Esto permite trabajar el SEO y aparecer en Google, algo imposible con una app nativa tradicional que solo se distribuye a través de tiendas de aplicaciones. Al poder compartirlas mediante un enlace estándar, es más sencillo aumentar el tráfico y la visibilidad.
Las PWA también destacan por su alto rendimiento: gracias al almacenamiento en caché y a los Service Workers, los tiempos de carga son mucho menores y se reduce el consumo de datos. Muchos casos de éxito muestran reducciones superiores al 80 % en datos móviles frente a versiones nativas, como en el marketplace africano Jumia. Esto las hace especialmente adecuadas para redes lentas o inestables y para mercados emergentes donde el coste de los datos móviles es relevante.
Entre sus puntos en contra está el hecho de que no alcanzan todos los niveles de complejidad y acceso profundo al hardware de las aplicaciones nativas. Aunque cada vez existen más APIs web, todavía hay funcionalidades avanzadas (integración total con Bluetooth, sensores muy específicos, acceso de bajo nivel al sistema o ciertas capacidades de realidad aumentada) donde una app nativa u otra solución híbrida sigue teniendo ventaja.
No obstante, las PWA son unas herramientas muy útiles para crear aplicaciones ligeras aptas para mercados emergentes y para proyectos que necesitan llegar al máximo número de usuarios con un presupuesto contenido, como vemos en los ya mencionados casos de Google, Twitter, Starbucks, Trivago, Tinder o Alibaba, que han logrado aumentos notables en conversiones y retención apostando por esta tecnología.
Arquitectura interna de una PWA: piezas clave
Más allá de que estas tecnologías funcionan a partir de HTML, CSS y JavaScript, el verdadero corazón de las PWA está en varios componentes básicos que trabajan juntos para ofrecer una experiencia fluida, rápida y segura.
Service Worker: es un script en segundo plano que se ejecuta aparte del hilo principal de la página. Permite guardar una copia de la información con una conexión a Internet activa, haciendo posible usar la aplicación mientras se está offline. También se encarga de interceptar las peticiones de red, decidir qué se sirve desde caché y qué se pide al servidor, gestionar notificaciones push y realizar tareas programadas cuando la PWA no está abierta.
Application Shell Architecture: esta arquitectura define un esqueleto mínimo de la interfaz (cabecera, menú, navegación básica) que se guarda en la caché del Service Worker. Gracias a esta estructura, la PWA puede mostrar rápidamente la interfaz básica y luego ir cargando el contenido dinámico, reduciendo así los tiempos de carga iniciales al ejecutar la PWA. Es la raíz de la interfaz y lo primero que el usuario visualiza.
Web App Manifest o manifiesto de la aplicación: es un archivo JSON simplificado que proporciona información sobre la aplicación, como nombre, descripción, iconos, colores, orientación de pantalla y modo de visualización. Este archivo indica al navegador cómo debe instalar la PWA, qué icono mostrar en la pantalla de inicio y cómo abrirla (a pantalla completa, con barra de direcciones, en ventana independiente, etc.). Es imprescindible para que el navegador ofrezca el botón de Añadir a la pantalla de inicio.
HTTPS: las PWA deben servirse siempre a través de HTTPS. La seguridad es una parte crítica: los navegadores solo permiten registrar Service Workers y utilizar muchas APIs avanzadas cuando el sitio se sirve por una conexión cifrada y autenticada. Esto protege a los usuarios frente a ataques de intermediarios y garantiza la integridad de la aplicación.
¿Dónde puedo conseguir Aplicaciones Web Progresivas? ¿Existen tiendas?
Como ya hemos mencionado, las PWA son sitios web móviles avanzados. Esto significa que cada vez que entres a una, deberás añadirla a la pantalla de inicio para usarla con comodidad. Sin embargo, no hace falta ir sitio por sitio para encontrar quiénes ofrecen Aplicaciones Web Progresivas.
Existen repositorios que las agrupan, funcionando como una suerte de tiendas de PWA. Puedes entrar en ellas para buscar aplicaciones por categorías, ver valoraciones de la comunidad o incluso añadirlas directamente a tu escritorio para colocarlas junto a la Play Store o a la barra de tareas en tu ordenador:
- PWA Rocks: PWA Rocks es una de las principales tiendas de PWA. Tiene un diseño sencillo que funciona muy bien desde el teléfono móvil. Dispone de varias categorías como Social, Herramientas, Noticias, Negocios… que facilitan la búsqueda de lo que necesitas. Al pulsar sobre el icono de una PWA, te llevará a su sitio web, desde donde podrás instalarla. Es un proyecto alojado en GitHub abierto a contribuciones.
- Roneet Kumar Webstore: Roneet Kumar es el nombre del desarrollador de esta tienda. Es muy similar a PWA Rocks, pero disfruta de un diseño basado en Material Design mucho más atractivo. Su selección varía ligeramente y tiene una opción para enviar Aplicaciones Web Progresivas que añadir al repositorio. También está alojado en GitHub y permite descubrir aplicaciones de productividad, juegos, herramientas educativas y más.
- PWA Directory: PWA Directory destaca por tener una amplia selección de diversos mercados y por incorporar un buscador para navegar por su selección. Aunque Roneet Kumar también lo incorpora, esta selección es mayor, por lo que aumenta su relevancia. También puedes iniciar sesión con tu cuenta de Google para tener un historial de las PWA que has añadido. También se aloja en GitHub y se actualiza con frecuencia.
- Hermit Webstore: la selección de PWA de Hermit, desarrollo del que hablaremos en el siguiente apartado, ofrece sitios optimizados para convertirse en aplicaciones ligeras. Desde allí puedes explorar PWA listas para añadir como “lite apps” dentro del propio Hermit.
- Outweb: la última de la lista ofrece una experiencia muy bien categorizada y potente. Podrás navegar por diversas clases de Aplicaciones Web Progresivas en base a su utilidad, además de usar el buscador incorporado. Tiene un menú inferior para navegar por sus distintas categorías, como entretenimiento, herramientas, noticias o juegos.
Además de estos repositorios, muchas PWA modernas se pueden instalar desde el propio navegador. Navegadores como Microsoft Edge permiten instalar PWA desde la barra de direcciones, y en sistemas como Windows es posible incluso publicarlas en Microsoft Store, desde donde las personas usuarias pueden descubrirlas, instalarlas y gestionarlas igual que otras apps.
Compatibilidad entre dispositivos y cierre de la brecha con las apps nativas
Las aplicaciones web progresivas se compilan mediante código HTML, CSS y JavaScript hospedado en servidores web y que se ejecuta en motores de explorador. Gracias a este enfoque, se pueden usar directamente en un navegador, como un sitio web corriente, o instalarse en un dispositivo desde una tienda de aplicaciones compatible o mediante la característica de instalación del propio navegador.
La experiencia de usuario de una PWA se adapta a las funcionalidades del dispositivo: en pantallas pequeñas se muestra un diseño optimizado para móvil, mientras que en escritorios amplios puede ofrecer interfaces más complejas. En sistemas como Windows, con Microsoft Edge, es posible crear experiencias muy integradas con el sistema operativo, incluyendo iconos en la barra de tareas, notificaciones del sistema y ejecución en ventana independiente.
Muchas características que antes solo eran posibles mediante lenguajes específicos del dispositivo ahora se pueden lograr mediante tecnologías web estándar. Hoy en día es posible, por ejemplo, gestionar archivos, compartir contenido con otras aplicaciones a través de la API de Web Share, acceder al Portapapeles, sincronizar datos y capturar recursos en segundo plano, acceder a hardware como Bluetooth y USB, almacenar contenido en bases de datos locales (IndexedDB) o ejecutar código de alto rendimiento con WebAssembly.
Gracias a esta evolución, la brecha entre la web y lo nativo se ha reducido muchísimo. Para muchos proyectos, una PWA puede ofrecer ya todo lo necesario sin tener que invertir en una app nativa completa.
Casos de éxito de Aplicaciones Web Progresivas
El uso de tecnologías de Aplicación Web Progresiva es una excelente manera de hacer que una aplicación sea segura, reconocible, enlazable, fácil de instalar, rápida y usable sin depender totalmente de la red. Muchos servicios populares han migrado parte de su estrategia hacia PWA con resultados medibles.
- Starbucks: su PWA orientada a pedidos rápidos ha duplicado el número de usuarios activos diarios. Los pedidos en escritorio son casi igual de rápidos que en móvil, lo que ha incrementado el uso del canal web.
- Trivago: ha experimentado un aumento del 150 % en las personas que añaden su PWA a la pantalla principal. El aumento de la participación supuso un incremento del 97 % en los registros de ofertas de hotel.
- Tinder: con su PWA ha reducido los tiempos de carga de casi 12 segundos a menos de 5, con una aplicación un 90 % más pequeña que la app de Android, lo que mejora la adopción en redes lentas.
- Alibaba, Uber, Forbes o Twitter Lite: también han informado de mejoras importantes en conversiones, tiempo de permanencia y retención tras adoptar una estrategia PWA, especialmente en mercados donde el acceso a datos móviles es limitado.
¿Puedo crear mis propias Aplicaciones Web Progresivas?
Para desarrolladores, Google ofrece un completo tutorial respecto a cómo crear Progressive Web Apps. Desde la compañía buscan que las Aplicaciones Web Progresivas sean experiencias rápidas, seguras y accesibles a todo el mundo, por lo que facilitan su desarrollo con guías, codelabs y herramientas como Lighthouse o Workbox.
El proceso básico de creación de una PWA incluye definir un Web App Manifest, registrar un Service Worker para gestionar la caché y las notificaciones, servir el sitio bajo HTTPS y asegurarse de que la interfaz es responsive y se adapta a cualquier pantalla. Frameworks como React, Angular o Vue.js incluyen plantillas y herramientas que facilitan este trabajo.
Sin embargo, esta no es la única manera de crear esta clase de apps, dado que puedes convertir cualquier sitio web en una PWA o en algo muy parecido desde tu propio móvil.
Convertir webs en “mini PWA” en Android con Hermit
Para hacerlo, necesitarás instalar en tu teléfono móvil Hermit, una aplicación que captura sitios web, te los deja optimizar y te permite añadirlos a la pantalla de inicio como si fueran Aplicaciones Web Progresivas. Puedes descargarla desde la Play Store:
Hermit te permite entrar a un website desde su aplicación, ya sea uno que tú elijas o uno de su lista preseleccionado (antes ya te hemos enlazado su repositorio). Además, te permite personalizar la experiencia y el aspecto de la página web, ya sea bloqueando algunos elementos, forzando un modo oscuro, eligiendo que se muestre a pantalla completa, controlando si carga imágenes, activando bloqueadores de rastreadores, etc. Existen suficientes opciones para tener una especie de Aplicación Web Progresiva única a partir de casi cualquier web.
Al utilizar la versión gratuita de Hermit, estarás limitado a dos aplicaciones. Si pagas la versión premium, podrás crear tantas apps como desees. Si eres estudiante, quizá puedas hacerte con la versión premium sin coste alguno gracias a promociones puntuales del desarrollador. En cualquier caso, Hermit es una vía sencilla para quienes buscan apps ligeras sin depender de la instalación clásica desde tiendas.
Combinando la potencia de las PWA nativas del navegador con herramientas como Hermit y con repositorios especializados, hoy cualquier persona usuaria de Android puede crear un entorno de aplicaciones rápidas, ligeras, seguras y multiplataforma que aprovechan al máximo la web moderna sin renunciar a la comodidad de una app instalada.