¿Y, por qué han cobrado gran importancia?
Mientras que visitar los sitios de internet tradicionales es un proceso rápido y sencillo, lo cierto es que suelen ofrecer una experiencia de usuario mucho más pobre que las aplicaciones. Por su lado, las apps nativas, es decir, las que se instalan en el teléfono, proporcionan una mejor experiencia a los usuarios, pero están limitadas por las características del terminal y del sistema operativo. El hecho de que sea necesario descargarlas implica que los consumidores tienen que poner un mayor empeño inicial, que luego se pierde al decaer esta impulsividad con el tiempo.
Es por ello que una PWA es una buena alternativa para desarrollar nuestra aplicación, debido a que son capaces de ofrecer las mismas prestaciones y experiencia de usuario que las nativas, siendo más eficientes al ocupar menos espacio en la memoria del teléfono y consumiendo menos datos.
¿Para qué sirve una Progressive Web Application?
Explicado de manera sencilla, las PWA funcionan como las apps habituales, debido a que se basan en un entorno que permite el mismo estilo de navegación y de interacción gestual que estas herramientas. La principal diferencia es que no es necesario descargarlas de ninguna tienda de aplicaciones, ya que se ejecutan directamente en el navegador.
A continuación, detallamos las principales características de esta tecnología:
- Progresiva: funciona para todos los usuarios, sin importar la elección de navegador, porque está construida con mejora progresiva como principio central.
- Adaptable: se adapta a cualquier factor de formulario, sea escritorio, móvil, tablet o lo que venga en el futuro.
- Independiente de la conectividad: mejorada con service workers para trabajar sin conexión o con redes de mala calidad.
- Estilo app: al usuario le parece una app con interacciones y navegación estilo app, porque está construida con modelo de shell de app.
- Fresca: siempre actualizada gracias al proceso de actualización de service worker.
- Segura: emitida vía HTTPS para evitar intromisiones y para garantizar que el contenido no se haya manipulado.
- Descubrible: se puede identificar como «app» gracias al manifiesto W3C y al alcance de registro de service worker, lo que permite que los motores de búsqueda la encuentren.
- Posibilidad de volver a interactuar: facilita la posibilidad de volver a interactuar a través de funciones como notificaciones push.
- Instalable: les permite a los usuarios «conservar» las apps que les resultan más útiles en su pantalla principal sin la molestia de una tienda de app.
- Vinculable: se puede compartir fácilmente vía URL, no requiere instalación compleja.
De hecho, una progressive web app puede considerarse una evolución de las aplicaciones web como las ofrecidas por HTML5 y la tecnología de los service workers, que permite ejecutar servicios en segundo plano en los navegadores. Gracias a la combinación de estas herramientas, las PWA pueden cargarse casi al instante, incluso en zonas con escasa conectividad. Además, estas aplicaciones utilizan estándares abiertos y se desarrollan con lenguajes de programación y plantillas similares a las empleadas aplicaciones web tradicionales.
Así, uno de los pilares básicos de una progressive web app es la conocida como application shell architecture o app shell, un modelo que permite crear una PWA que se carga en la pantalla rápidamente, de manera similar a las aplicaciones nativas. La app shell no es otra cosa que el esqueleto o estructura básica de la aplicación, aquella que permite activar la interfaz de usuario y en la que se cargará el contenido.
Una vez abrimos una PWA, este paquete básico se almacenará en la memoria caché del navegador y utilizará un service worker para que esta funcione. A partir de entonces, como ya tendremos los componentes necesarios para poner en marcha la app, podremos volver a abrir la progressive web app de forma rápida y sin necesidad de tener una conexión a internet en las siguientes visitas, asegurando un mayor rendimiento y fiabilidad.
Gracias a estas tecnologías que permiten su ejecución en segundo plano, es posible no solo usarlas en el navegador, sino también añadirlas al móvil como si fuera una aplicación nativa más, pero ocupando mucho menos espacio en el teléfono que estas. Al fin y al cabo, lo único que estamos instalando es el service worker encargado de almacenar caché y asegurarse que la herramienta sigue funcionando aunque la conectividad sea inestable.
¿Cuáles son las ventajas de una PWA frente a otras opciones?
Una progressive web app presenta numerosas ventajas frente a las aplicaciones nativas y las aplicaciones web tradicionales. Respecto a las primeras, son mucho más eficientes al ocupar menos espacio en la memoria del teléfono y consumir menos datos, todo ello ofreciendo las mismas prestaciones y experiencia de usuario que las apps nativas.
Además, utilizar una PWA permite probarla antes de instalarla (si es que así se desea) y ahorrar el tedioso proceso de descarga y la toma de decisiones relativas a la instalación o desinstalación de la herramienta, acelerando los trámites y eliminando pasos innecesarios.
Desde el punto de vista de los desarrolladores, la creación y mantenimiento de una progressive web app resulta más económico y sencillo que en el caso de las aplicaciones nativas. Tanto confeccionarlas como actualizarlas es mucho más rápido y no es necesario crear una versión de la PWA para cada tipo de dispositivo, sino que una sola basta para ejecutarse y visualizarse adecuadamente en todo tipo de pantallas, por eso también tardan menos en cargarse. Ni siquiera precisan discernir entre Android o iOS, puesto que funcionan en navegadores comunes a los dos sistemas operativos.
Otros de los motivos para su adopción es que ofrecen una mayor seguridad frente al malware, pues los atacantes lo tienen más difícil para acceder a ciertas partes del sistema, y que permiten enviar notificaciones push a los usuarios que pueden mostrarse en pantalla completa, por lo que el usuario pierde de vista el navegador mientras las utiliza.
¿Cómo asegurar una buena UX en el desarrollo de nuestra Progressive Web App?
Como hemos comentado, una PWA puede ser una buena opción para desarrollar nuestra aplicación, pero si no tenemos en cuenta ciertos aspectos a la hora de diseñarla con el objetivo de proporcionar una buena experiencia de usuario, es posible que nuestra app no tenga el éxito esperado.
A pesar de que el proceso de diseño de una PWA puede ser similar al de una aplicación nativa, existen ciertas peculiaridades a las que debemos prestar atención y que reunimos a continuación:
Enfoque nativo
Es importante que el diseño de una PWA tenga el aspecto y sensación de una aplicación nativa para que el usuario se sienta totalmente familiarizado.
Evitar transiciones lentas de pantalla por bloqueos en la red
Los problemas de transición entre pantallas en una PWA pueden darse cuando los usuarios tocan un elemento interactivo, tienen que esperar y mirar fijamente la pantalla en la que se encuentran antes de ser redirigidos de repente a la nueva pantalla deseada.
Esto hace que el usuario se sienta molesto al no recibir respuesta inmediata. Por ello, una PWA debe evitar esta sensación, proporcionando al usuario la percepción de que toda la aplicación se almacena localmente en el dispositivo y que sólo el contenido es el que se carga dinámicamente. Para ello, debemos recurrir al uso de pantallas esqueléticas.
Las pantallas esqueléticas son básicamente pantallas vacías que se muestran después de una interacción del usuario y cuyo contenido se carga gradualmente como podemos observar en el siguiente ejemplo: