Qué es PWA: características, tecnologías, ventajas y desventajas

Cada vez es más habitual escuchar que una empresa tiene una Progressive Web App, pero… ¿realmente sabemos qué es? En este post veremos qué es, cuáles son sus características, las tecnologías que emplea, sus ventajas y desventajas y, en definitiva, todo lo que convierte una PWA en una opción muy interesante para desarrollar un proyecto.

PWA (Progressive Web App) no es un término nuevo (Google lo introdujo en 2015), pero es desconocido para muchas personas. Las PWA se definen comúnmente como las Apps que reúnen lo mejor de las aplicaciones web y de las nativas, incluso llegando a ser entendidas como un punto medio o una forma evolucionada.

La base son páginas webs, pero utilizan tecnologías que hacen que su estética y funcionamiento se asemejen enormemente a una App nativa, por ejemplo, mediante la ejecución en segundo plano. Se accede a ellas a través de un navegador, pero se puede anclar un acceso directo en nuestro dispositivo (en la pantalla de inicio o en el menú de aplicaciones). No dependen de sistemas operativos (se ejecutan en el navegador) y van incorporando funcionalidades nativas del dispositivo.

Para entender en mayor profundidad qué ofrece una Progressive Web App y, por tanto, en qué se diferencia de otro tipo de aplicaciones o de las webs comunes, pasamos a señalar algunas de las características que la definen:

En la actualidad, la mayoría de webs cuentan con diseño responsive que las permite adaptarse a diferentes dispositivos, algo imprescindible con el papel predominante de los smartphones. A pesar de que las PWA van más allá del simple diseño responsive, este se puede seguir mencionando como una de sus características principales. Estas Apps deben adaptarse automáticamente a cualquier formato, navegador o dispositivo (con los consecuentes cambios de medidas y resolución), y más considerando la naturaleza mobile de las mismas.

Las PWA siempre mostrarán su última versión al usuario, con el empleo de actualizaciones automáticas, de manera constante e instantánea y sin necesidad de descargarlas. Esto es posible gracias al empleo de Service Workers y porque no deja de ser una web App, independiente de la publicación (y todo el proceso de revisión e instalación por parte del usuario que conlleva) en los markets de aplicaciones.

Se usa siempre el protocolo seguro HTTPS que, además, es necesario para la instalación del Service Worker. Esto posibilita asegurar que el acceso sea seguro y que el contenido servido no haya sido sujeto a manipulaciones. Se emplean tecnologías como TLS para el cifrado web.

Por lo general, una PWA tiene la velocidad, tanto de carga como de navegación, optimizada. Esto permite que los contenidos se muestren al usuario prácticamente al instante, ya que se apoyan en el almacenamiento en la caché. Las interacciones, tales como clics o scroll, también deben ser inmediatas. El menor peso de la Progressive Web App en comparación a la App nativa es un factor decisivo para ello.

Una PWA debe permitir el acceso, ya sea de manera parcial o incluso total, a pesar de que no haya conexión a Internet (o esta sea de baja calidad).
Para que se pueda servir contenido a los usuarios que estén offline, se utilizan los service workers y el almacenamiento en caché de la información esencial para iniciar la App, que se realiza desde la primera vez que esta se abre. Así, en las visitas posteriores, se puede disponer de cierto contenido independientemente de la red. Esto se basa, a la vez, en la “App shell”, es decir, la estructura básica de la App, que se podrá mostrar aunque existan problemas con el contenido. Todo ello deriva en una mejor experiencia de usuario y evita la frustración que genera la imposibilidad de acceso.

En su desarrollo, la tecnología utilizada contempla su ejecución en diversos dispositivos, sistemas operativos y navegadores. Esto, además de ser clave a la hora de ofrecer una experiencia de usuario satisfactoria y alcanzar a más público potencial, supone facilidades para los desarrolladores y permite abaratar costes, puesto que no se requieren programaciones diferenciadas (algo que sí ocurre con las Apps nativas).

El contenido de una PWA es rastreable e indexable, de forma que pueda aparecer como resultado en un buscador. Además, esta se puede compartir mediante una URL, con la posibilidad de que la otra persona la utilice sin necesidad de instalarlo.

Las webs a las que se acceda desde el navegador que dispongan de una versión PWA suelen informar al usuario, invitándole a “añadirla a su pantalla de inicio”. Estas aplicaciones se pueden utilizar desde el navegador, pero también se pueden instalar en el dispositivo. Esta instalación no requiere de una “descarga” tal y como la conocemos, sino que se basa en la inclusión de un acceso directo en la pantalla de inicio o escritorio de nuestro dispositivo. Este se muestra como un icono más, prácticamente idéntico al de cualquier App nativa.

La interfaz de usuario y, en general, la apariencia de una PWA es muy similar a la de las Apps nativas, tanto en estética como en la manera de interactuar y navegar por ella. A esto contribuyen elementos como una pantalla de inicio, que se ejecute en una ventana de aplicación propia, totalmente responsive, que ocupe la pantalla por completo (sin la barra que muestra la URL), etc.

