Cuando hablamos de Progressive Web Apps (PWA) nos referimos a un tipo de aplicaciones que podrían definirse como una página web que intenta aprovecharse de las tecnologías para ofrecer una experiencia móvil similar a una aplicación nativa. Por tanto, podríamos decir que las PWA se encuentran a medio camino entre una web y una app, puesto que intentan coger las mejores funcionalidades de cada una.
Ventajas Progressive Web App (PWA)
A continuación podemos ver las características que nos ofrecen las Progressive Web App (PWA):
Contenido fácil de rastrear e indexable
Posibilidad de utilizar notificaciones push.
Optimización del rendimiento en dispositivos móviles.
Velocidad de carga totalmente optimizada
Ofrece la posibilidad de incluir en el escritorio o menú de un dispositivo mobile, un icono que nos lleva directamente a la PWA.
Podemos acceder al portal sin necesidad de disponer de conexión.
Uso del HTTPS para todas las solicitudes.
Progressive Web App (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:
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 más importantes del DOM de una Progressive Web App
Las Progressive Web App 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.
Medir la velocidad de 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.
Un programa que recomendamos para medir la velocidad de una PWA es Lighthouse, una extensión de Chrome desarrollada por Google, que nos permite tener un informe específico sobre el funcionamiento de las PWA.
¿Quieres aprender más sobre le mundo de las app-web y cómo otpimizar el máximo la experiencia del usuario? Te recomendamos el Master en Analítica Web, Usabilidad y Experiencia del Usuario (UX), con el que aprenderás a controlar, medir y mejorar las inversiones de la empresa gracias a un plan de acción y mejora continua.