Blog

Aplicación Web Progresiva (PWA)

Una Aplicación Web Progresiva (PWA por sus siglas en inglés) es una aplicación web con características que se asemejan a las de una aplicación móvil nativa, tanto en la experiencia de usuario (UX) como en la interfaz de la aplicación (UI). Estas aplicaciones son pensadas desde el inicio para ofrecer el más optimo rendimiento en los distintos dispositivos en los cuales son desplegados, estos dispositivos pueden ser Desktops tradicionales, tablets y smartphones.

Características de una PWA

Las Aplicaciones Web Progresivas poseen características que las diferencian de una aplicación web común:

  • Permiten ser instaladas: Las PWA pueden ser instaladas en Desktop y smartphones, lo que produce en los usuarios la sensación de estar utilizando una aplicación nativa, además mejora el rendimiento de la aplicación.
  • Disminuye los tiempos de carga: Estudios confirman que mas del 53% de los usuarios abandonan un sitio si este demora mas de 3 segundos en cargar. Las tecnologías utilizadas en estas aplicaciones permiten un tiempo de carga optimo, mejorando la experiencia del usuario dentro de la misma.
  • Son progresivas: Esto quiere decir que la aplicación puede seguir expandiéndose y creciendo en conjunto con las necesidades de los usuarios y de los creadores de la aplicación.
  • Funcionan sin conexión: Una de las mayores ventajas de las PWA es que al poder ser instaladas en los distintos dispositivos, es posible ofrecer una experiencia sin conexión a internet, esto es posible a través de la implementación de una secuencia de comandos que los navegadores ejecutan en segundo plano  llamado Service Worker.
  • Notificaciones Push: Al igual que una aplicación nativa convencional es posible el envío y recepción de notificaciones push, lo que genera más interacción y una mayor sensación de estar dentro de una aplicación nativa.
  • Desarrollo ágil: Se puede conseguir tener un producto mínimo viable (MVP)  en un menor periodo de tiempo en comparación a una aplicación nativa.

¿Cómo funcionan?

Básicamente las Aplicaciones Web Progresivas funcionan de la misma manera que un sitio web convencional, es decir se consulta una Url en el navegador y este devuelve el resultado de la búsqueda, la diferencia radica en la implementación de los Service Workers y los Manifest que componen la aplicación.

pwa

Service Worker

Como se mencionaba en las características un service worker es una secuencia de comandos que el navegador ejecuta en segundo plano, separado de una página web, abriéndoles la puerta a funciones que no necesitan una página web ni interacción de usuario. También se puede definir de modo más técnico como un archivo Javascript que contiene toda la lógica que permite a la aplicación funcionar y ser instalada en los dispositivos.

service worker

Archivo Manifest

Además del Service Worker otro elemento importante de una PWA es el archivo principal de manifiesto o Manifest que permite definir características básicas de la aplicación; como el color de fondo en la pantalla de presentación, el icono cuando ha sido instalada y el nombre de la aplicación.

manifest

¿Por qué desarrollar una PWA?

Continuando con lo mencionado en las características, las PWA son un medio rápido, confiable y eficaz para la creación de una aplicación que permita el crecimiento progresivo de una idea, negocio o producto de software. Adicional a esto, las tecnologías que se utilizan para su desarrollo son de ultima generación permitiendo tener un perfomance mayor al de una simple página web y un desarrollo mucho más rápido al de una aplicación nativa.

Además, el mantenimiento de las PWA es mucho más fácil y económico en comparación con las aplicaciones nativas convencionales.

¿Tecnologías para el desarrollo?

Después de todo lo mencionado sobre las Aplicaciones Web Progresivas, solo queda mencionar las tecnologías necesarias para que estas sean desarrolladas, pero tranquilo no necesariamente se debe ser un programador para poner en marcha una PWA, a continuación lo explicamos:

Plugin Super PWA para WordPress

Hoy en día WordPress es el CMS más utilizado en el mundo, aproximadamente el 30%, de los sitios web en el mundo están hechos en WordPress, este permite desarrollar magníficos sitios web tan solo con un par de clicks y configuraciones básicas. El mismo sitio puede convertirse en una PWA instalando de manera sencilla un solo plugin llamado SuperPWA.

Ahora bien aunque el plugin da las características de una Aplicación Web Progresiva, se debe tener en cuenta que existen unas pequeñas diferencias de rendimiento en comparación con una PWA hecha a la medida, aun así es una excelente opción si se desea tener un sitio web con estas características o si no se posee el presupuesto, también en el caso de no ser un programador tan diestro en el desarrollo de aplicaciones progresivas.

Desarrollo a la medida, bajo lenguajes de desarrollo ágiles

Esta es la siguiente opción para aquellos que desean sacar todo el potencial de una PWA y es el desarrollo a la medida utilizando lenguajes de programación y frameworks optimizados para este propósito como AngularFirebase de Google y Node.

En este punto Angular es un framework basado en Javascript desarrollado por Google, el cual hoy en día se utiliza con múltiples propósitos tanto para el desarrollo de aplicaciones web como móviles y hasta de escritorio, una de las ventajas es lo extremadamente eficiente que es y gracias a su flexible entorno es fácil de mantener.

Ahora bien Firebase es otra de las grandes herramientas de Google la cual ofrece un entorno completo para alojar, testear y difundir las aplicaciones que se integran con su entorno. Firebase ofrece desde bases de datos, servicios de mensajería y servicios para cubrir la lógica del lado del servidor para las aplicaciones.

Y por ultimo pero no menos importante Node, el cual fue concebido como un entorno de ejecución de Javascript orientado a eventos asíncronos, Node está diseñado para construir aplicaciones en red escalables, este sera esencial para el desarrollo y testeo de la aplicación antes de ser puesta en producción.

También se pueden desarrollar servicios en otros lenguajes del lado del servidor como PHP o C#, ademas de usar la base de datos de preferencia como MySql por ejemplo, aunque todo depende del alcance de la aplicación a ser desarrollada y el dominio en los lenguajes y herramientas que se elijan para el trabajo, adicionalmente se podría utilizar React para el desarrollo del front, aun así recomendamos Angular por lo sencillo de la implementación y despliegue.

Conclusión

En los últimos años hemos sido testigos de la velocidad con la que la tecnología avanza, desde la llegada de las pagina web junto con el internet, las cuales abrieron un nuevo mundo de oportunidades de negocios, luego los smartphones junto con las aplicaciones móviles que hoy en día son utilizadas por la mayoría de la población mundial.

Siguiendo con lo anterior ahora vemos el nacimiento de las PWA las cuales incorporan lo mejor de ambos mundos, brindando a los usuarios la posibilidad de disfrutar de la mayoría de los beneficios de una aplicación móvil, desde una aplicación web rápida, amigable y sencilla de manejar e implementar.