Marketing Digital, Social Media y Transformación Digital | Juan Carlos Mejía Llano
  • Inicio
  • Servicios
    • Consultoría >
      • Consultoría en Marketing Digital y Social Media
      • Consultoría en Transformación Digital
    • Acompañamiento estratégico
    • Formación >
      • Formación en Marketing Digital y Social Media de Medellín (Colombia) para el mundo
      • Entrenamiento de vendedores 4.0
      • Dirección Estratégica en Ventas (DEV)
    • Conferencista>
      • Speaker de Transformación Digital
      • Speaker en Marketing Digital y Social Media
    • Clientes
  • Blog
    • Todos los artículos
    • Community Manager
    • Redes Sociales
    • Marketing Digital
    • Transformación Digital
    • Boletín notificación nuevos artículos
  • Autor
    • Biografía
    • Juan Carlos en los medios
    • Juan Carlos como conferencista
    • Galería de videos
  • Mis libros
    • La guía del Community Manager
    • La guía Avanzada del Community Manager
    • Testimonios en Twitter
  • Congreso #AmoSM
    • Amo Social Media 2019 (#AmoSM2019)
    • Amo Social Media 2018
    • Amo Social Media 2017
    • Amo Social Media 2016
  • Blogger invitado
    • Pautas para ser Blogger Invitado
    • Artículos Bloggers invitados
  • Contacto
Marketing Digital, Social Media y Transformación Digital | Juan Carlos Mejía Llano
  • Inicio
  • Servicios
    • Consultoría >
      • Consultoría en Marketing Digital y Social Media
      • Consultoría en Transformación Digital
    • Acompañamiento estratégico
    • Formación >
      • Formación en Marketing Digital y Social Media de Medellín (Colombia) para el mundo
      • Entrenamiento de vendedores 4.0
      • Dirección Estratégica en Ventas (DEV)
    • Conferencista>
      • Speaker de Transformación Digital
      • Speaker en Marketing Digital y Social Media
    • Clientes
  • Blog
    • Todos los artículos
    • Community Manager
    • Redes Sociales
    • Marketing Digital
    • Transformación Digital
    • Boletín notificación nuevos artículos
  • Autor
    • Biografía
    • Juan Carlos en los medios
    • Juan Carlos como conferencista
    • Galería de videos
  • Mis libros
    • La guía del Community Manager
    • La guía Avanzada del Community Manager
    • Testimonios en Twitter
  • Congreso #AmoSM
    • Amo Social Media 2019 (#AmoSM2019)
    • Amo Social Media 2018
    • Amo Social Media 2017
    • Amo Social Media 2016
  • Blogger invitado
    • Pautas para ser Blogger Invitado
    • Artículos Bloggers invitados
  • Contacto
Bloggers invitadosDiseño WebMarketing Digital

Qué son las Progressive Web Apps (PWA): cómo funcionan, importancia y cómo construirlas

Por Juan Carlos Mejía Llano abril 2, 2020
Escrito por Juan Carlos Mejía Llano abril 2, 2020
0 Comentario
1
FacebookTwitterPinterestEmail

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.

Tabla de contenidos

  • 1. ¿Qué son las Progressive Web Apps?
  • 2. ¿Cómo funcionan las PWA?
  • 3. ¿Por qué necesitas una Progressive Web Apps?
  • 4. ¿Cómo construir una Progressive Web App?
    • 4.1. Manifiesto de la aplicación web
    • 4.2. Service Workers
    • 4.3. Ícono
    • 4.4. HTTPS

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.
Please wait...
Voting is currently disabled, data maintenance in progress.
0 Comentario
1
FacebookTwitterPinterestEmail
Juan Carlos Mejía Llano

Consultor, docente, speaker y escritor. Marketing Digital, Social Media y Transformación Digital.

Post anterior
Diferencias entre Facebook, Instagram y Twitter ¿Qué tipo de contenido es mejor para cada uno?
Siguiente post
Cómo hacer una infografía con Powerpoint: incluye plantilla e infografía resumen

También te puede interesar

8 Formas de Mejorar la Experiencia de Los...

junio 30, 2022

Qué marketing digital usar para los casinos online

junio 16, 2022

3 consejos para aprovechar al máximo el marketing...

junio 16, 2022

SEO : ¿Qué es y cómo beneficia a...

junio 13, 2022

Canva: herramienta de diseño para no diseñadores

junio 7, 2022

Optimizar sus tareas: 5 consejos para mejorar su...

mayo 17, 2022

Estadísticas de redes sociales 2022: Usuarios de Facebook,...

mayo 9, 2022

5 tips efectivos para aprender inglés

mayo 6, 2022

Transformación digital: las mejores computadoras para empresas

mayo 4, 2022

La tecnología de talento humano, ¿cómo optimizar los...

abril 27, 2022

Deja un comentario Cancelar respuesta

Guardar mi nombre, correo electrónico y sitio web en este navegador la próxima vez que comente.


    Cuéntame tu necesidad

    Políticas de protección de datos
    Ver las Políticas de protección de datos

    Empresas aliadas

    SEMrush
     


    Raiola

    Categorías

    Artículos

    • Últimos
    • + comentados
    • + vistos
    • 8 Formas de Mejorar la Experiencia de Los Usuarios de tu E-commerce La experiencia que los usuarios atraviesan al navegar y utilizar nuestra página web o tienda...
    • Qué marketing digital usar para los casinos online Todo proyecto digital, empresa que ofrezca sus servicios y productos en el entorno online, deberá...
    • 3 consejos para aprovechar al máximo el marketing de contenidos Promocionar un negocio digitalmente no requiere de una gran inversión y, a cambio, genera muchas...
    • SEO : ¿Qué es y cómo beneficia a las empresas? La optimización de motores de búsqueda o SEO (Search Engine Optimization) es una herramienta central...
    • Importancia de la comunicación digital para las PYMES Vivimos en una época en la que la comunicación electrónica en las empresas está revolucionando...
    • Estadísticas de redes sociales 2022: Usuarios de Facebook, Instagram, Tiktok, YouTube, LinkedIn, Twitter y otros ( 169 )Lo que convierten las redes sociales en un canal para los negocios es la cantidad...
    • Estadísticas de redes sociales 2022: Usuarios de Facebook, Instagram, Tiktok, YouTube, LinkedIn, Twitter y otros ( 869,064 )Lo que convierten las redes sociales en un canal para los negocios es la cantidad...
    • Usuarios en Colombia de Facebook, Instagram, Tiktok, LinkedIn, Snapchat y Twitter - 2022 ( 2,030 )He identificado que no es fácil encontrar información actualizada del número de usuarios de redes...
    • Usuarios en México de Facebook, Instagram, Tiktok, LinkedIn, Snapchat y Twitter - 2022 ( 1,857 )He identificado que no es fácil encontrar información actualizada del número de usuarios de redes...
    • 8 trucos de Instagram que desearías haber sabido antes ( 178 )Instagram es una de las redes sociales más importantes hoy en día, con millones de...
    • Digital Mindset: ¿cómo desarrollarlo en nuestra empresa? ( 171 )Los métodos innovadores cada vez se han hecho más necesarios en este mundo digital en...

    Datos de contacto

    Email: jcmejiallano@gmail.com

    Whatsapp: +57 311 7136418

    Skype: JCMejiaLlano