PWAs - Qué son las Progressive Web Apps

Si las Progressive Web Apps están recibiendo más atención es en gran parte porque se basan en lo mejor de varias tecnologías. Por un lado, recogen lo mejor de la web y por otro, lo mejor de apps nativas. Podríamos decir que este tipo de páginas webs están reduciendo la brecha entre las aplicaciones móviles nativas y las webs.

Actualmente, el éxito de las apps nativas se debe a que son la mejor opción para ofrecer una experiencia de usuario excepcional en los dispositivos móviles, tanto desde una perspectiva visual como en funcionalidades soportadas. Sin embargo, la tecnología en la que se ejecutan tiene sus limitaciones, por ejemplo, la indexación (SEO) de la app en los buscadores debido a los problemas de detección y la instalación obligatoria, lo que puede ser un elemento disuasorio para algunos usuarios.

Para entender mejor las características de las Progressive Web Apps, tenemos que empezar mirando los principios que condicen al concepto, como una Progressive Web App tiene que ser 1)De confianza, 2) Rápida, 3) Atractiva. Asimismo, una PWA trata sobre todo de ofrecer una buena experiencia de usuario. Es con esta visión centrada en el usuario en mente que los desarrolladores están empezado a fijarse en este set de tecnologías web, herramientas y mejores prácticas para establecer nuevos estándares para la web, a través de los dispositivos. 

Para entender mejor todos los detalles, desde el punto de visto tecnologías de las Progressive Web Apps,  halamos con Jean-Mathieu, desarrollador Angular en GoodBarber.
 

Una de las características de las Progressive Web App es su capacidad de funcionar sin conexión. Una vez más, la idea es ofrecer la mejor experiencia al usuario y evitar mostrarle el mensaje de conexión insuficiente. 

Para entregar contenido al usuario sin conexión, un PWA se basa en una particularidad: el "esqueleto" o (the app shell en inglés) de la app, que básicamente llama a la estructura de la página, incluso si el contenido no responde; sus elementos incluyen el encabezado, el diseño de la página así como una clara ilustración de que la página se está cargando. De este modo se informa al usuario de que algo está pasando. Un adelanto si lo comparamos con el mensaje de error que suele aparecer en los sitios web o apps web.

Para desafiar el look and feel de las apps nativas, el diseño de las Progressive Web Apps son "adaptative." Ser responsive es obligatorio para cualquier PWA, sea cual sea la tecnología en la que se encuentran. Para el usuario, esto asegura una transmisión más liviana entre dispositivos, con todas las medidas de pantalla, lo que definitivamente cae en la dimensión de la confianza. 

Este comportamiento cumple con los requisitos del modelo RAIL introducido por Google: Respuesta / Animación / Inhabilitado / Carga -en otras palabras, una Progressive Web App tiene que responder a la solicitud del usuario, mostrar una animación para mantenerlo en espera, inhabilitarlo un momento para almacenar en caché tanto contenido como sea posible y finalmente cargar en menos de un segundo. Con tales promesas, es fácil ver cómo el fenómeno de  las Progressive Web Apps está ganando adeptos en la web en varias industrias. 

Si la instalación de una app nativa puede considerarse como una barrera (en el sentido de que requiere un compromiso extra por parte del usuario), las Progressive Web Apps convierten la instalación de la aplicación en un bonus. En el móvil y en la tableta se le pedirá al usuario que instale la aplicación en la pantalla de inicio del dispositivo. Esta "instalación" está habilitada a través del manifiest de la aplicación, que se alimenta de información del navegador, como puede ser el icono (con el tamaño exacto para cada dispositivo), la pantalla de bienvenida (o el color que se mostrará en la pantalla de inicio), la disposición retrato/paisaje o ambas, y si la app funciona independientemente del navegador.

Las mejoras no se detienen aquí, además de encontrarse en la pantalla de inicio del usuario, también pueden enviar notificaciones push, una de las ventajas clave que ofrecen las apps nativas. Si el desarrollador habilita notificaciones push para su PWA, funcionará como una tarea de fondo para el service worker. Actualmente, las notificaciones push en las PWAs son compatibles con Chrome, Firefox, Opera y Safari en desktop, pero no en móvil.

¿Podríamos interpretar esta  funcionalidad  como una señal de que las Progressive Web Apps son una sólida competencia para app nativas? El tiempo lo dirá…

Para finalizar, las Progressive Web App se basan en lo mejor de la web por lo que buscan una navegación web más segura, con el requisito de ser servido a través de HTTPs.

Asimismo, el HTTPs pronto será un requisito obligatorio en las apps de iOS, en la App Store, incluso si este requisito adicional para las PWA puede ser considerado trabajo extra para los desarrolladores, no es lo que va a impedir que las PWAs desafíen las apps nativas.

Ahora bien, si tenemos que destacar un elemento de las Progressive Web Apps  probablemente diríamos que es el "service worker" ya que este, junto con sus tareas de fondo, gestiona las notificaciones push, la posibilidad de consultar contenido offline, el caché y más... Es decir, las características que convierten un sitio web en una Progressive Web App. Todo esto sin olvidar el "look and feel" nativo del móvil para el usuario.

Si quieres obtener más información sobre las Progressive Web Apps, Google tiene una lista aquí .