Este artículo proporciona una introducción a las aplicaciones web progresivas (PWA), analizando qué son y las ventajas que ofrecen sobre las aplicaciones web normales.
¿Qué es una aplicación web progresiva o PWA?
Una aplicación web progresiva ( PWA ), comúnmente conocida como aplicación web progresiva , es un tipo de software de aplicación entregado a través de la web , construido utilizando tecnologías web comunes que incluyen HTML , CSS , JavaScript y WebAssembly.
Está diseñado para funcionar en cualquier plataforma con un navegador compatible con los estándares , incluidos dispositivos móviles y de escritorio .
Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web , no requieren un paquete o distribución por separado.
Los desarrolladores pueden simplemente publicar la aplicación web en línea, asegurarse de que cumpla con los requisitos básicos de instalación y los usuarios podrán agregar la aplicación a su pantalla de inicio.
La publicación de la aplicación en sistemas de distribución digital como Apple App Store o Google Play es opcional.
A partir de 2021, Google Chrome , Apple Safari , Firefox para Android y Microsoft Edge admiten las funciones de PWA en diversos grados, pero no Firefox para escritorio.
El término «Aplicación web progresiva» no es un nombre formal ni oficial. Es solo una abreviatura utilizada inicialmente por Google para el concepto de crear una aplicación flexible y adaptable utilizando solo tecnologías web.
Las PWA son aplicaciones web desarrolladas utilizando una serie de tecnologías específicas y patrones estándar que les permiten aprovechar las funciones de la aplicación web y nativa. Por ejemplo, las aplicaciones web son más detectables que las aplicaciones nativas; es mucho más fácil y rápido visitar un sitio web que instalar una aplicación, y también puede compartir aplicaciones web enviando un enlace.
Por otro lado, las aplicaciones nativas se integran mejor con el sistema operativo y, por lo tanto, ofrecen una experiencia más fluida para los usuarios. Puede instalar una aplicación nativa para que funcione sin conexión, y a los usuarios les encanta tocar sus iconos para acceder fácilmente a sus aplicaciones favoritas, en lugar de navegar hasta ellas con un navegador.
Las PWA nos brindan la capacidad de crear aplicaciones web que pueden disfrutar de estas mismas ventajas.
No es un concepto completamente nuevo: estas ideas se han revisado muchas veces en la plataforma web con varios enfoques en el pasado. La mejora progresiva y el diseño receptivo ya nos permiten crear sitios web compatibles con dispositivos móviles.
Sin embargo, las PWA brindan todo esto y más sin perder ninguna de las características existentes que hacen que la web sea excelente.
¿Qué hace que una aplicación sea una PWA?
Como insinuamos anteriormente, las PWA no se crean con una sola tecnología. Representan una nueva filosofía para crear aplicaciones web, que involucran algunos patrones específicos, API y otras características.
No es tan obvio si una aplicación web es una PWA o no a primera vista. Una aplicación puede considerarse una PWA cuando cumple con ciertos requisitos o implementa un conjunto de características dadas: funciona sin conexión, es instalable, es fácil de sincronizar, puede enviar notificaciones automáticas, etc.
Además, existen herramientas para medir cuán completa (en porcentaje) es una aplicación web, como Lighthouse . Al implementar varias ventajas tecnológicas, podemos hacer que una aplicación sea más progresiva y, por lo tanto, termine con una puntuación de Lighthouse más alta. Pero esto es sólo un indicador aproximado.
Hay algunos principios clave que una aplicación web debe tratar de observar para ser identificada como una PWA. Debería ser:
- Visible , por lo que los contenidos se pueden encontrar a través de los motores de búsqueda.
- Instalable , por lo que puede estar disponible en la pantalla de inicio del dispositivo o en el iniciador de aplicaciones.
- Vinculable , para que puedas compartirlo enviando una URL.
- Independiente de la red , por lo que funciona sin conexión o con una conexión de red deficiente.
- Progresivamente mejorado , por lo que todavía se puede usar en un nivel básico en navegadores más antiguos, pero completamente funcional en los más recientes.
- Se puede volver a conectar , por lo que puede enviar notificaciones cada vez que hay contenido nuevo disponible.
- Diseñado con capacidad de respuesta , por lo que se puede usar en cualquier dispositivo con una pantalla y un navegador: teléfonos móviles, tabletas, computadoras portátiles, televisores, refrigeradores, etc.
- Seguro , por lo que las conexiones entre el usuario, la aplicación y su servidor están protegidas contra cualquier tercero que intente acceder a datos confidenciales.
Ofrecer estas funciones y hacer uso de todas las ventajas que ofrecen las aplicaciones web puede crear una oferta convincente y altamente flexible para sus usuarios y clientes.
¿Vale la pena hacer todo eso?
¡Absolutamente! Con una cantidad de esfuerzo relativamente pequeña requerida para implementar las funciones principales de PWA, los beneficios son enormes. Por ejemplo:
- Una disminución en los tiempos de carga después de que se haya instalado la aplicación, gracias al almacenamiento en caché con los trabajadores del servicio , además de ahorrar ancho de banda y tiempo valiosos. Los PWA tienen una carga casi instantánea (a partir de la segunda visita).
- La capacidad de actualizar solo el contenido que ha cambiado cuando hay disponible una actualización de la aplicación. En cambio, con una aplicación nativa, incluso la más mínima modificación puede obligar al usuario a descargar toda la aplicación nuevamente.
- Una apariencia que está más integrada con la plataforma nativa: iconos de aplicaciones en la pantalla de inicio o en el iniciador de aplicaciones, aplicaciones que se ejecutan automáticamente en modo de pantalla completa, etc.
- Volver a interactuar con los usuarios mediante el uso de notificaciones del sistema y mensajes push, lo que genera más usuarios comprometidos y mejores tasas de conversión.
Vale la pena probar un enfoque de PWA, para que pueda ver por sí mismo si funciona para su aplicación.
Ventajas de las aplicaciones web progresivas
Una aplicación web progresiva totalmente capaz debe proporcionar todas las siguientes ventajas al usuario.
Visibilidad
El objetivo final es que las aplicaciones web tengan una mejor representación en los motores de búsqueda, sean más fáciles de exponer, catalogar y clasificar, y tener metadatos utilizables por los navegadores para darles capacidades especiales.
Algunas de las capacidades ya han sido habilitadas en ciertas plataformas basadas en la web mediante tecnologías patentadas como Open Graph , que proporciona un formato para especificar metadatos similares en el bloque HTML mediante etiquetas.<head><meta>
El estándar web relevante aquí es el manifiesto de la aplicación web , que define las características de una aplicación, como el nombre, el ícono, la pantalla de inicio y los colores del tema en un archivo de manifiesto con formato JSON . Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.
Instalabilidad
Una parte central de la experiencia de la aplicación web es que los usuarios tengan íconos de aplicaciones en su pantalla de inicio y puedan tocar para abrir aplicaciones en su propio contenedor nativo que se siente muy bien integrado con la plataforma subyacente.
Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de propiedades establecidas dentro del manifiesto de la aplicación web y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada instalación de la aplicación web .
Vinculabilidad
Una de las características más poderosas de la web es la capacidad de vincular una aplicación en una URL específica sin necesidad de una tienda de aplicaciones o un proceso de instalación complejo. Así ha sido siempre.
Independencia de la red
Las aplicaciones web modernas pueden funcionar cuando la red no es confiable o incluso no existe. Las ideas básicas detrás de la independencia de la red son poder:
- Vuelva a visitar un sitio y obtenga su contenido incluso si no hay una red disponible.
- Navega por cualquier tipo de contenido que el usuario haya visitado previamente al menos una vez, incluso en situaciones de mala conectividad.
- Controla lo que se muestra al usuario en situaciones donde no hay conectividad.
Esto se logra mediante una combinación de tecnologías: Service Workers para controlar las solicitudes de página (por ejemplo, almacenándolas sin conexión), Cache API para almacenar respuestas a solicitudes de red sin conexión (muy útil para almacenar activos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como como Web Storage e IndexedDB para almacenar datos de aplicaciones sin conexión.
Soporte de mejora progresiva
Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia excelente a los navegadores totalmente capaces y una experiencia aceptable (aunque no tan brillante) a los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas, como la mejora progresiva.
Al usar la mejora progresiva , las PWA son compatibles con varios navegadores. Esto significa que los desarrolladores deben tener en cuenta las diferencias en la implementación de algunas características y tecnologías de PWA entre diferentes implementaciones de navegador.
Reactivación
Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a interactuar con las actualizaciones y el contenido nuevo, incluso cuando no están mirando la aplicación o usando sus dispositivos.
Las aplicaciones web modernas ahora también pueden hacer esto, usando nuevas tecnologías como Service Workers para controlar páginas, la Web Push API para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker y la API de notificaciones para generar notificaciones del sistema para ayudar a involucrar a los usuarios cuando no están usando activamente su navegador web.
Sensibilidad
Las aplicaciones web receptivas utilizan tecnologías como consultas de medios y ventanas gráficas para asegurarse de que sus interfaces de usuario se ajusten a cualquier factor de forma: computadora de escritorio, dispositivo móvil, tableta o lo que venga después.
Seguro
La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y, al mismo tiempo, garantiza que el contenido no haya sido manipulado, siempre que aproveche HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad.
También es fácil para los usuarios asegurarse de que están instalando la aplicación correcta, porque su URL coincidirá con el dominio de su sitio.
Esto es muy diferente de las aplicaciones en las tiendas de aplicaciones, que pueden tener una serie de aplicaciones con nombres similares, algunas de las cuales incluso pueden estar basadas en su propio sitio, lo que solo aumenta la confusión. Las aplicaciones web eliminan esa confusión y aseguran que los usuarios obtengan la mejor experiencia posible.
Como se mencionó anteriormente, las PWA no dependen de una sola API, sino que utilizan varias tecnologías para lograr el objetivo de brindar la mejor experiencia web posible.
El ingrediente clave requerido para las PWA es el apoyo de los trabajadores de servicios . Afortunadamente, los trabajadores de servicio ahora son compatibles con todos los navegadores principales en computadoras de escritorio y dispositivos móviles.
Otras funciones, como el Manifiesto de la aplicación web , las Notificaciones automáticas y la funcionalidad Agregar a la pantalla de inicio , también tienen un amplio soporte. Actualmente, Safari tiene soporte limitado para Web App Manifest y Add to Home Screen y no admite notificaciones web push. Sin embargo, otros navegadores principales admiten todas estas funciones.
Sobre todo, debe seguir la regla de mejora progresiva: use tecnologías que mejoren la apariencia y la utilidad de su aplicación cuando estén disponibles, pero aún así ofrezcan la funcionalidad básica de su aplicación cuando esas funciones no estén disponibles.
Presentar un sitio web confiable con un buen desempeño es una consecuencia del uso de estas mejoras; esto a su vez significa construir aplicaciones web que sigan mejores prácticas.
De esta manera, todos podrán usar la aplicación, pero aquellos con navegadores modernos se beneficiarán aún más de las características de PWA.
Qumulex es un ejemplo de Aplicación Web Progresiva o PWA
QxControl de Qumulex es una versión moderna del software de gestión de video y control de acceso. Con QxControl, los clientes comerciales pueden administrar su seguridad física desde cualquier lugar , en cualquier dispositivo que ejecute un navegador , utilizando una interfaz de usuario intuitiva y cibersegura .
QxControl se implementa como una aplicación web progresiva (PWA), que se ejecuta en todos los dispositivos equipados con un navegador sin comprometer la funcionalidad.
Qumulex utiliza PWA para operar sin problemas en casi cualquier plataforma con una única interfaz unificada. Como tal, ¡poner QxControl en su teléfono es simple!
Abra el navegador de su elección y vaya a app.qumulex.io (para instalaciones en la nube). Inicie sesión con el correo electrónico y la contraseña que ha establecido para este propósito.
En el iPhone, navegue con Safari y haga clic en el ícono de menú «Compartir» que parece un cuadrado con una flecha saliendo de la parte superior. Busque la opción Agregar a la pantalla de inicio y haga clic en ella. Ingrese el nombre que le gustaría ver en el acceso directo y haga clic en Agregar por última vez.
Para Android navegue usando Chrome a la dirección web. Si no se le solicita en la parte inferior que agregue automáticamente a la página de inicio, haga lo siguiente.
Haga clic en el menú de kebab (puntos triples), busque la opción Agregar a la pantalla de inicio y haga clic en ella. Asigne un nombre a su acceso directo y seleccione Agregar una última vez.
Aquí hay ejemplos de cada uno:
Ahora tendrá un ícono que puede usar para hacer clic e ingresar al sitio de Qumulex. Esto le permite experimentar la facilidad de usar una aplicación móvil sin necesidad de descargarla ni configurarla. Seguirás usando el navegador móvil.
