Progressive web apps (PWA)

Progressive web apps (PWA) o aplicación web progresiva es una solución basada en la web tradicional que todos conocemos, aunque incorpora algunas particularidades que la hacen parecerse a una app nativa para teléfonos móviles y tabletas. Cada proyecto es independiente y el nivel de adaptación de la web al formato app es progresivo, por lo que puede que visitemos un site con una PWA casi idéntica a una app o quizá sea una web con algunos avances.

Ventajas Progressive Web App (PWA)

La primera ventaja que encontramos con las progressive web apps es que no necesitamos entrar a Google Play o Apple Store para descargar nada. Solo se requiere, al principio, una conexión a internet y un navegador que puede ser Chrome, Safari o Firefox.

El segundo gran avance con la PWA es que cualquier usuario puede ‘instalarla’ en la pantalla de inicio de su dispositivo. Y es que todos hemos tenido, alguna vez, el móvil al borde de capacidad. Hemos borrado fotografías, vídeos o desinstalado aplicaciones porque no cabía nada más. Pero siempre hay espacio para una PWA en cualquier teléfono móvil porque funciona como un acceso directo que te abre la web y recupera el contenido si no hay conexión o lo refresca si el usuario está conectado a la red.

Con la progressive web app, el usuario puede seguir consultando tu web, aunque haya perdido la conexión. Es una de las ventajas que la hacen tan atractiva y que han provocado que tenga una gran aceptación entre los internautas.

La importancia de la fidelización del usuario 

Dos metas importantes a conseguir :

• La captación de usuarios nuevos
• La fidelización de los que ya tenemos reteniéndolos el máximo tiempo posible en nuestro entorno

Conseguir esa fidelización no es una tarea sencilla porque depende de muchos factores como:

• Que el contenido sea el esperado por la audiencia
• La experiencia con la web sea satisfactoria
• Que exista un reconocimiento de marca
• O que se cree una necesidad de visita recurrente

Una de las estrategias que llevamos a cabo para ganar visitas recurrentes es el envío de notificaciones push que permiten recordar al usuario que nuestra web o app está ahí, que tienen contenido nuevo o interesante que deberían conocer.

Afortunadamente las progressive web apps permiten también el envío de notificaciones a los teléfonos móviles como si de una app se tratara. Por el momento, esta tecnología solo está disponible en dispositivos Android, aunque ya hay avances para que se amplíe a los iPhone con iOS. El envío de notificaciones push ha supuesto todo un fenómeno en las webs de contenido en las que se han desarrollado estrategias combinadas entre los distintos departamentos para sacar el máximo rendimiento a un producto o noticia.

Recordatorio de Marca

La recurrencia de la visita del usuario depende de la necesidad que hayamos creado en él, sí. Pero también influyen el recordatorio de marca y la facilidad que tenga para acceder a nuestro sitio. Esta es otra de las ventajas de las progressive web apps que permite ‘instalarla’ en el escritorio del teléfono móvil con una visualización idéntica al icono de una app. Aunque con una ventaja: el usuario no ha instalado nada.

Para conseguir esto, es muy frecuente que desarrollemos un pequeño botón en nuestra web móvil que indique al usuario que puede crear un acceso directo en el escritorio. Ese será el punto de acceso a la PWA y que recordará, cada vez que se pase por esa pantalla, nuestra marca e icono.

Es fundamental que dentro de nuestra estrategia de implementación de la PWA decidamos cuándo es más conveniente mostrarle al usuario que puede crear un acceso directo a la web a través de su pantalla de inicio. Por supuesto, cada audiencia y cada soporte requieren una estrategia distinta.

¿Cómo funciona una Progressive Web Apps (PWA)?

Uno de los elementos más importantes que conforman las PWA es el manifiesto de la aplicación y que está en formato JSON. Este, nos permite controlar cómo se verá nuestra aplicación en áreas donde normalmente los usuarios tienen aplicaciones nativas.

Este archivo o manifiesto contiene lo siguiente:

• Name: Nombre de la aplicación que aparecerá en el menú mobile del usuario.
• Description: Indicar la descripción de nuestra aplicación móvil
• Icons: Crear distintos iconos, con resoluciones distintas, para que de esta manera, se vea bien en todos los dispositivos.
• Start url: URL de inicio cuando abrimos la aplicación
• Display: En este caso, podemos elegir varias configuraciones (standalone, fullscreen, minimal-ui, entre otros)
• Orientation: Cuando hablamos de orientación nos referimos a si queremos que la aplicación web se deba usar en modo retrato o en modo paisaje.
• Theme_color: el color que se usará para la barra superior de la aplicación.
• Background_color: color para la pantalla antes de la carga completa de la aplicación.
• Otro elemento que encontramos es el Service Workers, se trata de uno o varios scripts que funcionan en un segundo plano y que nos permiten generar una experiencia offline, descargando los contenidos imprescindibles para que la aplicación funcione, así como generar notificaciones push.

El Service Workers es realmente importante ya que nos permite optimizar la retención de los usuarios. Hasta la fecha, esta funcionalidad solo la tenían las aplicaciones nativas, pero se ha convertido en una de las funcionalidades más importantes para poder mejorar el retorno del usuario a nuestra app. No obstante, con el aumento de notificaciones en todas las app, esta funcionalidad o característica cada vez queda más oculta.

Además, es importante tener en cuenta que esta funcionalidad no funciona para todos los dispositivos, como es el caso de los dispositivos que utilizan iOS. Podemos comprobar si un sitio utiliza Service Worker mediante Chrome, realizando los pasos siguientes:

• Abrir la página https://billingsgazette.leeaws.com/pwa/
• Hacer clic con el botón derecho y darle a inspeccionar
• Ir a la pestaña “Application” y “Service Workers”
• Podemos ver que el Service Workers está activo
• Si nos fijamos en el apartado “Cache Storage”, podremos ver los archivos que han sido descargados y cacheados por el Service Worker.

Tener la posibilidad de usar el portal sin tener conexión es un gran avance, pero implica que deberemos desarrollar un sistema para recabar todos los datos obtenidos de la navegación offline, y que estos, sean mandados a Google Analytics o cualquier otro programa de medición de datos que estemos utilizando.

Elementos importantes del DOM de una PWA

Las Progressive Web Apps se componen de dos partes principales, el App-Shell, que hace referencia a la estructura de la página y el contenido, que puede variar entre las distintas páginas de nuestra aplicación.

Dependiendo de la tecnología que se haya usado para desarrollar la página, el contenido se puede mandar desde el servidor en formato de código HTML o mediante script JSON, sin embargo, a la hora de utilizar JSON debemos ir con cuidado, ya que esta técnica nos puede dar problemas de indexación en caso de que se implemente mal. Este detalle es importante tenerlo en cuenta, sobre todo para a lo que el SEO se refiere.

La importancia de medir una PWA

El principal beneficio de las PWA son su peso, se trata de páginas que completas pueden tener un peso de menos de 1MB, ofreciendo una experiencia veloz para los usuarios. Esto aporta una gran ventaja al mundo mobile-first al que nos encontramos.

En definitiva, la fidelización del usuario a través de los push, el acceso directo, la UX y la velocidad de carga son las grandes ventajas de las progressive web apps, que te ayudarán a que tu web siga ganando relevancia. Miles de negocios de todo el mundo han identificado estos avances y ya están trabajando con ellos para lograr el mayor número de ventas posibles en este mercado tan competido.

¿A qué esperas para aprender a desarrollar PWAs?