Aplicaciones web progresivas: ¿qué son y para qué sirven?

En el mundo donde vivimos actualmente siempre es más que recomendable –por no decir obligatorio– estar al día de las últimas novedades que salen al mercado. Es aquí donde podemos poner en práctica la famosa frase del filósofo y escritor Miguel de Unamuno, “el progreso consiste en renovarse”.

La tecnología avanza a pasos agigantados y a veces cuesta seguirle el ritmo. Nuevas tecnologías, nuevas herramientas, nuevos frameworks, nuevos lenguajes de programación y las ya conocidas actualizaciones que siempre incluyen mejoras y funcionalidades nuevas al producto o servicio.

Pues bien, dicho esto hoy comentaremos una nueva tecnología de la que posiblemente no se tenga mucho conocimiento y no está todavía muy extendida entre todas las personas pertenecientes a la comunidad del mundo web. Acostumbrados a que los activos de nuestros clientes sean webs y APPs, entra en escena una simbiosis entre ambas: las aplicaciones web progresivas.

¿Qué son las “Aplicaciones web progresivas”?

Promovidas por Google, aparecen las aplicaciones web progresivas, también conocidas comúnmente por PWA (progressive web applications). Se podrían definir como webs que ofrecen una experiencia en móviles lo más parecida a una aplicación nativa, dotándolas así de una experiencia de usuario mayor.

¿Cuál es su origen? APPs vs Sites

Aunque a estas alturas nos pueda resultar muy obvio, vamos a comentar las principales diferencias existentes entre las aplicaciones y las páginas web. Esto nos ayudará a entender mejor el mundo de las aplicaciones web progresivas.

El objetivo de las PWA no es otro que el de convertir las webs en aplicaciones. Por ello, hay que tener muy presente en qué se diferencian cada una de ellas, cuáles son sus ventajas, las características que muestran y por qué razones queremos que nuestras webs se conviertan en aplicaciones o tengan las características de una aplicación.

Las principales características o ventajas de un site o web son las siguientes:

Funcionan en cualquier dispositivo. Esto quiere decir que son accesibles desde cualquier dispositivo que disponga de un navegador: móviles, tablets, ordenadores, televisiones, wereables, etc. Solamente necesitan de un navegador para poder ser ejecutadas, y esto es gracias a que el HTML y el JavaScript son lenguajes multiplataforma y multidispositivo.
Consiguen nuevos usuarios de una forma más efectiva que las aplicaciones móviles debido a su universalidad.
El acceso de los usuarios a los sitios webs es mucho más fácil gracias a la publicidad, redes sociales, campañas de email, etc.

Por contraposición, las aplicaciones muestran las siguientes características:

Las aplicaciones no son universales y requieren ser creadas en un lenguaje de programación específico en función del dispositivo donde vayan a ser ejecutadas, ya sea un dispositivo iOS, Android, SmartTV, SmartWatch, etc.
Mayor fidelización de los usuarios. El hándicap de la universalidad no impide que los usuarios que hayan descargado una aplicación en un terminal no vuelvan a entrar de nuevo en la misma, lo cual es más difícil que suceda en una web. Esto se debe a que las aplicaciones se instalan en el dispositivo y no es necesario acordarse de una URL, realizar una búsqueda en Google o tener el site guardado en nuestros marcadores favoritos. Simplemente accederemos a la aplicación con un solo clic sobre el logo.
Otra de las mayores virtudes de las aplicaciones es el envío de notificaciones. Este tipo de avisos se producen incluso cuando el usuario no está utilizando el dispositivo y logran que el usuario vuelva a interesarse por acceder de nuevo a la aplicación.
Muchas de las aplicaciones funcionan sin necesidad de conexión a Internet. Esta posibilidad está disponible para determinados casos específicos. Sin embargo, es imposible acceder a una web sin conexión.

A partir de estas diferencias surge el objetivo de que un site tenga esas características de las aplicaciones que las hacen tan atractivas y que consiguen que los usuarios las reutilicen una y otra vez y vuelvan a entrar con mayor facilidad.

A continuación, veremos qué características deben cumplir las webs para considerarse progresivas.

Características de una PWA

Son webs. Por lo tanto, son universales y multiplataforma. Se puede acceder a ellas desde cualquier sitio y desde cualquier dispositivo.
Son instalables. Una aplicación web, si es progresiva, se va a poder instalar en un dispositivo móvil o tablet. Una vez instalada, el usuario no necesitará acceder al navegador y poner la dirección para volver a entrar, sino que en su lista de aplicaciones tendrá una más con el logo y nombre de la web. Esta web tendrá la apariencia de una aplicación nativa en el dispositivo.
Envían notificaciones push que pueden ser interesantes, de forma que el usuario abra la notificación y acceda a la aplicación instalada, del mismo modo que ocurre en las apps nativas.
Deben poder funcionar sin conexión a Internet. Tiene que ser accesible, aunque el usuario no disponga de una conexión, ya sea wifi o de datos.
Mejor tiempo de carga y mayor rendimiento que las aplicaciones convencionales.
Carga de contenido prácticamente instantánea.

Una vez vistas las características que debe tener una web para poder ser una PWA, es necesario saber qué tipo de tecnologías son necesarias para poder hacer este proceso de conversión.

¿Cómo conseguir que nuestra web sea una PWA?

Será necesario apoyarse en las siguientes técnicas y tecnologías para conseguir que nuestra web sea progresiva.

Responsive Web Design. Se trata de un conjunto de técnicas, frameworks específicos para crear interfaces que se adapten, de manera automática, al dispositivo en el que se están visualizando.
Service Workers. Es una tecnología que permite ejecutar servicios en segundo plano en los navegadores. La principal ventaja que ofrecen es que pueden ejecutarse de manera independiente a la aplicación.
App Shell. La idea de este modelo es la de separar la funcionalidad y el contenido de manera que se carguen por separado. Es un patrón que muchas Single Page Applicationssuelen usar. El objetivo que se pretende conseguir es que el usuario tenga la percepción de que la velocidad de carga de este tipo de aplicaciones es mayor.
Archivo Manifest. Básicamente es la manera estándar de informar al navegador de nuestros dispositivos que la web es instalable. Se trata de un archivo con formato JSON y que es ampliamente soportado en los navegadores. Para incluir este archivo en la web bastaría con incluir el siguiente código en el head del HTML: