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

Aplicaciones web progresivas, o PWA, son una nueva palabra de moda en el mundo del desarrollo web. Son muy similares a una aplicación móvil normal, pero están diseñadas para usarse en un dispositivo móvil o en una computadora de escritorio. Este blog explica qué es una aplicación web progresiva, en qué se diferencia de una aplicación web normal y 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.

A pesar de que se realizan mejoras continuas en AMP para hacerlo 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, con investigación del hallazgo de Simicart que después de instalar una PWA, el tiempo medio de permanencia en el sitio aumenta un 119%. No sólo eso, sino que el tiempo medio dedicado a leer 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 son páginas web normales o sitios web que mirar, sentir y comportarse como uno móvil nativo Las aplicaciones de muchas maneras. «Una PWA te permite instalar la aplicación desde la ventana del navegador, está disponible en tu teléfono como una app nativa y funciona sin conexión, igual que una app nativa», afirma 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 tienen muchas ventajas distintivas sobre los sitios web normales. Al igual que las aplicaciones, aprender más sobre el usuario con cada visita, incluso cuando no hayan iniciado sesión.

Entonces, si alguien visita el sitio web varias veces, la aplicación puede activar una descarga o un mensaje de notificación web. Además, se puede acceder a ellos en línea y actualizar el contenido dinámicamente, creando una experiencia de usuario más fluida.

Más importante que todo eso, Las aplicaciones web progresivas son fast. "Nuestra propia investigación ha descubierto que las PWA ofrecen velocidades de página de dos a cuatro veces más rápidas, lo que garantiza que los usuarios que tanto le costó ganar se mantengan interesados ​​y realicen conversiones", afirma Igor Faletsky, director ejecutivo de Mobify. “Las aplicaciones web progresivas permiten experiencias similares a 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 tienen obtuvo excelentes resultados para cientos de editores web y proveedores de comercio electrónico. Tomemos el caso de 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 son en realidad una rama del proyecto Accelerate Mobile Pages. Si bien AMP se utiliza para reducir los tiempos de carga de páginas en dispositivos móviles, las PWA se cargan igual de rápido pero con funcionalidad adicional. El trabajo de desarrollo está en curso para ambos marcos, por lo que elegir uno se convierte en una cuestión de caso de uso y preferencia.

Los editores asumen que AMP tiene una ventaja en SEO. Pero Graeme Caldwell en Blog de ranking web avanzado explica que las PWA no están en 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, sus ingresos pueden incluso terminar siendo mayores debido al hecho de que no hay obligación de pagar comisión por las ventas a terceros (en el caso de aplicaciones nativas. Esta sería la App Store o Google Play que se lleva una parte). de todas las ventas)”, escribe Alexandra Soroka en el Blog de BuenBarbero.

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 se adaptan bien a la monetización porque la generación de ingresos mediante “aplicaciones” es un problema resuelto. Al igual que las aplicaciones, las PWA ofrecen múltiples lugares para mostrar anuncios, varios formatos de anuncios y conexiones a varias redes publicitarias. Dos de los formatos más comunes incluyen anuncios de banner y anuncios intersticiales.

Puede mostrar anuncios en la vista de inicio, la vista de lista y la vista de visualización de su PWA. Fácil integración con tecnologías publicitarias populares como DFP Es una ventaja añadida.

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.

Herramientas

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