¿Que es una PWA?

Seguramente los últimos días has escuchado hablar acerca de las PWA lo cual se refiere a las “Aplicaciones Web Progresivas” o “Progressive Web Apps” en sus siglas en Inglés.

Hoy te queremos explicar y enseñar un poco acerca de este concepto, de los problemas que tratan de solucionar, en que se basan para desarrollarlas y si merece la pena tener o crear una para tu negocio.

Aplicaciones nativas vs PWA

Como sabemos, es posible crear aplicaciones para dispositivos móviles utilizando un desarrollo nativo o también conocido cómo desarrollo híbrido. Este desarrollo consiste en construir aplicaciones web pensadas para trabajar en un dispositivo móvil para luego convertirlas en aplicaciones nativas usando algún envoltorio como Apache Cordova/Phonegap.

Sin embargo, a estas alturas, la idea original era que las aplicaciones fueran en su mayoría aplicaciones web. El desarrollo nativo tardó todavía 1 año en habilitarse. La idea era crear aplicaciones web, anclarlas a la pantalla de inicio de los dispositivos móviles y trabajar con ellas, lo cierto es que este concepto no funcionó y hubo pocas aplicaciones web que funcionaban de esta manera,  en primer lugar porque casi nadie ancla nada a la pantalla de inicio salvo que esto sea muy fácil, pero también porque no solían ser tan ágiles como las aplicaciones nativas, no suelen tener un aspecto igual de natural y, sobre todo, porque las aplicaciones web carecían de muchas de las capacidades que se necesitan en una aplicación nativa (trabajar sin conexión, enviar notificaciones, almacenar datos localmente…)

¿Qué es una aplicación web progresiva?

Google fue el que más interés tuvo en este tipo de aplicaciones. En su página dedicada al tema ofreció una definición breve pero bastante concisa de lo que es una PWA, que en pocas palabras es más o menos lo siguiente:

“Una PWA utiliza las últimas tecnologías disponibles en los navegadores para ofrecer una experiencia en móviles lo más parecida a la de una aplicación nativa”

La verdad es que es como no decir nada, y al mismo tiempo decirlo todo.

La idea que transmite Google con  esta definición es que los objetivos que debemos tener en cuenta al momento de desarrollar una son:

• Que tenga el mayor rendimiento posible en móviles y que cargue de manera casi instantánea
• Una buena interfaz que se parezca lo máximo posible a una nativa
• La posibilidad de trabajar sin conexión
• Poder enviar notificaciones a los usuarios, como una app nativa

Básicamente con estos cuatro conceptos estaríamos asegurando un éxito instantáneo en nuestra PWA ¿Sencillo no?

¿Qué tecnologías ocupan las PWA?

¡Hasta este punto vamos bien!

Ahora que ya sabemos lo que queremos conseguiremos al desarrollar una Aplicación Web Progresiva  nos surgirá la siguiente cuestión ¿Cómo podemos hacerlo?

Para conseguirlo, las PWAs se basan en unos conceptos bastante simples cómo son:

• Responsive Web Design, animaciones CSS y frameworks específicos para crear interfaces móviles con aspecto de desarrollo nativo
• Service Workers
• App Shell
• Manifiesto de aplicación

¿Pero qué función tiene cada uno de estos conceptos? 

Service Workers

Los Service workers son una tecnología muy interesante pero a la misma vez bastante compleja la cual nos permite ejecutar servicios en segundo plano en los navegadores.

Esta va más allá de lo que ofrece un Web Worker. Nos va  a permitir ejecutar código pesado en segundo plano (en un subproceso dedicado) y comunicarnos con ellos, de modo que una o varias tareas largas no bloqueen la interfaz del usuario. Pero los Service Workers son más potentes y complejos, puesto que pueden ejecutarse de manera independiente a la aplicación (es decir, estar en ejecución aunque la página de nuestra app web esté cerrada) y ofrecen capacidades avanzadas como la intercepción de las comunicaciones, el cacheado de información, la descarga en segundo plano de contenidos, el trabajo sin conexión o la posibilidad de enviar notificaciones.

App Shell

App Shell no es una tecnología, sino un modelo o patrón a la hora de crear las aplicaciones. La idea es muy sencilla: separar la aplicación entre funcionalidad y contenido y cargarlos por separado.

Lo suyo es tener, por un lado, la aplicación en sí cacheada para uso off-line de modo que cargue a toda velocidad y luego cargar el contenido por otro lado.

Esto, realizado de manera correcta, hace que el usuario tenga la percepción de la velocidad de carga de la app, está parece que carga mucho más rápido debido a que el “shell”  carga antes que nada y desde una caché, el usuario verá la app enseguida.

Manifiesto de aplicación

Como comentamos al principio, desde los primeros smartphones como hoy los conocemos, siempre ha sido posible anclar al inicio una página web desde el navegador para luego poder ir directamente a ella. Para controlar el aspecto que tendrá el icono que los usuarios van a anclar es posible utilizar diversas técnicas dependiendo del navegador y el sistema operativo.

• En iOS, por ejemplo: Se controla a través de unas cabeceras de tipo “meta” que podemos añadir a la página principal de la aplicación web. 
• En el caso de Android y Chrome utilizamos un archivo llamado “Manifiesto” cuyo nombre es manifest.json (El cual funciona desde la versión 38 de Chrome en 2014).

Google además hace que cuando se añade una aplicación al menú de inicio de Android salga un banner de instalación como el de una aplicación real, todo ello hace que la experiencia sea cada vez más parecida a la de las aplicaciones nativas. Pero no deja de ser una cuestión meramente visual.

Conclusión: 

Aplicando los pasos antes mencionados lograremos que una PWA “Aplicación Web Progressiva” tenga un funcionamiento muy parecido al de una aplicación creada con un desarrollo meramente nativo, esperamos que esta publicación te haya sido de ayuda y puedas tomar una decisión a la hora de comprarla o desarrollarla.

¿Te ayudamos? En #CloudStudioMX ¡Somos expertos en el desarrollo de aplicaciones nativas y aplicaciones web progresivas! ¡Contáctnos hoy