fbpx

Qué son las Progressive Web Apps (PWA): cómo funcionan, importancia y cómo construirlas – Marketing Digital, Social Media y Transformación Digital

Back to Blog

Qué son las Progressive Web Apps (PWA): cómo funcionan, importancia y cómo construirlas – Marketing Digital, Social Media y Transformación Digital

Nos encanta recomendar el mejor contenido, por eso no te pierdas el siguiente artículo de Juan Carlos Mejía Llano y no dejes de visitar su página!
Ver Original:

Probablemente en algún momento hayas ingresado a una web y te hayas topado con un banner que con un CTA que decía “Agregar a pantalla de inicio”.

Luego de hacer clic en esta opción, una “aplicación” se instalará en segundo plano, la que podrás abrir en tu teléfono móvil en la carpeta de aplicaciones como todas las demás que puedas tener descargadas.

Una vez que abras la aplicación te darás cuenta de que puedes tener la misma experiencia de la página web o lo que estabas haciendo en tu navegador pero desde tu teléfono inteligente.

Esto que se ha descargado en tu teléfono es una aplicación móvil que se ha bajado desde una aplicación web, sin haber pasado primero por una tienda de aplicaciones como la App Store o la Play Store, ¿ves la diferencia?

Obtener la aplicación de esa manera es beneficioso porque es muy sencillo de hacer, pero además de eso una vez que abras la aplicación te darás cuenta de que tienes acceso al contenido de la página web incluso cuando no tienes conexión a Internet.

Esta maravilla de la que estamos hablando se denomina Progressive Web Apps (PWA) o como lo dice su traducción al español: “aplicación web progresiva”, y es que no lleva ese nombre por casualidad.

Una PWA lleva la ventaja de instalar una app directamente desde un banner del navegador de una página que te encuentras visitando y que estará presente en tu smartphone como una app nativa que incluso funciona sin conexión a la red, tal cual como una aplicación nativa.

Como te darás cuenta, las Progressive Web Apps son especiales y muy diferentes a las aplicaciones web tradicionales, pues en sí encierran ventajas que resultan directamente ventajosas para una experiencia agradable para tus usuarios.

La experiencia de usuario es importante para generar relaciones estrechas con ellos desde el primer contacto para cualquier estrategia, incluyendo la del Inbound Marketing B2B.

En las siguientes líneas descubrirás de qué se tratan a fondo y por qué deberías estar usándolas para tu marca desde ya.

1. ¿Qué son las Progressive Web Apps?

El término Progressive Web Apps fue acuñado por dos expertos en tecnología, Alex Russel y Frances Berriman, y en sus palabras una PWA es:

“Las aplicaciones web progresivas son solo sitios web que tomaron todas las vitaminas correctas”.

Estas apps constituyen un conjunto de las mejores prácticas para hacer que una app web funcione igual de bien e incluso sin conexión como una app de escritorio o mobile.

El ideal de las PWA es que el usuario tenga una experiencia tan completa y agradable como la tendría en la página web como tal con una buena conexión a Internet, así que no podrá distinguir entre una y la otra.

Como su nombre lo indica, las aplicaciones web progresivas brindan mejoras en la experiencia de usuario (UX) mediante perfeccionamientos progresivos de las prácticas.

En síntesis, una PWA se desarrollaría de la misma manera y con las mismas funciones con el último iPhone que salió al mercado que con uno de una versión muy antigua. Es decir, funcionaría como debería.

2. ¿Cómo funcionan las PWA?

La parte “progresiva” que define a las PWA significa que se van optimizando “progresivamente” con la ayuda de las funciones web modernas, así que, como mencionamos, también funcionan en navegadores más antiguos que no admiten ciertas características.

Su manera de operar es que tendrán su propia ventana en el escritorio o barra de tareas en Windows o un ícono en la pantalla de inicio de iOS o Android, y al abrirlas se cargan rápidamente debido a la API de caché y IndexedDB que guarda los recursos y datos de la app en tu aparato, por lo que es posible usarlas sin Internet.

