PWA (Aplicación web progresiva)
Contenido
¿Qué es una PWA o aplicación web progresiva?
Las aplicaciones web progresivas o PWA por sus siglas en inglés (Progressive web apps), son aplicaciones web que se ven, se sienten y actúan como aplicaciones nativas, pero que se ejecutan en el navegador como cualquier página web.
En este contexto, en lugar de distinguirse claramente de las aplicaciones nativas que descargamos en el móvil y las aplicaciones web a las que accedemos mediante el navegador, las PWAs se ubican a medio camino entre ambas, con el objetivo de brindar una experiencia de aplicación similar a la nativa, mientras se mantiene una base de código única, ejecutable en cualquier dispositivo.
Así pues, por una parte, podemos decir que una aplicación nativa es aquella que se ejecuta directamente en un dispositivo, sea un smartphone, una desktop, etc. Y como ha sido diseñada para una plataforma específica, permite aprovechar al máximo todas las capacidades del dispositivo.
Por otra parte, las aplicaciones web están constituidas, precisamente, para ejecutarse en la web a través de los navegadores, y, por ende, pueden utilizarse en cualquier dispositivo que pueda acceder a un navegador sin la necesidad de mantener una base de código específica para el dispositivo. Sin embargo, este tipo de aplicaciones tiene funciones más limitadas y no consiguen sacar provecho de las capacidades máximas de los equipos.
Es aquí donde entran en juego las bondades de las aplicaciones progresivas, pues como ya se comentó, son una mezcla de ambos tipos de apps: están diseñadas para su uso en navegadores (empleando tecnologías HTML, CSS y Javascript) pero además pueden acceder al hardware de los dispositivos, enviar notificaciones y funcionar tal como lo haría cualquier aplicación nativa.
Ejemplo de una PWA en trivago.com
Características de las PWAs
Cualquier aplicación web es capaz de convertirse en una aplicación web progresiva, ya que se cimientan sobre la misma tecnología: HTML, CSS y Javascript. Sin embargo, una PWA se comporta y funciona muy diferente a los sitios web en muchos aspectos.
A nivel estructural, una PWA contiene un archivo de manifiesto en formato JSON, el cual alberga los metadatos de la app, tales como: el nombre y el ícono, entre otros más. Este manifiesto permite que la aplicación se pueda añadir a la pantalla de inicio de cualquier dispositivo y que la usuaria/o interactúe con ella como con cualquier aplicación nativa, es decir, se abra como tal, aunque sencillamente se trate de una pestaña del navegador.
Además, las PWAs deben ser muy ligeras para que puedan equipararse con el rendimiento de las apps nativas. Por ello, deben cargar con rapidez mientras entregan la misma experiencia en cualquier dispositivo sin importar si una usuaria/usuario se conecta desde un smartphone o desktop. Todo esto se logra, en gran medida, gracias a los micro servicios.
Siguiendo esta línea, un micro servicio es una manera de dividir las funciones de una app entre diversas tareas pequeñas que se ejecutan de manera independiente al resto de la aplicación. Mayormente, se aplican en el procesamiento de tareas o para enviar y recibir datos, aunque también proporciona funcionalidades offline a las mismas aplicaciones.
A estas tareas se las conoce como trabajadores de servicio, es decir, un tipo de trabajador web que se trata como un subproceso separado del navegador, lo que los vuelve útiles para tareas informáticas intensas o cuando las conexiones son pésimas.
Así y para no deteriorar la experiencia de usabilidad, estas tareas se descargan para procesos que operan en segundo plano y que, al culminar la tarea, la app puede recuperar el resultado sin perjudicar el rendimiento.
Sabiendo esto, los trabajadores de servicio o subprocesos se instalan en un dispositivo, utilizando una API de trabajador web estándar que se encarga de, entre muchas otras funciones, monitorear y enviar notificaciones automáticas. De esta forma, la experiencia de usabilidad no se ve perjudicada y, además, cuando se buscan nuevas notificaciones, puede ejecutarse incluso en segundo plano.
¿Para qué se utiliza una PWA?
Las aplicaciones web progresivas se utilizan, por lo general, con apps que funcionan como software de servicios almacenados en la nube. De hecho, están pensadas para poder acceder a ellas donde sea y desde cualquier dispositivo.
Un ejemplo muy conocido de una aplicación progresiva es Facebook, pues cuando sus usuarias/usuarios visitan el sitio web desde un dispositivo compatible con la PWA, se despliega una notificación que permite a la usuaria/o instalar la extensión de Facebook como si fuera una app en el dispositivo e incluso añade un ícono a la pantalla de inicio donde se muestra la pestaña de Facebook en el navegador.
Así pues, las PWAs son de interés para cualquier marca, ya que pueden incrementar la participación de las usuarias y usuarios en un sitio web, así como también puede disminuir la tasa de rebote si se compara con un inicio de sesión típico en cualquier sitio web.
¿Cómo funcionan las aplicaciones progresivas?
Las PWAs se construyen sobre numerosas tecnologías adicionales para proporcionar la experiencia y funcionalidad de una aplicación nativa. Es por ello que, además del manifiesto o los trabajadores de servicio, algunas hacen uso del almacenamiento web o la tecnología Web Assembly, entre muchas otras más.
Por ejemplo, el almacenamiento web proporciona una funcionalidad de alojamiento de base de datos (clave-valor), utilizando el sistema de almacenamiento local del mismo dispositivo, facilitando de este modo el guardado de datos por sesión y también de los constantes.
Esto no solo permite descargar los datos guardados en el dispositivo de la usuaria/o, sino que también incrementa la velocidad de su recuperación, así como también mejora su funcionamiento mientras la persona está desconectada.
Por otro lado, la Web Assembly permite que el código precompilado se ejecute en un navegador. Esto significa que los códigos escritos en lenguajes como el C, C++ y Javascript se pueden utilizar en la PWA, lo cual resulta de gran ayuda junto con los webs workers porque de este modo, las aplicaciones progresivas pueden traspasar tareas que requieren de un uso intensivo del procesador de los dispositivos de las usuarias/os hacia servidores remotos y lenguajes de programación que son más eficientes que Javascript en tareas específicas, todo ello sin ralentizar la experiencia del usabilidad.
Importancia de las PWAs en el SEO
Las aplicaciones web progresivas no generan un beneficio inherente en el SEO, pero la correcta implementación de las buenas prácticas puede asegurar que una PWA esté tan bien optimizada para el SEO como el mismo sitio web.
Con todo, las desarrolladoras/es deben ser cuidadosas/os con sus optimizaciones, pues existe un problema que afecta a las aplicaciones de una página y consiste en lo expresado a continuación.
Se sabe que los sitios web tradicionales se procesan en un servidor y envían el documento HTML completo a la app cliente. Ahora bien, cuando el o la navegante cliquea en un enlace, se lo reenvía a una página diferente, la cual carga un nuevo documento HTML que, a su vez, es escaneado e indexado por los buscadores durante su análisis de contenidos, como las keywords, para luego incluirlos en sus resultados de búsqueda.
Sin embargo, una PWA y una aplicación de una sola página mueven la mayor parte del renderizado al lado del cliente, mientras que los nuevos datos se actualizan en vivo y en unidades discretas sin que la usuaria o usuario tenga que refrescar la página completa.
Inicialmente, esto causó problemas con los buscadores, puesto que esperaban que se tratara de páginas web con URLs únicas para indexar.
Sin embargo, la tecnología de búsqueda ha madurado gracias a la API del historial del HTML5, la cual ahora proporciona una manera de que las PWAs puedan generar URLs vinculables, que facilitan a los motores de búsqueda la indexación y dirigen a las usuarias/usuarios al contenido correcto dentro de una aplicación progresiva.
Ampliar conocimientos
- https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web_progresiva
- https://developer.mozilla.org/es/docs/Web/Progressive_web_apps
| Sobre las autoras y autores: |
 |