¿Qué son las aplicaciones web progresivas y cómo funcionan?

Las aplicaciones web progresivas , o PWA, son un término de moda en el mundo del desarrollo web. Son muy similares a una aplicación móvil convencional, pero están diseñadas para usarse en dispositivos móviles o computadoras de escritorio. Este blog explica qué es una aplicación web progresiva, en qué se diferencia de una aplicación web convencional y mucho más.

En los últimos años, Google ha intentado acelerar la web móvil para ofrecer una mejor experiencia de usuario. El primer paso en este viaje fue el lanzamiento de páginas móviles aceleradas.

Aunque estas páginas web móviles "simplificadas" eran rápidas, los editores se toparon con un obstáculo al configurar análisis, atribución y monetización a través de anuncios gráficos.

Si bien se están realizando mejoras continuas en AMP para que sea más amigable para los editores, Google ha lanzado un marco completamente diferente para los editores web llamado Aplicaciones Web Progresivas (PWA).

Se ha demostrado que las PWA son extremadamente beneficiosas. Un estudio de Simicart reveló que, tras instalar una PWA, el tiempo promedio de permanencia en un sitio web aumenta un 119 %. Además, la duración promedio de lectura de una página aumenta un 68.8 %.

En esta publicación, explicaremos el significado de PWA, cómo funcionan estas aplicaciones, sus ventajas, en qué se diferencian de AMP y las aplicaciones nativas, y las opciones de monetización.

¿Qué es una aplicación web progresiva?

Las aplicaciones web progresivas (PWA, por sus siglas en inglés) son páginas web o sitios web convencionales que, en muchos aspectos, tienen la apariencia, la sensación y el comportamiento de las aplicaciones móviles nativas . «Una PWA permite instalar la aplicación directamente desde la ventana del navegador, está disponible en el teléfono como una aplicación nativa y funciona sin conexión, al igual que una aplicación nativa», explica Shruti Kapoor, ingeniera de software de PayPal.

La razón por la que estas aplicaciones se denominan "progresivas" es que la UX mejora según la tecnología disponible del dispositivo y del navegador.

Entonces, podrías cargar una PWA en un teléfono básico y seguirá funcionando. Pero su funcionalidad y experiencia de usuario mejorarán a medida que pase a teléfonos inteligentes más nuevos con el hardware más reciente.

Esto permite a los editores crear experiencias escalables para la web sin invertir mucho en una aplicación móvil tradicional.

Las siguientes características definen las PWA según los desarrolladores de Google:

• Progresivo: Funciona para todos los usuarios, independientemente de la elección del navegador.
  
• Responsivo: Se adapta a cualquier factor de forma: computadora de escritorio, móvil, tableta o formularios aún por surgir.
  
• Conectividad independiente: Los trabajadores del servicio permiten trabajar sin conexión o en redes de baja calidad.
  
• Como una aplicación: Siéntase como una aplicación para el usuario con interacciones y navegación estilo aplicación.
  
• Esencias: Siempre actualizado, gracias al proceso de actualización del trabajador del servicio.
  
• Seguro: Servido a través de HTTPS para evitar espionaje y garantizar que el contenido no haya sido manipulado.
  
• Reconocible: Se pueden identificar como "aplicaciones" gracias a los manifiestos del W3C y al alcance del registro de trabajadores del servicio, lo que permite a los motores de búsqueda encontrarlas.
  
• Re-comprometible: Facilite la reincorporación a través de funciones como notificaciones automáticas.
  
• Instalable: Permita a los usuarios "mantener" las aplicaciones que consideren más útiles en su pantalla de inicio sin la molestia de una tienda de aplicaciones.
  
• Enlazable: se comparte fácilmente a través de una URL y no requiere una instalación compleja.

Esto es todo lo que necesitas sobre qué es una aplicación web progresiva. Ahora, veamos cómo funciona.

¿Cómo funcionan las aplicaciones web progresivas?

Las aplicaciones web progresivas aprovechan las nuevas funciones compatibles con los navegadores modernos, incluidas manifiestos de aplicaciones web y trabajadores de servicio. Cualquier sitio web/aplicación debe cumplir las cuatro condiciones mínimas para que se clasifique como una Aplicación Web Progresiva.

1. A manifiesto web proporciona metainformación sobre una aplicación (como su nombre, autor, icono y descripción) en un archivo de texto JSON. Los editores pueden escribir el manifiesto web ellos mismos o generar el archivo mediante un generador de manifiesto de aplicación web.
   
2. Un trabajador de servicio es un código JavaScript que actúa como un servidor proxy que se encuentra entre la aplicación, el navegador y la red. Se utilizan para ofrecer experiencias fuera de línea efectivas al interceptar solicitudes de red y almacenar información en caché en segundo plano.
   
3. Se utiliza un ícono para funcionar como ícono de la aplicación cuando un usuario mantiene una PWA en el cajón de su aplicación. Cualquier imagen JPEG de tamaño 512×512 píxeles funcionará bien.
   
4. Debes entregar la aplicación a través de un conexión HTTPS segura. La mayoría de los proveedores de alojamiento incluyen un certificado HTTPS por un coste adicional. También puede protegerlos de un proveedor externo. Tener un sitio web seguro también es mejor para tu marca.

¿Cuál es la diferencia entre aplicaciones web progresivas y aplicaciones nativas?

Hay muchas diferencias entre estos dos. A continuación hemos mencionado algunos de los principales.

Costo

De muchas funciones progresivas de aplicaciones web, la rentabilidad es una de las mejores ventajas.

Existe una diferencia de costo significativa entre estos dos. Al diseñar aplicaciones nativas, es necesario tener un buen dominio del idioma requerido. Sin mencionar que debes crear aplicaciones para ambos sistemas operativos: Android e IOS.

Por otro lado, las aplicaciones web progresivas son mucho más asequibles de crear. No necesita aprender ningún lenguaje de codificación y no necesita recursos adicionales para mantener o actualizar cada versión de la aplicación.

A diferencia de las aplicaciones nativas, las aplicaciones web progresivas son una excelente manera de ahorrar tiempo y dinero cuando se trata de crear y actualizar su aplicación. Puede tener una única base de código para varias plataformas, lo que significa que no tiene que preocuparse por crear versiones separadas para cada plataforma.

Descubribilidad

Dado que las aplicaciones web progresivas se crean utilizando tecnologías web como HTML, Javascript, .CSS, etc., los motores de búsqueda pueden indexarlas. Funcionan como un sitio web, lo que significa que también pueden aparecer en los motores de búsqueda con las técnicas adecuadas de optimización de motores de búsqueda.

Las aplicaciones nativas funcionan de manera diferente. Generalmente están diseñados para Android e IOS y solo se pueden clasificar en sus tiendas dedicadas: Play Store y App Store.

Seguridad

Cuando se trata de seguridad, las PWA son más seguras que las aplicaciones web tradicionales porque deben ejecutarse bajo HTTPS, un protocolo de seguridad que protege contra cualquier manipulación de los intercambios entre el cliente y el servidor.

Una aplicación nativa le permite incluir múltiples medidas de seguridad, como autenticación multifactor y fijación de certificados.

Las ventajas de las aplicaciones web progresivas

Las aplicaciones web progresivas (PWA) tienen muchas ventajas distintivas sobre los sitios web tradicionales. Al igual que las aplicaciones, aprenden más sobre el usuario con cada visita, incluso cuando no ha iniciado sesión.

Si alguien visita el sitio web varias veces, la aplicación puede activar una notificación de descarga o web . Además, se puede acceder a ella en línea y actualizar el contenido dinámicamente, lo que crea una experiencia de usuario más fluida.

Más importante aún, las aplicaciones web progresivas son rápidas . "Nuestra propia investigación ha demostrado que las PWA ofrecen velocidades de carga de página de dos a cuatro veces más rápidas, lo que garantiza que sus valiosos usuarios se mantengan comprometidos y realicen conversiones", afirma Igor Faletsky, director ejecutivo de Mobify. "Las aplicaciones web progresivas permiten experiencias similares a las de las aplicaciones con el alcance de la web".

La experiencia del usuario es inmersiva y se carga instantáneamente, incluso en malas condiciones de red. Piensa en ello como una aplicación móvil, pero sin tener que ir a App o Play Store.

Las aplicaciones web progresivas han dado excelentes resultados a cientos de editores web y vendedores de comercio electrónico. Un ejemplo es Pinterest, que el año pasado convirtió su sitio web en una aplicación web progresiva.

Desde entonces, el sitio web ha sido testigo de un aumento del 60 % en las métricas de participación principales, un aumento del 50 % en los clics en anuncios y un aumento del 44 % en los ingresos por publicidad.

La mayoría de las ventajas de las PWA son las mismas que las de las aplicaciones: más rápidas, mejor experiencia de usuario y mayor rigidez del usuario.

Ahora que comprende qué son las PWA y cómo funcionan, comparémoslas con las AMP.

Las PWA y las AMP comparten algunas similitudes, pero también existen algunas diferencias clave entre los dos.

Echemos un vistazo a cuáles son para que pueda comprender mejor cómo funciona cada uno.

PWA frente a AMP: ¿Cuál es la diferencia?

Las aplicaciones web progresivas (PWA) son, en realidad, una derivación del proyecto Accelerate Mobile Pages (AMP) . Mientras que AMP se utiliza para reducir los tiempos de carga de las páginas en dispositivos móviles, las PWA cargan igual de rápido, pero con funcionalidades adicionales. El desarrollo de ambos frameworks continúa, por lo que elegir uno u otro depende del caso de uso y las preferencias personales.

Los editores asumen que AMP tiene una ventaja en SEO. Pero Graeme Caldwell, del blog Advanced Web Ranking, explica que las PWA no tienen ninguna desventaja. “No hace mucho, las aplicaciones web del lado del cliente eran una pesadilla para el SEO.

Hoy en día, las empresas pueden adoptar de forma segura aplicaciones web progresivas y otras aplicaciones web JavaScript sin afectar negativamente al SEO”, afirma.

Monetización de aplicaciones web progresivas

Aquí es donde las aplicaciones web progresivas tienen una ligera ventaja sobre las páginas móviles aceleradas, aunque a un costo inicial de configuración más alto.

AMP es un proyecto ambicioso que cumplió su promesa principal de hacer que las páginas web móviles se cargaran más rápido. Sin embargo, ha tenido dificultades para cumplir con las expectativas de los editores, es decir, opciones de monetización e ingresos por publicidad.

“Las PWA se pueden monetizar tanto como los sitios web progresivos y las aplicaciones nativas. De hecho, tus ingresos pueden incluso ser mayores, ya que no hay obligación de pagar comisiones por las ventas a terceros (en el caso de las aplicaciones nativas, como la App Store o Google Play, que se quedan con una parte de todas las ventas)”, escribe Alexandra Soroka en el blog GoodBarber.

Supongamos que la publicidad es su método de monetización preferido. En ese caso, todas las opciones están ahí, lo que significa que tiene la opción de trabajar con una red publicitaria externa y crear sus propias campañas publicitarias internas si tiene sus propias asociaciones o acuerdos.

Las aplicaciones web progresivas (PWA) son ideales para la monetización, ya que la generación de ingresos mediante aplicaciones es un problema resuelto. Al igual que las aplicaciones, las PWA ofrecen múltiples espacios para mostrar anuncios, diversos formatos publicitarios y conexiones a varias redes publicitarias. Dos de los formatos más comunes son los banners y los anuncios intersticiales.

Puedes mostrar anuncios en la vista de inicio, la vista de lista y la vista de visualización de tu PWA. La fácil integración con tecnologías publicitarias populares como DFP es una ventaja adicional.

¿Cómo crear aplicaciones web progresivas?

Comenzar a usar PWA es fácil: todo lo que necesitas son algunos ingredientes clave y ¡estarás listo! Este pequeño tutorial de aplicaciones progresivas le ayudará a conocer los requisitos previos para comenzar con el desarrollo de PWA.

Accesorios

Existen muchas tecnologías diferentes que puede utilizar para desarrollar PWA. Pero la opción más popular y conocida es AngularJS. Aparte de eso, también puedes usar ReactJS y Polymer.

HTTPS

El segundo paso es hacer que su aplicación progresiva sea segura. Para ello, es recomendable alojar su sitio web en un servidor con conexión HTTPS. Esto garantiza la privacidad de los datos de sus usuarios. Le da a su sitio web un grado adicional de seguridad.

Shell de la aplicación

El shell de la aplicación es lo que el usuario ve primero cuando abre su aplicación. En otras palabras, es la impresión inicial que causa tu aplicación.

El shell prepara el escenario para la experiencia del usuario con su aplicación al proporcionar un punto de partida para navegar e interactuar con la aplicación.

Archivo de manifiesto

Este archivo JSON se genera con un propósito específico: contener toda la información que controlaría cómo aparecería y funcionaría su PWA.

En este archivo, podrá determinar cosas como el nombre, la descripción, el ícono, los colores y muchas características de su aplicación web progresiva.

Esto le permite tener control total sobre cómo aparece y se comporta su aplicación, lo que facilita la creación de una experiencia única y personalizada para sus usuarios.

Trabajadores de servicio

Una de las tecnologías fundamentales que habilitan las PWA es el uso de trabajadores de servicios.

Los trabajadores de servicio permiten que su aplicación funcione sin conexión y admiten funciones avanzadas al almacenar en caché activos y administrar operaciones en segundo plano. Además, puede realizar tareas incluso cuando su aplicación web progresiva esté inactiva.

Para terminar

Debería ser obvio que las aplicaciones web progresivas son el futuro. En los últimos meses, hemos visto muchos anuncios y cambios que son realmente interesantes.

Google ha dado grandes pasos para hacer de las PWA la primera opción para los desarrolladores, y Microsoft ha hecho lo mismo con su anuncio de aplicaciones web progresivas en Windows. Estamos muy emocionados de ver cómo se desarrolla el futuro de las PWA.

Esperamos que el blog te haya ayudado a comprender qué es una aplicación web progresiva, cómo funciona, aplicaciones web progresivas y aplicaciones web nativas, etc. Gracias por leer.

Preguntas frecuentes: aplicaciones web progresivas