Aplicaciones Web Progresivas, qué son y para qué sirven | Nubeser

¿Te suena la nueva PWAs, o dicho de otro modo, las Aplicaciones Web Progresivas o Progressive Web Apps (traduciendo las siglas del inglés)?

Nosotros ya hemos escuchado el término varias veces y, si hacemos caso a lo que se dice, ¡Va a ser la nueva tendencia de desarrollo web desde que entró a nuestras vidas (y ordenadores) el JavaScript!

Pero, ¿Realmente las Aplicaciones Web Progresivas son tanto como dicen, o simplemente es una moda pasajera?

 

A lo largo de este artículo explicaremos qué son las Aplicaciones Web Progresivas, cuál es el objetivo de que fueran desarrolladas, los problemas que intentan solucionar, cómo lo hacen y el soporte que actualmente existe en los sistemas. Dejaremos que seas tú el que decida si de verdad merecen la pena.

¿Existen limitaciones en las aplicaciones web de los móviles o Smartphones?

Ya lo sabemos, es posible crear aplicaciones móviles a través de un desarrollo nativo, o por lo que se ha denominado desarrollo híbrido.

¿En qué consiste el desarrollo de aplicaciones móviles de forma híbrida?

El desarrollo de aplicaciones web híbridas consiste en diseñar aplicaciones destinadas para trabajar a través de un dispositivo móvil, pero que después se convierten en aplicaciones nativas utilizando alguna plataforma móvil como Apache Cordva/Phonegap.

Sin embargo, en los comienzos de este proyecto (en 2007, cuando apareció el primer iPhone) la idea primigenia era que las aplicaciones móviles estuvieran destinadas, en general, a aplicaciones web. Se buscaba crear aplicaciones web, anclarlas a la pantalla de inicio y trabajar con ellas.

¿Ha evolucionado bastante la idea hasta el concepto de aplicaciones móviles que conocemos actualmente, eh?

Esta evolución es debido a que el concepto no funcionó de la forma esperada y que muy pocas aplicaciones web funcionaban así. Primero, es poca la gente que las ancla a la pantalla de inicio, pero también hay que añadir que las aplicaciones nativas son más ágiles, tienen un aspecto mucho más natural y por las capacidades que las apps nativas satisfacen.

Pese a existir envoltorios que ofrecen acceso al hardware a las aplicaciones móviles a través de bibliotecas JavaScript, lo cierto es que sí tu intención es crear una aplicación web “pura”, funcionando en navegadores móviles de forma que no se note la diferencia con las aplicaciones nativas, lo tienes muy complicado.

¡Hola PWAs, Aplicaciones Web Progresivas!

Saludamos a la Aplicación Web Progresiva porque viene como un superhéroe a mejorarnos la vida. Entonces…

¿Qué es una Aplicación Web Progresiva?

Como no podía ser de otra forma, Google es el impulsor de este tipo de aplicaciones. En la página de Google sobre PWAs nos ofrece una definición breve pero concisa.

Una PWA utiliza las últimas tecnologías disponibles en los navegadores para ofrecer experiencias móviles muy parecidas a una aplicación nativa. Clic para tuitear

La idea de esta definición es, ni más ni menos, la explicación de los objetivos que pretende cumplir una Aplicación Web Progresiva.

• El mejor rendimiento posible de Aplicaciones Webs en móviles.
• Carga de forma casi instantánea.
• Interfaz intuitiva y fácil, lo más parecida a las aplicaciones nativas.
• Posibilidad de no estar conectado a la red para poder utilizar la aplicación.
• Envío de notificaciones a los usuarios, tal y como haría una aplicación nativa.

¿Qué tecnologías utilizan las Aplicaciones Webs Progresivas?

Sabemos qué queremos conseguir, pero, ¿Cómo lo hacemos? Debemos memorizar unos conceptos básicos:

• Responsive Web Design o diseño web Responsive.
• Animaciones CSS.
• Frameworks.
• Sevice Workers.
• App Shell.
• Manifiesto de aplicación.

¿Sabes qué son el Service Workers y la App Shell?

Service Workers

Esta tecnología permite ejecutar servicios en segundo plano para los diferentes navegadores. Va más allá de lo que podría ofrecer un Web Worker (básicamente, ejecutan un código pesado en segundo plano y podemos comunicarnos con ellos para que durante la ejecución de una tarea larga, no se bloquee la interfaz de usuario).

Los Service Workers se ejecutan de manera independiente, por lo que se convierten en más complejos y, sobre todo, potentes. Además, ofrecen capacidades avanzadas como:

• Intercepción de comunicaciones.
• Cacheado de información.
• Descargar contenidos en segundo plano.
• Trabajar sin conexión a Internet.
• Enviar notificaciones.

Aunque hay funcionalidades para las que no es necesario el uso de un Service Worker, como por ejemplo crear aplicaciones web sin conexión a Internet, este sistema nos aporta mayores funcionalidades, especialmente si hablamos de caché y adquisición de información.

El único navegador móvil que ofrece soporte para el Service Worker (por el momento) es Chrome 51 o posterior en Android.

App Shell

Es un modelo que se utiliza para separar la aplicación entre funcionalidades y contenidos, y poder cargarlos por separado. Lo ideal es utilidad una aplicación móvil para uso off-line, (usando Service Worker u otra tecnología) para que la velocidad de carga sea la máxima posible, y que el contenido o datos que se carguen aparte.

Conseguimos que la experiencia de usuario mejore gracias a la percepción de que la aplicación web carga de forma más veloz.

Conclusiones sobre las PWAs o Aplicaciones web Progresivas

Las Aplicaciones Web Progresivas están muy de moda y no está de más conocerlas, especialmente en un mercado tan competitivo que, además, funciona por modas.

Por el momento, la mayoría de las técnicas necesarias para las Aplicaciones Web Progresivas están únicamente disponibles en Chrome (Android. En iOS todavía no funcionan) por lo que su audiencia es limitada. Pero, teniendo en cuenta que un altísimo porcentaje del mercado de móviles en Android, es muy posible que a medio plazo se logre alcanzar a más gente.

¿Estás dispuesto a aprender sobre Aplicaciones Webs Progresivas?