¿Qué es una PWA?

¿Qué son las PWA?

Si bien no se trata de una tecnología nueva, han cobrado importancia debido a que cada vez son más los programas que, como Google Chrome, Firefox y Safari, las admiten. A esto se suma que Microsoft ya ha comenzado a incluir algunas PWA en su tienda, listas para ser utilizadas tras la última actualización de su sistema operativo Windows 10. Cada vez son más las compañías que, como Twitter, Skyscanner, Trivago, Tinder o Starbucks, se han lanzado a explorar el potencial de las progressive web apps

Para conocer mejor a qué nos referimos cuando hablamos de una progressive web app, comenzaremos indicando qué NO es una PWA:

• No es una extensión de navegadores web
• No es un plugin o librería para los frameworks
• No es un framework como React, Angular o Vue.js
• No es sólo Responsive Design
• No es parecido a React Native, Native Script o Ionic

Una PWA puede definirse en resumidas cuentas como una aplicación móvil accesible a través del navegador. Se trata de un punto intermedio entre las aplicaciones webs y las nativas, aprovechando las mejores prestaciones de cada una de ellas: diseño responsivo, posibilidad de instalarla en el dispositivo, acceso offline, siempre actualizada gracias al uso de Service Workers, indexable desde el navegador y enlazable mediante URL, acceso a las funciones nativas del dispositivo móvil…
Ilustración sobre las progressive web apps.

¿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:

Mostrar interacción

Cuando el usuario interactúa con los elementos de la interfaz de nuestra app, debe tener la sensación inmediata de que el toque fue reconocido. Para ello, debemos resaltar el elemento seleccionado con otro color diferente o con alguna animación.

El contenido no debe saltar mientras se carga la página

Para que el navegador pueda diseñar la pantalla correctamente aunque la imagen no se haya cargado, es importante que todas las etiquetas img en nuestra PWA tengan la dimensión de la misma definida. De lo contrario, el contenido de la pantalla saltará cuando se descarguen las imágenes afectando negativamente a la experiencia de usuario.

Para evitar esto, podemos mostrar un marcador de posición donde se mostrará la imagen mediante un recuadro gris o una miniatura difuminada como se muestra a continuación:

Conservar la posición exacta de desplazamiento de la lista

Cuando un usuario selecciona un elemento de una lista y visualiza su detalle, al pulsar sobre la opción “atrás” debe regresar a la página de la lista con la misma posición de desplazamiento con la que estaba antes de presionar el elemento. Esto incrementa el nivel de satisfacción de la experiencia de usuario a la hora de interactuar sobre todo con listas grandes.

Proporcionar opción de compartir

En el caso de que nuestra PWA muestra información que pueda ser de interés para compartir, es importante asegurarse de que el usuario pueda compartir fácilmente lo que está viendo en ese momento mediante un botón que permita copiar la URL al portapapeles o compartirla en redes sociales populares de forma sencilla y ágil

Deshazte del pie de página

El pie de página es algo común en las páginas web. Sin embargo, cuando desarrollamos una PWA desde un dispositivo móvil, este elemento ocupa demasiado espacio para contener siempre la misma información en todas las páginas.

Las aplicaciones nativas, por estas razones no disponen de pie de página y nuestra PWA debe seguir el mismo ejemplo.

Podemos aprovechar ese espacio para añadir una barra de navegación con los elementos de navegación más relevantes.

Usar fuentes del sistema

Una PWA es accesible desde muchas plataformas distintas, las cuales tienen una fuente recomendada a la cual los usuarios ya están acostumbrados. Hacer uso de las mismas en nuestra PWA favorece una experiencia de usuario mucho más habitual y cercana.

No ocultar entradas de texto por el teclado

Cuando un usuario toca un campo de entrada de un formulario, el teclado se abre para que pueda insertar texto. A veces, el teclado al abrirse oculta esa entrada haciendo que el usuario no tenga visible el texto que está escribiendo, lo cual resulta muy molesto. En nuestra PWA debemos intentar desplazarnos a diferentes posiciones en la página y luego tocar el elemento de entrada de texto para que éste nunca esté oculto.

Auditando tu PWA con Google Lighthouse

Y una vez que he desarrollado mi PWA, ¿cómo puedo saber si todas sus funciones han sido implementadas correctamente? Google nos puede echar una mano comprobándolo a través de Google Lighthouse.

Google Lighthouse es una herramienta de auditoría open-source de sitios web lanzada por Google a principios de 2018. Utiliza un conjunto de 5 parámetros para clasificar un sitio web en una escala de 0 a 100.

En relación a las PWA, proporciona un conjunto de métricas basadas en requisitos relacionados con la velocidad, seguridad, rendimiento fuera de línea, almacenamiento en caché, notificaciones push, indexación, diseño responsivo y la experiencia de usuario, entre otros.

Lighthouse prueba si tu aplicación:

• Se puede cargar en condiciones de red fuera de línea o inestable
• Es relativamente rápida
• Se sirve desde un origen seguro
• Utiliza las buenas prácticas en relación a la accesibilidad