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

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.

Image

¿Qué tecnologías emplea una PWA?

Image

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:

Manifiesto de la aplicación

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

Service workers o trabajadores de servicio

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.

Icono

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.

Image

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.

HTTPS

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.

Image

Ventajas de las PWA

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:

1

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.
2

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.
3

Son seguras

Se basan en protocolos de navegación web segura, como HTTPs y TLS.
4

Son indexables

Aparecen en los motores de búsqueda, con lo que es fácil alcanzar a numerosos usuarios y mejorar el posicionamiento SEO.
5

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.
6

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.
7

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.
8

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.
9

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.
10

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.
11

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.
12

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.
13

Son rápidas

Se reduce el tiempo de carga y navegación, lo que supone mayor satisfacción para el usuario.
14

Son responsive

Su diseño se adapta a cualquier dispositivo y navegador.
No Internet Connection