Tecnologías tales como Service Workers y las notificaciones push hacen que la app pueda operar en segundo plano al enviar notificaciones, por ejemplo,aunque no se encuentre ejecutando como app nativa.

Por su parte, la API Fetch permite que la app requiera datos de manera más rápida y fácil.

Así que tiene un archivo de manifiesto de aplicación web, que da un nombre, icono, autor y descripción que se usa en la instalación de la app en el móvil.

Esto se hace mediante un HTTPS encriptado, así que puedes tener garantía de seguridad y de que los datos no serán traspasados.

Estas apps se diferencian de las aplicaciones empaquetadas de Chrome de Google o las aplicaciones web alojadas de Microsoft en el sentido de que estas requerirán que la aplicación se «guardara» como un archivo y se encontrara en una tienda de apps.

Para esas aplicaciones era necesario que los usuarios las instalaran desde Chrome Web Store o Windows Store.

Por ende, eran exclusivos de la plataforma y solo funcionarían en Chrome o Windows.

En su lugar, las PWA nunca se guardan en un archivo sin conexión. Al igual que las aplicaciones web tradicionales que usamos hoy, están alojadas completamente en los servidores de la aplicación.

Así que si un desarrollador requiere actualizar su aplicación web progresiva, la actualiza exactamente como la actualizaría en sus servidores. Todas las plataformas y navegadores que admiten PWA pueden usar las mismas aplicaciones web progresivas.

3. ¿Por qué necesitas una Progressive Web Apps?

Las principales razones por las que tu marca necesitaría estas apps son:

  • Rapidez: las Progressive Web Apps tienen acciones que proporcionan la rapidez que todo usuario de Internet necesita y desea. Desde la descarga hasta el momento en el que empieza a usar un tipo de app como esta, todo tiene la característica de la inmediatez debido a que puede almacenar en caché los datos.
  • UX integrada: al sentirse y comportarse como aplicaciones nativas, las PWA brindan una experiencia perfecta, con notificaciones y acceso a ellas en la pantalla de inicio.
  • Confianza: gracias a HTTPS, los usuarios pueden estar seguros de que sus datos estarán a salvo.
  • Involucramiento: se impulsa el compromiso al mantener a un usuario al tanto con las notificaciones push que enviaría la app.

4. ¿Cómo construir una Progressive Web App?

Google tiene una lista de verificación de elementos para considerar que una web tiene PWA, acá te mostramos cómo hacerla:

4.1. Manifiesto de la aplicación web

Este es un archivo json que ofrece metainformación sobre la app web.

Esto tiene información importante como el ícono de la aplicación que puede apreciar el usuario al instalarla en su teléfono, el color de fondo de la aplicación, el nombre de la aplicación, entre otros elementos.

Se puede generar automáticamente, el archivo de manifiesto utilizando los recursos de Google.

4.2. Service Workers

Los Service Workers son trabajadores controlados por eventos que se ejecutan en segundo plano de una app y funcionan como un proxy entre la red y la aplicación.

Son capaces de interceptar las solicitudes de red y la información de caché para los dueños de página en segundo plano.

Funciona para cargar datos para uso sin conexión a Internet, porque son un script javascript que escucha eventos como buscar e instalar, y realizan tareas.

4.3. Ícono

Es usado para brindar un ícono de aplicación cuando el usuario lo instala en su carpeta de aplicaciones.

Con una imagen en formato JPEG es suficiente. La herramienta de manifiesto que se mencionó previamente ayuda a generar iconos para múltiples formatos.

4.4. HTTPS

Es un requisito que una PWA se sirva sobre una red segura, de hecho, debe ser uno de sus beneficios.

Así que con servicios como Cloudfare y LetsEncrypt, es sencillo obtener un certificado SSL.

En conclusión, una PWA, más allá de brindar una experiencia única al usuario, también te permite, como marca, aumentar el compromiso de tus consumidores de contenido a la vez que afianzas tu relación con ellos.

Autor:

Emanuel Olivier PeraltaEmanuel Olivier Peralta  

Founder & CEO @ Genwords, content marketing en Latinoamérica.


Rating: 4.0/5. From 1 vote.