Con la evolución de las PWA, han ido adquiriendo opciones que antes se reservaban únicamente a las Apps nativas, como el acceso a distintas funciones del dispositivo.
Las Progressive Web App pueden, por ejemplo, acceder a la geolocalización del dispositivo, al Bluetooth, sincronizarse en segundo plano o enviar notificaciones push (incluso cuando no está abierta la PWA). Estas notificaciones son una potente herramienta de comunicación que permite informar al usuario e invitarle a acceder, aumentando las visitas y, en consecuencia, las conversiones. Se debe considerar que estas posibilidades no están disponibles para todos los navegadores.

Para entender en mayor profundidad el funcionamiento de las PWA, es interesante mencionar las tecnologías y métodos de trabajo en los que se sustenta su desarrollo. Siguiendo a Google, los requisitos en esta materia que debería cumplir una Progressive Web App son cuatro:

En Android y Chrome se utiliza un archivo JSON muy sencillo, conocido como Manifiesto. Este permite especificar diversas características para controlar cómo se visualizará la App tras ser instalada. Algunas de las informaciones que contiene son:

• Nombre (name y short_name)
• Icono (icons), lo que se ve en la pantalla de inicio o menú tras instalarla
• Colores (theme_color para la barra superior y background_color para la pantalla de carga de la App)
• Orientación (orientation), es decir, si la App se mostrará en horizontal o en vertical
• Descripción (description): breve descripción de la App
• URL que se iniciará al abrir la App (start_url)
• Display (display), con distintas configuraciones para la pantalla

La tecnología de service workers es una especie de proxy entre el servidor o la red y el dispositivo o la aplicación. Es un JavaScript que se instala en el navegador y funciona detectando eventos. Requieren del uso de HTTPS.
Funcionan independientemente de la aplicación, en segundo plano y sin importar que esta esté cerrada. Gracias a ellos, la Progressive Web App puede ser utilizada sin conexión, puesto que se guardan datos en caché y hace un almacenamiento offline. Además de esto, permiten enviar notificaciones push.

La PWA debe servir todas las solicitudes sobre HTTPS, puesto que es necesario confirmar que funcione bajo un protocolo de seguridad. Además, para la instalación del service worker termina siendo un paso fundamental, ya que estos almacenan mucha información, por lo que se debe navegar de forma cifrada para mantener la protección.

Necesario para mostrar el acceso directo en el cajón de aplicaciones o la pantalla de inicio del dispositivo. Va estrechamente vinculado al manifiesto de la aplicación mencionado previamente. 

Es igualmente interesante mencionar App Shell. La idea se basa en que una Progressive Web App se podría dividir en dos grandes bloques: estructura de la App y contenido. Por tanto, este modelo consiste en que la App shell (la interfaz básica, la parte funcional) se almacene en la caché del service worker la primera vez que la App se inicie. De este modo, esta estructura se podrá visualizar sin conexión y hace que el tiempo de carga parezca menor, ya que el usuario accede a la estructura de forma muy rápida. El contenido se carga por otro lado, que puede ser desde la propia web o también cargado en caché, en cuyo caso se deberá esperar a una red para que sea actualizado.
Por último, como ya se ha mencionado antes, el diseño responsive es esencial, ayudando a que la App se asemeje a una nativa, con elementos como animaciones CSS o frameworks.

Tras mencionar las principales características de una PWA, es muy sencillo entender de dónde procede su protagonismo y, con ello, cuáles son sus ventajas. Enumeramos a continuación las más destacables:

• Bajo coste: el coste que suponen el desarrollo, el mantenimiento y las actualizaciones es menor que las Apps nativas. Esto se debe a que la programación es más sencilla y no requiere diferentes versiones en función del navegador o dispositivo.
• Requieren menos recursos: las Progressive Web App ocupan menos espacio que las Apps nativas a pesar de que el funcionamiento y el aspecto pueden llegar a ser muy similares. Por este motivo, el uso de estas aplicaciones resta una barrera muy importante para muchos usuarios.
• Son seguras: se basan en protocolos de navegación web segura, como HTTPs y TLS.
• Son indexables: aparecen en los motores de búsqueda, con lo que es fácil alcanzar a numerosos usuarios y mejorar el posicionamiento SEO.
• Son enlazables: se pueden compartir de forma sencilla, con lo que existen más posibilidades de impactar a un número de usuarios más amplio.
• Siempre están actualizadas: con lo que se asegura que todos los usuarios accedan a la última versión y a los contenidos más relevantes, sin necesidad de descargar nada.
• Disponibles en la pantalla de inicio: el acceso es rápido y sencillo a través del icono que se deposita en el menú o pantalla de inicio, consiguiendo una visibilidad relevante para el usuario. Todo ello, sin necesidad de pasar por ninguna tienda de aplicaciones ni realizar procesos de instalación que puedan resultar tediosos o que ocupen más espacio del deseado o necesario.
• Acceso sin conexión: cuentan con funcionamiento offline o con poca conectividad. Con los datos guardados en la memoria caché, se puede mostrar el contenido cargado previamente. Esto mejora la experiencia del usuario.
• Similar a una App nativa: el aspecto puede asemejarse mucho a una App nativa, proporcionando una sensación de confianza al usuario, que sentirá que se trata de “algo conocido”. Además, como se ha comentado previamente, puede utilizar diversas funcionalidades propias del dispositivo, haciendo que su uso sea lo más completo posible.
• Notificaciones: derivado de la posibilidad de utilizar funcionalidades nativas, se encuentra la opción de enviar notificaciones push. Esto supone una llamada de atención al usuario, consiguiendo que recuerde la PWA y acceda de nuevo a ella. Mejoran la comunicación, el engagement, la fidelización y la conversión. Los usuarios se mantienen informados, pueden acceder inmediatamente clicando en la propia notificación y terminan por pasar más tiempo en la PWA.
• Marketing y comunicación: además de las notificaciones, el simple hecho de tener de manera constante en un teléfono móvil el acceso a una PWA, supone una presencia de la marca más notoria en la vida del usuario. A esta visibilidad contribuyen el acceso simple y la posibilidad de fidelizar a los clientes o consumidores.
• No depende de los markets de aplicaciones: no es necesario que sea publicada en ellos, con lo que se evitan los tiempos de espera causados por las revisiones y se disminuyen costes y barreras de instalación. Se accede de manera sencilla mediante la web, un enlace o un código QR, por ejemplo.
• Son rápidas: se reduce el tiempo de carga y navegación, lo que supone mayor satisfacción para el usuario.
• Son responsive: su diseño se adapta a cualquier dispositivo y navegador.

Si bien es cierto que la mayoría de características de una PWA la convierten en una opción muy interesante, existen ciertas desventajas. Estas son mínimas, pero se hace necesario considerarlas a la hora de plantearnos su implementación.

• No aparecen en las tiendas de aplicaciones: Que las PWA se encuentren a través de un buscador ha sido determinado como una ventaja por la amplitud de público a la que se puede llegar. Sin embargo, muchas personas solo pretenden encontrar Apps a través de los markets. En ese caso, cuando el usuario busca la aplicación, lo hace de manera totalmente consciente y con predisposición a instalarla. Es posible que al realizar una búsqueda web no tengan intención de añadir nada a su smartphone, visitando simplemente una página concreta para satisfacer una necesidad específica. De hecho, al no ser las Progressive Web App tan conocidas por el usuario, puede que lo asocien a una aplicación corriente y descarten la posible instalación.
• Consumen mucha batería: Los códigos que emplean son web, por lo que terminan por consumir más batería que una App nativa, que emplea códigos específicamente diseñado para el dispositivo. Es necesario considerar que se trata de un punto negativo destacable, que puede hacer que ciertos usuarios descarten su uso o que lo disminuyan notablemente, sobre todo al estar fuera de casa o en algún sitio sin posibilidad de carga.
• El uso de funcionalidades nativas es limitado: Que las Progressive Web App puedan utilizar determinadas funciones nativas (y evolucionen en este aspecto) es algo positivo, ya que no en todos los casos se necesitará abarcar tantas tareas. Sin embargo, esto sí limita el empleo de PWA para ciertas Apps en relación a su fin. Si esta va estrechamente asociada a una funcionalidad como el uso de NFC o de los contactos del teléfono, se deberá descartar esta opción y apostar por el desarrollo de una App nativa, que ofrecerá un margen de actuación mucho más amplio.
• El público está acostumbrado a Apps nativas: A muchas personas les cuesta aceptar cambios: no todo el mundo es dado a probar opciones que para ellos son nuevas. Si a esto le sumamos el desconocimiento general que existe sobre estas tecnologías, puede que gran parte del público tenga dudas sobre el proceso y la finalidad y, por tanto, resulte reacio a dar el paso. Una breve explicación en la web antes de ofrecer la posibilidad de instalar la PWA puede ser de gran utilidad para romper o minimizar esta barrera.

Como se puede observar, las desventajas mencionadas son mínimas en comparación a todas las ventajas de una Progressive Web App. Sin embargo, es necesario mencionar como inconveniente destacado que esta tecnología no es soportada por la totalidad de navegadores, por lo que habrá que estudiar su posible impacto y aceptación en base a los exploradores que utilice nuestra audiencia.

En definitiva, la decisión de implementar una PWA pasa por considerar factores como el presupuesto o las necesidades de nuestro público, por lo que será clave estudiar cada caso concreto en profundidad para determinar la estrategia más adecuada.

Desde Digital55 podemos ayudarte a desarrollar una PWA. ¿Tienes algún proyecto en mente con el que podamos echarte una mano?