La guía definitiva para aplicaciones web progresivas en 2022, con 50 ejemplos de PWA

¿Está interesado en crear una aplicación web progresiva? Esta guía le dirá todo lo que necesita saber, ¡junto con 50 ejemplos de las mejores PWA del mercado!

Llevamos años predicando sin parar: necesitas una app nativa. Había buenas razones para eso, y todavía lo mantenemos.

Nuestras plataformas News, Canvas y Canvas para comercio electrónico han ayudado a nuestros clientes a mejorar enormemente la UX móvil, aumentar el tráfico, generar más lealtad y aumentar los ingresos. Las aplicaciones nativas funcionan de manera excelente para construir una relación más profunda con su base de usuarios principal y son imprescindibles para cualquier marca que valore la lealtad, el compromiso y la retención.

Sin embargo, nada es perfecto. Las aplicaciones nativas no reemplazan las excelentes experiencias web.

Las aplicaciones nativas solo son relevantes para aquellos que, bueno, tienen la aplicación instalada. No hacen nada por los nuevos visitantes que visitan la web por primera vez, los usuarios ocasionales que pasan de vez en cuando y aún no están lo suficientemente comprometidos para instalar la aplicación o los clientes que están en el escritorio.

Estos clientes potenciales también son absolutamente cruciales para el éxito. Las primeras impresiones importan mucho y las aplicaciones nativas siempre ayudan en las primeras etapas del embudo. Debe proporcionar una experiencia rápida y fluida durante todo el viaje. ¿Cómo?

Introduzca aplicaciones web progresivas (PWA). Si tiene un sitio web y es remotamente importante para usted o su negocio, necesita un PWA.

En este artículo, definiremos las aplicaciones web progresivas, discutiremos sus beneficios más importantes y compartiremos 50 ejemplos de las mejores PWA en Internet.

Finalizaremos con algunos consejos sobre cómo crear una PWA y cómo funcionan con aplicaciones móviles nativas para crear una combinación de UX móvil ganadora. Profundicemos. Al final de este artículo, sabrá todo lo que necesita saber para comenzar su proyecto de aplicación web progresiva.

Comenzaremos con la pregunta fundamental: ¿qué es una PWA?

¿Qué es exactamente una aplicación web progresiva? Definamos una PWA

Las aplicaciones web progresivas combinan lo mejor de la web con características que anteriormente solo eran posibles en aplicaciones nativas.

Los PWA viven en el navegador como un sitio web tradicional y están completamente conectados a la infraestructura de enlaces e índices de motores de búsqueda de la web. Al igual que las aplicaciones nativas, se pueden iniciar desde un ícono de la pantalla de inicio, enviar notificaciones automáticas al dispositivo del usuario, cargarse en una fracción de segundo y diseñarse para funcionar sin conexión.

Las aplicaciones web progresivas no están separadas de su sitio. Son una mejora de su sitio que lo actualiza con las mejores prácticas actuales y aprovecha la tecnología web de vanguardia, como los trabajadores de servicios, para brindar una experiencia similar a la de una aplicación desde un navegador móvil.

Quizás todavía no estés seguro de qué son exactamente .

Esto es comprensible, ya que el término se usa mucho, pero las definiciones sólidas son difíciles de alcanzar. Veamos la historia del término para aclarar las cosas.

La definición original de una aplicación web progresiva

El término "aplicación web progresiva" fue acuñado en 2015 por Francis Berriman y el ingeniero de Google Alex Russell. Habían estado observando el surgimiento de una nueva clase de aplicaciones web y durante la cena decidieron definirlas y nombrarlas.

Llegaron a los siguientes criterios:

• Sensible: para adaptarse a cualquier factor de forma
• Independiente de la conectividad : mejorado progresivamente con Service Workers para permitirles trabajar sin conexión
• Interacciones similares a aplicaciones: adopte un modelo de aplicación Shell + Content para crear interacciones y navegaciones de aplicaciones
• Fresco : siempre actualizado de forma transparente gracias al proceso de actualización de Service Worker
• Seguro : Servido a través de TLS (un requisito de Service Worker) para evitar espionaje
• Descubribles : son identificables como "aplicaciones" gracias a los manifiestos W3C y al ámbito de registro de Service Worker, lo que permite que los motores de búsqueda las encuentren.
• Reactivable : puede acceder a las IU de reactivación del sistema operativo; por ejemplo, notificaciones push
• Instalable : en la pantalla de inicio a través de indicaciones proporcionadas por el navegador, lo que permite a los usuarios "conservar" las aplicaciones que encuentran más útiles sin la molestia de una tienda de aplicaciones
• Enlazable : lo que significa que son sin fricción, sin instalación y fáciles de compartir. El poder social de las URL es importante.

Puede ver cómo estos criterios cumplen con la parte de "aplicación web" de la definición.

Durante muchos años, empresas como nosotros y otras crearon plataformas que permitieron a las empresas crear experiencias de aplicaciones con tecnologías web. Esto funciona muy bien hasta el día de hoy, pero hay compensaciones. Para crear una excelente experiencia de aplicación nativa , pierde la capacidad de descubrimiento y vinculación de la web.

Surgieron nuevas tecnologías web, como los trabajadores de servicios (los trataremos más adelante), que cambiaron las cosas, lo que permitió a los desarrolladores crear experiencias que tomaron lo mejor de la experiencia de usuario de la aplicación nativa y la pusieron en el navegador, conservando así todos los beneficios de la web.

Ya no necesitaba aceptar una experiencia de usuario web móvil mediocre, mientras empujaba a las personas a descargar sus aplicaciones nativas para obtener el trato real. Podría proporcionar una excelente experiencia móvil en las tiendas de aplicaciones y la web a todos los que interactuaron con su marca en línea.

Esto es lo que observaron Berriman y Russell. No inventaron nada, notaron un cambio en la red y lo nombraron.

¿Qué pasa con la parte "progresiva"?

En este contexto, significa que las aplicaciones se construyen con mejoras progresivas . Esta es una técnica de diseño enfocada en construir una experiencia "básica" que funcione para todos pero que se actualice y mejore en dispositivos más avanzados. La experiencia de una aplicación web progresiva no es necesariamente la misma para todos los usuarios, se adapta según la potencia de su dispositivo y los permisos que otorga.

Entonces, ¿es suficiente la definición de Berriman y Russell? El problema es que pocas PWA cumplen con todos esos criterios. Son más como una lista de deseos, un objetivo al que apuntar o un caso modelo.

Definición de Google de una aplicación web progresiva

Microsoft ha estado entusiasmado con las PWA durante algún tiempo. Apple se convenció un poco y ahora está (en su mayoría) dentro. Sin embargo, entre las grandes tecnológicas, fue Google quien realmente defendió las PWA desde el principio.

Dicho esto, los propios Google no parecen estar 100% seguros de la definición. En 2015 publicaron una lista de 10 características, luego la redujeron a seis y luego agregaron tres nuevas.

Actualmente, la definición de Google de una aplicación web progresiva incluye tres pilares. En su página de introducción, afirman que las PWA son:

“Aplicaciones web que han sido diseñadas para que sean capaces, confiables e instalables . Estos tres pilares los transforman en una experiencia que se siente como una aplicación específica de la plataforma”

Esto es más útil, pero no tanto, ya que es muy amplio. Sin embargo, sugiere el punto clave, que los PWA están trayendo experiencias a la web que tradicionalmente se asociaban exclusivamente con plataformas nativas.

La definición técnica de una aplicación web progresiva

Una tercera forma en que podemos definir un PWA es especificando los criterios puramente técnicos, en lugar de UX.

Esto es lo que intentó el desarrollador web y autor Jeremy Keith en su publicación de blog de 2017 ¿Qué es una aplicación web progresiva? .

Keith piensa que la confusión sobre las definiciones de PWA es infundada y que, básicamente, se deben cumplir tres criterios:

1. HTTPS: las PWA deben ejecutarse en servidores seguros que empleen HTTPS. Los trabajadores de servicio son esenciales por su potencial y solo se pueden usar si tiene HTTPS en su lugar.
2. Un Service Worker: esencialmente un archivo JavaScript que se ejecuta por separado del "hilo" del navegador principal y permite al desarrollador controlar cómo la aplicación maneja las solicitudes de red y el almacenamiento en caché. Esto ayuda a impulsar la impresionante velocidad y las capacidades fuera de línea de las PWA.
3. Un manifiesto de la aplicación web: un archivo JSON que proporciona una descripción de la aplicación al navegador, incluidos detalles como el nombre, el autor, el icono, la descripción y los recursos para ejecutarla. Esto asegura que la aplicación sea detectable.

Keith continúa señalando que esta es una definición mínima y básica. Los PWA son capaces de mucho más, pero deben cumplir con estos tres criterios técnicos para hacer el corte.

Así que hemos visto la definición original de observación/aspiración, la definición basada en UX de Google y una definición técnica minimalista. ¿Qué podemos suponer? Aunque todavía puede haber un poco de ambigüedad, ahora tenemos una buena idea de lo que es una aplicación web progresiva.

Una PWA es un sitio web moderno, seguro y de carga rápida que utiliza tecnologías web de vanguardia para lograr estas características. A diferencia de los sitios web tradicionales, el usuario se comporta y se siente como una aplicación nativa, y "escapa" de la pestaña del navegador en el proceso.

Como dice Alex Russell:

“Estas aplicaciones no se empaquetan ni se implementan a través de las tiendas, son solo sitios web que tomaron todas las vitaminas adecuadas”

Esta es una gran manera de decirlo. Las PWA son la última generación de la web. Son aplicaciones web que pueden aprovechar el potencial de la tecnología de navegación moderna. Al convertir tu propio sitio web en una PWA, le das las "vitaminas" necesarias para que funcione de manera óptima.

Ahora vamos a pasar a los beneficios de crear una aplicación web progresiva, antes de ver 50 ejemplos de PWA para inspirar su proyecto.

Beneficios de la aplicación web progresiva

Dijimos anteriormente que si tiene un sitio web y está relacionado de alguna manera con el éxito de su negocio, debe crear un PWA.

Eso puede parecer una declaración audaz, pero es la verdad. ¿Por qué?

En pocas palabras, al no crear una PWA, es probable que deje clientes, ingresos y crecimiento sobre la mesa. Como lo expresaron Pete LePage y Sam Richard del equipo web de Google:

“¡Los números no mienten! Las empresas que han lanzado Progressive Web Apps han obtenido resultados impresionantes. Por ejemplo, Twitter experimentó un aumento del 65 % en las páginas por sesión, un 75 % más de tuits y una disminución del 20 % en la tasa de rebote, al mismo tiempo que redujo el tamaño de su aplicación en más del 97 %. Después de cambiar a una PWA, Nikkei vio 2,3 veces más tráfico orgánico, un 58 % más de suscripciones y un 49 % más de usuarios activos diarios. Hulu reemplazó su experiencia de escritorio específica de la plataforma con una aplicación web progresiva y experimentó un aumento del 27 % en las visitas recurrentes”.

Esto solo rasca la superficie.

Echemos un vistazo a los resultados que otras marcas conocidas han logrado como consecuencia directa del lanzamiento de PWA.

• Alibaba impulsó las conversiones web móviles en un 76 %, vio un 14 % más de usuarios activos en iOS y un 30 % en Android
• Debenhams experimentó un aumento del 40 % en los ingresos móviles, un aumento del 20 % en las conversiones y un crecimiento en línea superior al mercado
• Pinterest experimentó un aumento del 40 % en el tiempo total dedicado, un crecimiento del 44 % en los ingresos publicitarios generados por los usuarios y un 60 % más de participación principal
• Forbes obtuvo un aumento del 43 % en las sesiones por usuario, una mejora del 20 % en la visibilidad de los anuncios y un 100 % más de participación
• BMW vio un aumento del 30 % en el CTR de su sitio de ventas, tiempos de carga 4 veces más rápidos, un crecimiento del 50 % en usuarios móviles y un 49 % más de tráfico orgánico
• MakeMyTrip aumentó la velocidad de la página en un 38 %, triplicó las tasas de conversión y experimentó un aumento del 160 % en las sesiones de los compradores
• AliExpress aumentó las tasas de conversión para nuevos usuarios en un 104 % (+82 % en iOS) y vio un aumento del 74 % en el tiempo dedicado por sesión con 2 veces más páginas visitadas por sesión
• Housing.com registró un 38 % más de conversiones, una sesión promedio un 10 % más larga, una tasa de rebote un 40 % más baja y un tiempo de carga de la página un 30 % más rápido en general
• Wego triplicó el CTR de anuncios y registró un 26 % más de visitantes y un 95 % más de conversiones en general. En iOS, obtuvieron un impresionante aumento del 50 % en la conversión y un aumento del 35 % en la duración de la sesión.
• Treebo vio un aumento de 4 veces en las conversiones año tras año. Los usuarios repetidos convirtieron 3 veces más.
• Tinder redujo a más de la mitad los tiempos de carga de 11,91 segundos a 4,69 segundos y vio un compromiso generalizado con un PWA un 90 % más pequeño que su aplicación nativa

¿Cómo son posibles todos estos sorprendentes resultados? Gran parte se reduce al hecho de que las PWA brindan una experiencia de usuario mucho mejor, y de eso se derivan excelentes resultados comerciales.

Sin embargo, hay más que eso. Echemos un vistazo más detallado a algunos de los beneficios clave de las aplicaciones web progresivas, comenzando con el más importante: la velocidad.

Las PWA son ultrarrápidas

Los consumidores modernos esperan una carga instantánea. Si algo no se carga en un abrir y cerrar de ojos, muchos perderán el interés, quizás de forma permanente. Esto se explica por sí mismo y está respaldado por una tonelada de datos:

• Casi el 50% de los usuarios dicen que su principal frustración en los dispositivos móviles es esperar a que se carguen páginas lentas (fuente)
• Las páginas que se cargan en 2 segundos tienen una tasa de rebote del 9%, las páginas que tardan 5 segundos tienen una tasa de rebote del 38% (fuente)
• Una "profunda disminución en la tasa de conversión" está asociada con tiempos de carga promedio que aumentan de 1 a 4 segundos (fuente)
• Cada mejora de 1 segundo en el tiempo de carga aumenta la tasa de conversión en un 2 %, mientras que una mejora de 100 milisegundos genera hasta un 1 % más de ingresos incrementales (fuente)

Esencialmente, cuanto más rápido cargue su sitio, mejor. Si haces esperar a tus clientes/lectores/usuarios, entonces un porcentaje decente de ellos rebotará y no te dará su dinero.

Mejorar la velocidad del sitio genera mejores resultados en todos los ámbitos. Eso es todo al respecto.

Entonces, ¿cómo puede ayudarte una PWA a lograr esto? Las aplicaciones web progresivas son rápidas. Realmente rápido.

Pinterest, por ejemplo, logró reducir su tiempo de carga de "tiempo para ser interactivo" de 23 segundos lentos a solo 5,6 segundos. Esto fue en promedio hardware de Android a través de una conexión 3G lenta. Esto tuvo un impacto bienvenido en las métricas clave.

No está mal. Sin embargo, los resultados de Pinterest no son inusuales en absoluto.

La plataforma de transmisión ZEE5 triplicó la velocidad del sitio y redujo a la mitad el tiempo de almacenamiento en búfer mediante la creación de una PWA. El PWA de Uber se carga en menos de 3 segundos en redes 2G. Forbes redujo los tiempos de carga móvil de 6,5 segundos en su sitio móvil anterior a solo 2,5 segundos con su PWA.

Las mejoras en la velocidad están garantizadas cuando crea una aplicación web progresiva buena y bien diseñada.

¿Por qué las aplicaciones web progresivas son tan rápidas?

Los PWA son tan rápidos gracias a los importantes trabajadores de servicio. Como dice Jason Grigsby en su excelente libro Progressive Web Apps:

“Las aplicaciones web progresivas utilizan trabajadores de servicio para brindar una experiencia excepcionalmente rápida. Los trabajadores del servicio permiten a los desarrolladores definir explícitamente qué archivos debe almacenar el navegador en su caché local y en qué circunstancias el navegador debe buscar actualizaciones en los archivos almacenados en caché. Se puede acceder mucho más rápido a los archivos que se almacenan en la memoria caché local que a los archivos que se recuperan de la red”

Grigsby continúa explicando que:

“Cuando alguien solicita una nueva página desde una aplicación web progresiva, la mayoría de los archivos necesarios para representar esa página ya están almacenados en el dispositivo local. Esto significa que la página puede cargarse casi instantáneamente porque todo lo que el navegador necesita para descargar es la información incremental necesaria para esa página”.

Una de las ventajas tradicionales de las aplicaciones nativas es que pueden ser ultrarrápidas. Lo logran de manera similar: todos los archivos necesarios para ejecutar la aplicación se descargan cuando la instala y solo necesita recuperar nuevos datos. ¡Los trabajadores de servicio permiten que las aplicaciones web progresivas brinden un rendimiento impresionante similar a la web!

Los PWA proporcionan una experiencia de usuario similar a una aplicación en la web

La velocidad, de la que ya hemos hablado, es obviamente una gran parte de UX. Sin embargo, hay otros factores importantes y los PWA también ayudan aquí.

Las aplicaciones móviles nativas fueron durante mucho tiempo el estándar de oro para la UX móvil. Todavía lo son (al menos en algunos aspectos), pero las PWA ahora pueden combinar gran parte de su apariencia y funcionalidad directamente desde el navegador.

Por ejemplo, las PWA pueden:

• Trabaje sin conexión o en malas condiciones de red (más sobre esto a continuación)
• Se instala en el dispositivo del usuario y se accede a través de un ícono de la pantalla de inicio como una aplicación nativa
• Envía notificaciones automáticas a la pantalla de bloqueo del dispositivo (desafortunadamente solo en Android)
• Estar desarrollado para ofrecer una experiencia "inmersiva" a pantalla completa con una estructura de navegación que imite una aplicación nativa
• Haz uso de animaciones como una aplicación nativa
• Estar desarrollado para acceder al hardware del dispositivo, como la cámara y el GPS.

La web móvil temprana fue bastante difícil. El viejo paradigma de un navegador de escritorio fue "atornillado" a los teléfonos inteligentes donde realmente no encajaba. La era del diseño receptivo mejoró esto significativamente, pero siempre faltaba algo.

Las aplicaciones nativas se crearon sin ambigüedades para los teléfonos inteligentes. Siempre se ajustaban mejor a la experiencia del dispositivo. Sin embargo, los PWA han difuminado esta línea, la distinción en términos de experiencia puede ser difícil de precisar.

Por ejemplo, ¿ha usado alguna vez Instagram Lite, Google Maps Go o Twitter Lite?

Puede descargarlos en la tienda Google Play y comprobarlos, y ver cómo se sienten como cualquier otra aplicación nativa.

Se le perdonará que suponga que se trata de versiones más ligeras y esbeltas de sus principales aplicaciones nativas. Sin embargo, como habrás adivinado, son aplicaciones web progresivas.

Esto demuestra el potencial de las PWA para recrear las experiencias de aplicaciones nativas que todos conocemos y amamos. Cuando lleguemos a los ejemplos un poco más tarde, verá exactamente lo que queremos decir.

Nota: es posible que haya notado que estos PWA están activos en la tienda Google Play. ¡Google abrió Play Store para PWA a principios de 2019! Esto demuestra la confianza que tienen en el futuro de las PWA como aplicaciones verdaderamente multiplataforma. Tienes que pasar por algunos aros para que tu PWA esté allí, pero ciertamente es posible. A partir de ahora, no hay información de Apple sobre si esto alguna vez será posible en la App Store de iOS.

Los PWA son confiables

Todos hemos tenido la experiencia de intentar usar un sitio web o una aplicación web en una conexión móvil inestable. no es divertido

Gracias nuevamente a los trabajadores del servicio, que definen específicamente lo que el navegador debe almacenar en caché localmente: los PWA se pueden construir para ofrecer una experiencia rápida y completa, incluso cuando el usuario tiene poca conectividad.

Esto también se puede llevar un paso más allá. A través del "precaching", que es cuando toda la aplicación se descarga y almacena en la primera visita, ¡las PWA también pueden funcionar completamente fuera de línea!

Esto es realmente importante, cuando se considera cuántas personas aún viven en áreas rurales y mal atendidas, y los mil millones de personas que se conectarán por primera vez en los próximos años, muchas de las cuales no disfrutarán de una conectividad perfecta.

Las PWA son seguras, eficientes y adaptables

Para que los trabajadores de servicios hagan lo suyo, su sitio web debe ser completamente seguro con HTTPS.

Es de esperar que ya lo haga, pero si no crea una PWA, lo obligará a hacer todo el trabajo necesario para que su sitio sea 100% seguro.

Los PWA también son muy eficientes . Un factor clave que disuade a las personas de descargar aplicaciones móviles nativas es el espacio de almacenamiento disponible en su dispositivo. Como lo expresaron los autores de The PWA Book:

“Tratan sus dispositivos móviles como cámaras, computadoras, blocs de notas, asistentes y, lo que es más importante, como un tesoro de recuerdos. Si descargar una aplicación significa que tienen que sacrificar fotos o mensajes preciosos, lo piensan tres veces antes de hacer clic en sí”.

Las PWA no obligan a las personas a tomar decisiones tan difíciles. Son mucho más ligeras que las aplicaciones nativas y el proceso de instalación tiene menos fricción (un toque en un botón y se crea un acceso directo en la pantalla de inicio). El PWA ocupa un poco de espacio en el dispositivo, pero es insignificante en comparación.

Los trabajadores de servicio que impulsan esta eficiencia también son responsables de reducir la carga del servidor y minimizar el riesgo de un rendimiento lento y bloqueos durante períodos intensos.

Las aplicaciones web progresivas también son muy adaptables. Dado que se basan en la web, se pueden mantener y actualizar más fácilmente que las aplicaciones móviles nativas.

Cuando desee cambiar o actualizar algo, puede moverse rápido, no es necesario lidiar con los guardianes de la App Store, solicitar que el usuario actualice manualmente o contratar desarrolladores de aplicaciones nativos especializados.

Es tan fácil como actualizar su sitio hoy, y las actualizaciones (implementadas en un servidor) están disponibles casi instantáneamente para el usuario.

Los PWA le permiten involucrar a los usuarios con notificaciones automáticas

Llevamos años hablando del poder de las notificaciones push. Son la mejor manera de interactuar y comunicarse con su audiencia en dispositivos móviles, sin excepción. Puede usarlos para actualizar a los usuarios, empujarlos de regreso a las aplicaciones, promocionar ofertas y productos y, en general, mantenerse en la mente en sus vidas ocupadas.

Estos son algunos ejemplos de cómo las diferentes empresas pueden usar las notificaciones automáticas:

• Editores de noticias

“Breaking News, ¡X e Y acaban de suceder!”

Las notificaciones automáticas funcionan muy bien para los editores digitales y les permiten dirigir el tráfico de regreso a sus historias principales y alertar a los usuarios con noticias de última hora urgentes.

• Tiendas de comercio electrónico

"Oferta especial / abandonó su carrito / sus artículos han sido enviados"

Push funciona maravillosamente para el comercio electrónico. Las aplicaciones de compras envían notificaciones regularmente para alertar a los usuarios sobre ofertas y nuevos productos, mantenerlos actualizados con el proceso de entrega y entregar códigos de cupón especiales solo para aplicaciones.

• Plataformas Sociales y Comunidades

“Tu amigo acaba de enviarte un mensaje/solicitud de amistad/te respondió”

Es probable que todos hayamos experimentado mensajes push de plataformas sociales antes. Son el ingrediente secreto que usan las aplicaciones sociales para que vuelvas a su plataforma, te involucres e interactúes con otros usuarios.

Estos son algunos de los casos de uso. Pero realmente las notificaciones automáticas pueden ser un gran impulso para cualquier negocio. Fueron (y siguen siendo) una de las razones más poderosas para crear aplicaciones nativas.

Gracias nuevamente a nuestros trabajadores del servicio de amigos: ya no necesita aplicaciones nativas para enviar notificaciones automáticas. Puedes enviarlos desde tu sitio web (si lo conviertes en una PWA).

Las notificaciones automáticas deben usarse correctamente y no abusarse, pero pueden traer muchos beneficios y son un gran beneficio de construir una PWA.

Por ejemplo, después de crear una PWA, Lancome observó que el 8 % de los consumidores que tocan una notificación automática realizan una compra y mejoró las tasas de conversión en los carritos recuperados en un 12 % a través de las notificaciones automáticas.

Otro es eXtra Electronics, el principal minorista de productos electrónicos de Arabia Saudita. eXtra hizo un 100 % más de ventas de los usuarios que llegaban a través de web push y notó que aquellos que optaron por las notificaciones push regresaron 4 veces más a menudo y pasaron el doble de tiempo en el sitio. El director de desarrollo comercial, Mujeed Hazzaa, dijo que:

“Las notificaciones automáticas son una gran parte de nuestra estrategia de participación móvil. Es una forma más personal de comunicarse con nuestros clientes. Eso es increíblemente valioso para nuestro resultado final”.

Cuando convierte su sitio en una aplicación web progresiva, también puede obtener buenos resultados para su negocio. Hay una gran advertencia: solo puedes usarlos en Android. iOS no los admite, y nadie sabe si alguna vez lo hará. Si las notificaciones automáticas son importantes para usted y desea enviarlas a todos los usuarios , deberá crear aplicaciones móviles nativas.

Las aplicaciones web progresivas harán crecer su negocio

Hemos repasado algunos de los beneficios más importantes de convertir su sitio en una aplicación web progresiva.

La conclusión es que tienen mucho sentido para cualquier negocio con un sitio web. Le permiten actualizar toda su experiencia de usuario web y ofrecen una experiencia rápida y moderna que está casi garantizada para mejorar las métricas clave.

¿Cuáles son las desventajas de construir una PWA?

Ninguno realmente, excepto el tiempo y el dinero que necesita invertir para construir uno. Aun así, una PWA es relativamente asequible y es muy probable que (más que) se pague sola con el tiempo, especialmente si su sitio está vinculado a algún tipo de ingresos a través de publicidad, comercio electrónico o membresías.

¿Todavía necesitas convencerte?

Vamos a unir todo con algunos ejemplos. Destacaremos 50 de los mejores ejemplos de aplicaciones web progresivas en Internet y le mostraremos de primera mano lo que hemos estado discutiendo hasta ahora.

Ejemplos de aplicaciones web progresivas: las 50 mejores PWA en Internet en 2020

Si desea desarrollar una PWA impresionante, el primer paso es buscar ejemplos exitosos de aplicaciones web progresivas para inspirarse.

Como parte de nuestra misión de inspirarte, hemos recopilado 50 ejemplos modelo de las mejores PWA que existen en este momento. Puede saltar a la sección que sea más relevante para su propio negocio, hojear la lista hasta que algo le llame la atención o leer todos los ejemplos de aplicaciones web progresivas para obtener una buena descripción general.

Entremos en nuestros 50 mejores ejemplos de PWA.

comercio electrónico y venta al por menor

starbucks

Para una de las cadenas de café más populares del mundo, Starbucks desarrolló su PWA para aumentar la participación de sus clientes al presentar programas de fidelización y un proceso de pedido más sencillo.

La aplicación fue diseñada para reemplazar su antigua aplicación móvil para mantener su participación mejor sin importar el dispositivo.

Los usuarios pueden ver primero su sección de Recompensas, donde los clientes pueden canjear sus comidas y bebidas gratis, obsequios de cumpleaños, recargas y opciones de pago cuando realizan pedidos a través de su teléfono inteligente.

El resto de la página de la aplicación presenta pedidos personalizados, disponibilidad en la tienda, detalles de entrega y menú de la aplicación.

Y al igual que pedirle a un barista, pedir su bebida favorita le permite personalizar su tamaño, complementos y opciones de tragos. Starbucks también agrega secciones de información nutricional, ingredientes y alérgenos para aquellos que controlan su dieta.

Lo que nos gusta de esta PWA de comercio electrónico:

• Funciona bien incluso en conexiones de red débiles
• Totalmente integrado con otras plataformas y servicios de otras marcas como Spotify, Lyft y Ford
• Procesos de pago y pago móviles sin inconvenientes
• Diseño extremadamente fácil de usar

jumia

Lo que Alibaba es para China, Jumia es para África. Este exitoso mercado en línea se lanzó por primera vez en Nigeria en 2012 y luego se hizo cargo rápidamente de la industria del comercio electrónico de África desde entonces.

En 2016, lanzó su PWA como respuesta a las conexiones de Internet inestables en la región subsahariana. Con PWA, pudo acaparar una parte importante del mercado basándose en redes 2G con límites de datos.

La introducción de una PWA fue la solución perfecta para brindar una experiencia de usuario similar a la de una aplicación sin consumir un gran ancho de banda de datos.

¿El resultado? Según Google, la empresa incrementó su tasa de conversión en un 33 % y aumentó sus usuarios 12 veces más (en comparación con las aplicaciones nativas). Además, ha reducido enormemente su tasa de rebote y los requisitos de almacenamiento del dispositivo del usuario.

Lo que nos gusta de esta PWA de comercio electrónico:

• Acceso sin conexión confiable
• Capacidad de búsqueda rápida
• Proceso de carga rápida
• Fácil instalación

OLX.en

Cuando se trata de PWA para el mercado en línea, confíe en la empresa india de anuncios clasificados OLX.in. Con sus sólidas categorías que abarcan desde propiedades hasta moda, los vendedores y compradores se combinan mejor con el PWA de la empresa.

Los usuarios pueden notar fácilmente la facilidad de uso de la aplicación cuando buscan productos específicos u obtienen grandes ofertas de los vendedores.

OLX reveló que ha experimentado un CTR más alto en sus anuncios y una enorme caída del 80 % en las tasas de rebote desde que hizo la transición a PWA, según lo informado por Google.

Lo que nos gusta de esta PWA de comercio electrónico:

• Notificaciones push incluso en modo fuera de línea
• Fácil función de integración de cámara creada para vendedores
• Función de historial de búsqueda

Flipkart

Otro competidor en la escena del comercio electrónico indio es Flipkart que continúa redefiniendo la experiencia de compra en línea con su PWA.

A medida que los usuarios se desplazan hacia abajo por la aplicación, se presentan categorías de productos, ofertas limitadas, bestsellers y descuentos, con el objetivo de enganchar al cliente para navegar y pasar más tiempo en la aplicación.

La PWA de Flipkart comenzó en 2015 a través de Flipkart Lite. La empresa quería que las compras fueran más accesibles entre los indios, incluso si las conexiones a Internet eran intermitentes en la mayoría de las áreas.

Lo que nos gusta de esta PWA de comercio electrónico:

• Las notificaciones push para las últimas noticias y actualizaciones son consistentes
• Se agiliza el proceso de compra en línea
• La capacidad de búsqueda es precisa

fórmulas puras

Al darse cuenta de que el mercado de suplementos para la salud se ha vuelto más competitivo que nunca, Pure Formulas, con sede en EE. UU., se considera pionera en esta industria cuando se trata de lanzar su propia PWA.

Después de descubrir que su sitio web y su aplicación móvil sufrían tasas de rebote muy altas debido a un proceso de pago lento, la empresa desarrolló un PWA que les dio un cambio completo.

Informó conversiones más altas y un aumento en el valor promedio de pedido (AOV).

Lo que nos gusta de esta PWA de comercio electrónico:

• Proceso de pago muy conveniente
• Diseño minimalista
• Requisito de almacenamiento de dispositivo muy ligero
• Transacciones altamente seguras

aliexpress

Con una PWA de gran capacidad de respuesta, Ali Express se considera una de las aplicaciones más demandadas en la actualidad para transacciones B2C.

Gracias a la amplia cobertura de categorías de productos de la empresa, los usuarios pueden navegar a través de miles de opciones sin ralentizar la carga de la página mediante la PWA.

Desde su lanzamiento, AliExpress ha anunciado que ha experimentado mejores estadísticas de reenganches y conversiones gracias a su PWA.

Lo que nos gusta de esta PWA de comercio electrónico:

• Navegación fácil del producto
• Tiempo de carga más rápido
• Diseño fácil de usar

alibaba

El Grupo Alibaba de Jack Ma no necesita más presentación cuando se trata del éxito de su Alibaba PWA. La aplicación de comercio electrónico B2B es un modelo ideal para cualquier PWA: rápida, receptiva, liviana y muy atractiva.

Alibaba tuvo éxito en términos de su web móvil y lanzamientos de aplicaciones móviles. Sin embargo, necesitaba acaparar una gran parte del mercado a través de un compromiso mejorado. Y el PWA de la compañía fue la solución perfecta para eso.

Informó un aumento del 76% en las conversiones totales según Google.

Lo que nos gusta de esta PWA de comercio electrónico:

• Navegación fácil del producto
• Integración con las herramientas del sitio web como Feeds, Messenger y Mi cuenta de Alibaba
• Tiempo de carga más rápido

Objetivo

Para no ser superada por sus competidores, la octava cadena minorista más grande de Estados Unidos, Target, actuó rápidamente en su estudio de análisis de clientes. En 2015, descubrió que sus clientes comienzan su viaje en su dispositivo móvil y luego realizan la compra usando su computadora.

La gerencia pensó en introducir una PWA y, desde entonces, los usuarios de su aplicación han aumentado en gran medida y las transacciones en línea han mejorado significativamente sin alienar a los usuarios en diferentes dispositivos.

Lo que nos gusta de esta PWA de comercio electrónico:

• Opción fácil de agregar al carrito
• Imágenes de carga rápida sin importar el tamaño

walmart

Para una experiencia de aplicación perfecta, el PWA de Walmart simplemente llega a la larga lista de verificación de un desarrollador de aplicaciones. Con miles de ofertas de productos, el gigante minorista puede integrar compras en línea y opciones de recogida/entrega para cada transacción.

Su función de seguimiento geográfico monitorea los artículos más vendidos en el área del usuario, lo que permite que la aplicación ofrezca recomendaciones basadas en dicha lista.

Finalmente, su uso efectivo de notificaciones automáticas permite a la compañía familiarizar a su base de seguidores leales con excelentes ofertas y nuevos hallazgos.

Lo que nos gusta de esta PWA de comercio electrónico:

• Sección de comentarios
• Función de seguimiento geográfico
• Interfaz muy receptiva
• Rendimiento perfecto en una red inestable

Macy´s

La marca minorista de alta gama, Macy's, tenía un objetivo en mente cuando lanzó su PWA: brindar la mejor experiencia a sus millones de visitantes mensuales.

Reconociendo el crecimiento de los usuarios de su aplicación, la PWA de la compañía fue una adición bienvenida a sus herramientas de consumo para mantener a sus compradores al tanto de las novedades en los estantes de las tiendas.

Lo que nos gusta de esta PWA de comercio electrónico:

• Herramienta confiable de búsqueda de tiendas
• Diseño de producto organizado

Lancome

La marca francesa de cosméticos de lujo Lancome se encontró con un obstáculo en sus ventas en línea: los usuarios de dispositivos móviles aumentaron, pero las conversiones disminuyeron.

Para comprender el problema, la empresa analizó el comportamiento de los clientes y descubrió que tenían una experiencia de usuario terrible en la aplicación móvil.

La marca cambió a PWA para reducir el tiempo de carga y hacer que la aplicación sea altamente accesible. Según Google, las notificaciones automáticas contribuyeron con un 12 % en las conversiones y las sesiones móviles aumentaron un 51 %.

Lo que nos gusta de esta PWA de comercio electrónico:

• Fast search results
• Easy navigation

News

Financial Times

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Easy navigation

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Easy navigation
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

Medio

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• Sensible
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• Offline access

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• Real-time updates
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• Notificaciones push

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• Actualizaciones en tiempo real
• Funcionalidad de búsqueda

Directorio

kopa

Anteriormente conocido como PadPiper, Kopa es un mercado de apartamentos amueblados e inquilinos. Ofrece verificación tanto para los inquilinos como para los anfitriones de alquiler, por lo que hacer coincidirlos es más seguro.

PadPiper lanzó inicialmente su PWA para ayudar a los estudiantes a encontrar una vivienda adecuada durante el año escolar o una vez que comienzan sus prácticas. También pensó en aprovechar la oportunidad de conectar a los estudiantes y averiguar quién está trabajando cerca de ellos para facilitar la búsqueda de compañeros de habitación.

Lo que nos gusta de este directorio PWA:

• Resultados de búsqueda rápidos
• Características del alojamiento de alquiler
• Diseño minimalista

Rentio

Este mercado de alquiler de cámaras y electrodomésticos es una solución para aquellos que necesitan temporalmente dichos artículos.

Los usuarios realizan un pedido en línea y esperan a que el artículo se envíe el mismo día. Una vez finalizado el período de alquiler, el usuario deberá devolver el artículo u optar por comprarlo.

La PWA de Rentio (en japonés o inglés) ofrece una interfaz fácil de navegar, resultados de búsqueda rápidos, muchas categorías y un tiempo de respuesta rápido.

Lo que nos gusta de este directorio PWA:

• Capacidades de búsqueda
• Proceso de transacción rápido
• Navegación conveniente

alegre

Como plataforma de contratación de desarrolladores, Joppy atiende a empresas en busca de talento y a algunos de los mejores solicitantes de oportunidades laborales en tecnología.

Esta plataforma se enfoca en hacer coincidir las preferencias de los solicitantes con los requisitos establecidos por los reclutadores. Pero a diferencia de otras bolsas de trabajo en línea, los aspirantes a empleo pueden configurar su perfil como anónimo para que nadie pueda molestarlos con propuestas no solicitadas.

El PWA de Joppy está claramente diseñado tanto para el reclutador como para el solicitante (que se encuentran principalmente en Barcelona) para simplificar el proceso de solicitud.

Lo que nos gusta de este directorio PWA:

• Tiempo de respuesta rápido
• Proceso de emparejamiento rápido

OpenRent

Buscar un mercado inmobiliario de alquiler en el Reino Unido puede ser un dolor de cabeza sin la herramienta en línea adecuada. Con la PWA de OpenRent, los inquilinos y los propietarios pueden buscar convenientemente la opción adecuada cuando se trata de propiedades disponibles.

El PWA proporciona una respuesta rápida y actualizaciones en tiempo real. Esto es crucial para el sitio, ya que OpenRent elimina los listados tan pronto como se permiten para evitar anuncios fantasma que frustran a los posibles inquilinos.

Lo que nos gusta de este directorio PWA:

• Capacidad de filtro de resultados
• Fácil adición de propiedad
• Tiempo de respuesta rápido

Venta de coches

Para un mercado de automóviles en línea en PWA, Carsales, uno de los destinos más populares entre los compradores de automóviles en Australia, ofrece mucha comodidad a sus usuarios.

Los compradores pueden buscar automóviles según el tipo de carrocería, la marca, el precio y las ofertas especiales. Los vendedores, por otro lado, pueden solicitar una evaluación de su automóvil y Carsales se encargará del resto.

La PWA también ofrece consejos de expertos a través de reseñas, recomendaciones y consejos sobre el cuidado de su automóvil.

Lo que nos gusta de este directorio PWA :

• Gran experiencia móvil primero
• Sensible a cualquier tamaño de pantalla
• Fácil experiencia fuera de línea

Carigamis

Carigami es un corredor minorista de automóviles francés que conecta a proveedores y arrendatarios. El PWA proporciona comparaciones de precios confiables de automóviles de acuerdo con las preferencias de búsqueda del usuario sobre la ciudad, la edad del conductor, la fecha y la hora.

La aplicación devuelve resultados de búsqueda completos en segundos con todos los detalles de cada alquiler de auto.

Lo que nos gusta de este directorio PWA:

• Tiempo de carga rápido
• Resultados de búsqueda precisos
• Filtros de búsqueda

Brillar

Shine es el segundo portal de empleo más importante de la India que se fundó en 2008. Combina candidatos con más de 15,000 empresas en una variedad de industrias.

Su PWA es uno de los mejores para un sitio de búsqueda de empleo. Por ejemplo, la búsqueda de trabajos específicos se puede filtrar fácilmente según las habilidades, la designación, el departamento, la industria, la ubicación y la educación.

Las alertas de trabajo también se envían sin problemas al dispositivo de un usuario.

Lo que nos gusta de este directorio PWA:

• Notificaciones push
• Totalmente accesible
• Página sin conexión personalizada

Social o Comunitario

Tinder

Cuando Tinder irrumpió en el mercado de la escena de las citas, a muchos usuarios les encantó la aplicación por su enfoque innovador para el emparejamiento.

En 2017, la empresa invirtió en su propia PWA después de tres meses de desarrollo. Los beneficios se observaron al instante. En primer lugar, pudo reducir su inversión en datos de 30 MB en su aplicación nativa a solo 2,8 MB en la PWA.

También informó una carga de página más rápida y una mejor participación de los usuarios (en términos de sesiones de deslizamiento, mensajes, compras y gastos).

Lo que nos gusta de esta PWA social:

• Notificaciones push
• Facilidad de uso
• Rendimiento optimizado (división de código basada en rutas)

Pinterest

Durante tres meses, Pinterest, la popular plataforma para compartir imágenes y redes sociales, creó una PWA para expandir su base de usuarios internacional. Según Google, en comparación con su antiguo sitio móvil que tenía 650 KB, el tamaño de 150 KB de la PWA fue suficiente para impresionar a sus usuarios.

Los suscriptores de Pinterest ahora también pueden esperar solo 5,6 segundos para que la interfaz de usuario sea utilizable en comparación con los 23 segundos anteriores en la aplicación móvil anterior.

Los primeros resultados de la transición a PWA fueron prometedores: más del 40 % de aumento en el tiempo dedicado a la aplicación, los anuncios generados por los usuarios aumentaron en un 44 %, los clics en los anuncios aumentaron en un 50 % y las interacciones principales mejoraron en un 60 %.

Lo que nos gusta de esta PWA social:

• Notificaciones push
• Bajo uso de ancho de banda
• Impresionante soporte fuera de línea

Telegrama

Telegram interrumpió el servicio de mensajería instantánea en 2013 al proporcionar una herramienta basada en la nube que es compatible con diferentes dispositivos.

Al momento de escribir este artículo, más de 400 millones de usuarios activos mensuales confían en este servicio seguro multiplataforma para intercambiar mensajes de texto, fotos, videos y archivos de audio.

Cuando se lanzó su PWA para proporcionar la misma funcionalidad que su aplicación móvil nativa (pero en un tamaño más pequeño), la empresa informó un aumento en las sesiones por usuario y el tiempo de retención en un 50 %.

Lo que nos gusta de esta PWA social:

• Instalable en iOS y Android
• Soporte fuera de línea
• Manifiesto

Gorjeo

Uno de los primeros PWA que se lanzó es de Twitter con su Twitter Lite PWA allá por 2017. Los desarrolladores de aplicaciones lo usaron más tarde como modelo para integrar funciones web y de aplicaciones nativas en una aplicación más ideal para dispositivos móviles.

Según Google, el objetivo de la PWA era mejorar el reenganche de sus 250.000 usuarios diarios que revisan sus cuentas en promedio cuatro veces al día.

Al reducir el consumo de datos, mejorar la carga instantánea (5 segundos en una red 3G) y mejorar la participación de los usuarios, la empresa informó un aumento del 65 % en las vistas de página por sesión, un aumento del 75 % en los Tweets enviados y una caída del 20 % en la tasa de rebote. .

Lo que nos gusta de esta PWA social:

• Navegador optimizado (división de código basada en rutas)
• Menos uso de ancho de banda
• Actualizaciones rápidas

Instagram

Instagram siguió la estrategia de Twitter de ofrecer una PWA tan pronto como se lanzó la aplicación de este último. A principios de 2020, Instagram también actualizó su aplicación de Windows 10 para que sea una PWA completa con mensajería directa.

Si bien su aplicación nativa todavía se comercializa, el sitio en el navegador móvil de un dispositivo ofrece la misma funcionalidad y experiencia de usuario. Los usuarios obtienen las mismas funciones que han disfrutado durante mucho tiempo desde la aplicación de escritorio y móvil.

Lo que nos gusta de esta PWA social:

• Notificaciones push
• Tiempo de carga instantáneo
• Respuesta rapida

Viajes y Reservas

airbnb

Airbnb es una plataforma en línea que ofrece arreglos convenientes para alquileres y experiencias turísticas en todo el mundo. En 2008, la empresa comenzó a conectar a propietarios de viviendas que buscaban alquilar sus habitaciones adicionales con viajeros que buscaban alojamiento asequible.

Diez años más tarde, la PWA se actualizó para funcionar bien con Edge en Windows 10 móvil. El resultado es una transición de página instantánea más fluida para los clientes. Hasta la fecha, hay más de 80 millones de visitantes mensuales en Airbnb, la mayoría de los cuales están en su aplicación.

Lo que nos gusta de esta PWA:

• Notificaciones push
• Respuesta rapida
• Imágenes de alta calidad que se cargan en segundos

Árbolbo

Otro líder en la industria de reservas en línea es Treebo, una plataforma de reservas de hoteles. Al ofrecer opciones de alojamiento en más de 165 ciudades de la India, los usuarios pueden comparar opciones para obtener las mejores ofertas.

Según Google, su PWA se carga en solo cuatro segundos a través de la red 3G. El sitio también informa que ha logrado cinco veces más clics y ha triplicado su tasa de conversión.

Lo que nos gusta de esta PWA:

• Representación del lado del servidor
• Rápido tiempo de interacción
• Representación progresiva (transmisión HTML)

Nosotros vamos

Apodado como el sitio relacionado con viajes más grande en las regiones de Asia Pacífico y Medio Oriente, Wego ha tenido en cuenta el comportamiento de sus consumidores cuando diseñó su PWA.

Dado que la mayoría de los viajeros confían en sus teléfonos para guardar fotos, el espacio de almacenamiento puede agotarse fácilmente. Además, viajar a diferentes lugares puede ser frustrante con conexiones a Internet lentas e inestables.

Para que sus usuarios tuvieran la comodidad de reservar habitaciones de hotel y vuelos, se creó una PWA. Wego anunció que ha reducido el tiempo de carga de su página de 12 segundos a poco menos de tres segundos según Google.

Lo que nos gusta de esta PWA:

• Respuesta extremadamente rápida
• Diseño minimalista
• Resultados de búsqueda precisos
• Ligero

hacer mi viaje

MakeMyTrip, una de las principales agencias de viajes en línea de la India, se unió al carro de la PWA para atender mejor a sus 8 millones de visitantes mensuales.

Después de experimentar el éxito en su aplicación nativa, la empresa descubrió que la conectividad limitada en el país con límites de datos en teléfonos inteligentes inferiores puede hacer que el acceso de los usuarios sea muy frustrante.

Además, notó que los visitantes pasaban más tiempo en su sitio web que en su aplicación nativa. Por lo tanto, replicar la misma experiencia es crucial para los usuarios de teléfonos móviles.

El resultado es un enorme aumento del 160 % en las sesiones de los clientes y una caída del 20 % en la tasa de rebote según Google. Además, es probable que los compradores por primera vez conviertan tres veces más que aquellos que usaron la aplicación nativa antes.

Lo que nos gusta de esta PWA:

• Fácil navegación
• Instalable en cualquier SO
• Tiempo de carga rápido

inicio de viaje

Aprovechando el éxito de su mercado en línea, Jumia se aventuró en la industria de viajes con Jumia Travel. Su PWA fue fundamental para aumentar el tráfico doce veces y las tasas de conversión en un 33% según Google.

Luego, Travelstart adquirió Jumia Travel en 2019 para crear una de las plataformas más grandes en la industria de viajes. Los usuarios móviles de Jumia Travel son redirigidos a Travelstart incluso en la PWA, donde pueden reservar vuelos, alojamiento en hoteles y coches de alquiler.

Lo que nos gusta de esta PWA:

• Tiempo de carga rápido
• Interfaz sencilla

Trivago

Para dar cabida a sus 120 millones de visitantes al mes, la empresa tecnológica alemana Trivago lanzó su PWA para ayudar a más usuarios a buscar y comparar precios de hoteles antes de emprender un viaje.

Cubriendo casi 200 sitios de reserva, la aplicación funciona rápido en términos de generar comparaciones de precios. Los usuarios también pueden utilizar cómodamente el mapa de Trivago, reseñas de hoteles reales y consultar búsquedas anteriores para ahorrar tiempo y ancho de banda.

Más de medio millón de usuarios de 55 países agregaron la PWA a sus pantallas de inicio, lo que resultó en un aumento del 150 % en la interacción y del 97 % en los clics para ofertas de hoteles según el informe de Google.

Lo que nos gusta de esta PWA:

• Instalable en Android e iOS
• Excelente soporte fuera de línea
• Respuesta rapida
• Filtros de búsqueda
• Soporte multilingüe

Uber

La PWA de Uber es una de las aplicaciones con un diseño más exclusivo en la actualidad. La empresa de transporte compartido colocó su aplicación Window 10 entre bastidores en 2018 a favor de la PWA que se lanzó por primera vez en julio de 2019.

En comparación con su aplicación móvil nativa, la PWA de Uber solo ocupa 50 KB de espacio de almacenamiento. Se carga muy rápido, lo que lo hace muy conveniente cuando estás atrapado en un área con una red débil.

Dependiendo de la ubicación de uno, Uber ofrece servicios de transporte compartido, entrega de alimentos, alquiler de bicicletas y scooters, y viajes compartidos aéreos con un toque en el dispositivo móvil.

Lo que nos gusta de esta PWA:

• Tiempo de carga rápido
• Soporte fuera de línea
• Ligero
• Proceso de reserva extremadamente rápido

Lyft

El competidor de Uber, Lyft, que se fundó en 2012, ha ampliado sus bases de pasajeros y conductores en los Estados Unidos y Canadá.

Ofreciendo tarifas más baratas (en términos de un plan de suscripción para pasajeros frecuentes), la empresa se ha hecho con una enorme cuota de mercado que alguna vez estuvo dominada por Uber. Introdujo su PWA en 2016

Para los nuevos usuarios, la PWA proporciona un proceso de registro sencillo, así como servicios de reserva, por lo que su aplicación nativa es conocida.

Lo que nos gusta de esta PWA:

• Tiempo de respuesta rápido
• Actualizaciones confiables en tiempo real

Tajawal

Una aplicación de reserva de vuelos y hoteles muy popular en los EAU, Tajawal ofrece soluciones completas para acceder a más de 450 aerolíneas y miles de hoteles para viajeros.

El PWA funciona muy rápido y ofrece soluciones de reserva fáciles a través de un proceso simplificado. La interfaz es sencilla y se centra principalmente en las reservas.

Lo que nos gusta de esta PWA:

• Carga de página muy rápida
• Transacciones garantizadas

FlyWeekend

Esta exclusiva empresa de reservas de viajes se fundó en 2017 en Ámsterdam. El objetivo es ofrecer itinerarios de viaje solo de fin de semana para que los usuarios puedan subirse a un avión y experimentar un retiro de dos días según la recomendación del sistema.

Los usuarios de FlyWeeked simplemente ingresan su ubicación actual y seleccionan un fin de semana en el que les gustaría tomar un descanso. Luego, el sistema proporciona una lista de ciudades en las que el usuario puede hacer clic para "deslizarse" si no está interesado, o reservar el viaje en su lugar.

El PWA es fácil de usar, lo que garantiza un mayor compromiso debido al concepto único.

Lo que nos gusta de esta PWA:

• Tiempo de respuesta rápido
• Carga rápida de página

primo genial

Visitar un país extranjero puede ser más emocionante cuando un local que comparte sus intereses puede guiarlo durante su viaje. Con Cool Cousin, los visitantes pueden seleccionar guías de ciudades locales confiables en su plataforma fácil de usar.

Los llamados "primos" van desde cirujanos hasta músicos, pero todos comparten la misma pasión por ser los anfitriones de los turistas en su ciudad natal.

Su PWA se lanzó en 2018 para brindar una experiencia de acceso más rápida y fluida entre sus usuarios. En su actualización oficial, la compañía anunció que la aplicación redujo el tiempo de carga en un 25 % y redujo el acceso de los usuarios a otras fuentes en línea.

Lo que nos gusta de esta PWA:

• Tiempo de respuesta rápido
• Fácil navegación

Entretenimiento

rebanada de sonido

Aprender a tocar la guitarra, el piano, el saxo o el banjo ahora es más fácil con Soundslice, una aplicación que sincroniza la notación musical con audio real.

El PWA de Soundslice es perfecto para sesiones de autoaprendizaje utilizando un dispositivo móvil. Permite al usuario cambiar el tono, las secciones de bucle y anotar la música. Por otro lado, los profesores de música pueden desarrollar sesiones interactivas utilizando la herramienta.

Los "fragmentos" de muestra permiten a los usuarios reproducir el audio acompañado de una guía de línea vertical en movimiento en la partitura.

Lo que nos gusta de esta PWA:

• Diseño interactivo
• Tiempo de carga rápido

Spotify

Para el servicio de transmisión de música digital Spotify, aprovechar una aplicación ligera a través de PWA es imprescindible para conseguir más suscriptores.

La aplicación móvil y de escritorio de Spotify se replican en la PWA, lo que brinda a los oyentes la misma comodidad incluso cuando escuchan sin conexión. El PWA se carga mucho más rápido y los colores de fondo se adaptan a los géneros de los álbumes para darle un toque más personalizado.

Lo que nos gusta de esta PWA:

• Interfaz de usuario adaptable
• Soporte fuera de línea
• Diseño interactivo

1 sintonizador

Contrariamente a la creencia popular, la radio no está muerta. Con 1Tuner, cualquier usuario puede escuchar estaciones de radio (en cualquier parte del mundo) y podcasts.

Incluso pueden crear listas de reproducción para que no se pierdan las transmisiones de Brasil o las mejores canciones que se reproducen en las estaciones locales de Londres.

El PWA también funciona perfectamente. Seleccionar una estación de radio en particular le permite escuchar la transmisión en tiempo real. Por otro lado, los podcasts se entregan con una excelente calidad de audio.

Lo que nos gusta de esta PWA:

• Tema personalizable
• Gran cantidad de recomendaciones de contenido.

9GAG

El humor en línea nunca ha sido el mismo desde el lanzamiento de 9GAG. Con memes, videos e imágenes de Internet compartidos por usuarios de todo el mundo, el sitio se ha convertido en una fuente de entretenimiento.

Sin embargo, pronto se dio cuenta de que su antigua aplicación nativa requería más tiempo para cargarse, especialmente cuando el contenido de moda incluía muchos videos.

9GAG cambió a PWA para reducir la velocidad de carga de la página y fomentar una mejor participación de los usuarios. El sitio reveló que sus usuarios permanecieron en la aplicación un 25 por ciento más en comparación con su aplicación nativa.

Lo que nos gusta de esta PWA:

• Instalable en Android e iOS
• Soporte fuera de línea
• Tiempo de carga rápido

Lotto.de

La información recopilada en tiempo real sobre los últimos resultados de la lotería europea en esta PWA proporciona un recurso útil para los jugadores.

El PWA se carga extremadamente rápido y funciona bien con dispositivos de gama baja y con malas conexiones a Internet. Para cualquier jugador de lotería que no pueda esperar a conocer los últimos resultados, este PWA es un compañero útil.

Lo que nos gusta de esta PWA:

• Experiencia de usuario fluida
• Disponibilidad en alemán e inglés

Resumiendo los 50 mejores ejemplos de PWA

Con suerte, estos ejemplos de aplicaciones web progresivas resaltaron algunos de los puntos principales que hemos estado tratando en esta guía.

Estas marcas invirtieron en su UX móvil y cosecharon los beneficios. Puede y debe seguir sus pasos e ir "primero en dispositivos móviles" con una impresionante aplicación web progresiva para su propio negocio. Le diremos cómo, pero primero responderemos una pregunta clave: "¿Qué pasa con las aplicaciones nativas?"

Tal vez estaba jugando con la idea de crear aplicaciones para iOS y Android usted mismo, y se desvió para buscar PWA en su lugar. Tal vez no esté tan preocupado por el lanzamiento en las tiendas de aplicaciones y solo quiera un sitio web mucho mejor.

De cualquier manera, vamos a cubrir brevemente el debate "nativo vs PWA" y explicaremos por qué creemos que un PWA es lo mínimo y una aplicación nativa PWA + es óptima.

¿Qué tipo de aplicación debería construir? Aplicaciones web progresivas frente a aplicaciones nativas

Existe la idea de que las aplicaciones web progresivas y las aplicaciones nativas son rivales. Que los PWA harán que las aplicaciones nativas sean irrelevantes e innecesarias. Que las empresas elegirán entre crear una PWA y una aplicación nativa y siempre optarán por esta última.

Esta narrativa está equivocada y presenta las aplicaciones nativas frente a las PWA como una opción, lo cual es una falsa dicotomía. La verdad es que las PWA y las aplicaciones nativas son una combinación brillante y funcionan juntas de manera sinérgica. Cubren las bases de los demás y se aseguran de que usted brinde a todos una experiencia de usuario óptima, independientemente del canal.

Las PWA se benefician del alcance, la visibilidad y la ubicuidad de la web. Atraen tráfico orgánico e impresionan a los visitantes primerizos con una experiencia rápida y elegante, persuadiéndolos a pasar más tiempo (y dinero) en su sitio. Brindan una opción de instalación fácil que reduce la fricción y los porteros, y pueden atraer incluso a aquellos preocupados por el espacio limitado de almacenamiento del dispositivo.

Proporcionan el medio perfecto para establecer una conexión con los nuevos visitantes y aquellos que están lo suficientemente comprometidos como para regresar pero no lo suficiente como para descargar sus aplicaciones nativas por cualquier motivo. Los PWA son el medio perfecto para nutrir a las personas a través de su embudo.

Las aplicaciones nativas, por otro lado, tienen un alcance y una visibilidad deficientes en comparación con las PWA. Están detrás de los "jardines amurallados" de las tiendas de aplicaciones y requieren un mayor nivel de compromiso por parte del usuario para instalarlos y descargarlos. Por otro lado, están más en consonancia con los hábitos de los usuarios existentes, le permiten enviar notificaciones automáticas a los usuarios de iOS y pueden aumentar la visibilidad/presencia de su marca en las tiendas de aplicaciones.

Las aplicaciones nativas son excelentes para sus lectores/clientes/usuarios principales. Se debe alentar a su base más leal a descargar sus aplicaciones nativas y acceder a ellas, incluso detrás de una pantalla de inicio de sesión o un muro de pago, para que pueda reunirlas en un solo lugar y realmente concentrarse en comprenderlas y atraerlas, maximizando el LTV y la retención tanto como sea posible.

Las aplicaciones nativas son un gran "hogar" para tus mayores fans.

Google lo pone de esta manera:

“Las PWA no tienen que reemplazar las aplicaciones nativas; pueden trabajar en conjunto con ellos. Los minoristas, por ejemplo, pueden usar una aplicación nativa para atraer a usuarios leales que tienen más probabilidades de instalar una aplicación, pero usan un PWA para llegar fácilmente a nuevos usuarios. A los usuarios que interactúan con la PWA se les puede pedir que descarguen la aplicación móvil en el futuro”.

Nuestra recomendación: ¡construya ambos!

Si tiene un presupuesto limitado, opte por una PWA. Si tiene una aplicación nativa pero no una PWA, definitivamente debe crear una lo antes posible. Si está totalmente comprometido con la creación de una UX móvil óptima y puede invertir para lograrlo, cree ambas y haga que complementen las fortalezas y debilidades de cada una.

Puede obtener excelentes aplicaciones nativas con MobiLoud, todo lo que necesita es un sitio web o una aplicación web. ¡Ponte en contacto con nuestro equipo para obtener más información!

Cómo construir una aplicación web progresiva

El propósito de esta guía es brindarle una descripción general completa de alto nivel de las PWA. Las complejidades de su desarrollo no es algo en lo que nos vamos a adentrar, pero vamos a exponer sus opciones para que pueda tomar la decisión usted mismo.

Hay una gran cantidad de contenido flotando en línea sobre cómo puede crear un PWA en "10 minutos". Con la promesa de llevar esa sensación de aplicación nativa a una aplicación web tradicional desde cero en menos de una hora, es fácil dejarse seducir por estos tutoriales.

¿Es legítimo, sin embargo?

Si y no. Estos "hacks" de PWA también son para cumplir con los criterios mínimos absolutos: HTTPS, manifiesto web y trabajador de servicio. Si está interesado en crear una aplicación web progresiva muy básica y funcional, puede probar PWABuilder de Microsoft. Con un poco de retoques y conocimientos técnicos, podrías poner en marcha algo decente.

Para crear una aplicación web progresiva única, optimizada y rica en funciones, que realmente cumpla con su potencial, debe invertir más. Para ver por qué, analicemos los pasos fundamentales.

1. Compre un certificado SSL para configurarlo a través de su servicio de alojamiento
2. Desarrollar un shell de aplicación
3. Verifique si el navegador es compatible con los trabajadores del servicio
4. Registrar el archivo de trabajo del servicio
5. Agregar notificaciones push y manifiesto de aplicación web
6. Configurar el indicador de instalación
7. Probar las funcionalidades de la aplicación
8. Audite la lista de verificación de Lighthouse basada en la aplicación
9. Corregir errores
10. Inicie la aplicación

Suena fácil, ¿verdad?

En realidad, para hacer esto bien y crear una buena aplicación web progresiva personalizada se requieren desarrolladores front-end con experiencia en la creación de aplicaciones web complejas.

El trabajo vital de configurar el trabajador de servicio y el almacenamiento en caché para un rendimiento óptimo es complejo y requiere una habilidad real. Luego, según sus requisitos, también necesitará diseñadores que entiendan la experiencia del usuario de la aplicación nativa y cómo aplicarla de manera efectiva en la web.

A menos que sea una empresa bastante grande, es probable que no tenga muchos desarrolladores front-end con talento sentados esperando que les diga qué hacer. Necesitaría encontrarlos, contratarlos y formar un equipo y administrarlos, una tarea difícil si no tiene experiencia en este tipo de cosas. Los buenos desarrolladores front-end también están siempre en demanda, y sus tarifas de contrato lo reflejan.

Costo y plazo de creación de una aplicación web progresiva

Entonces, ¿cuánto costaría esto? Bueno, es un poco como el clásico "¿cuánto mide un trozo de cuerda?"

Depende completamente de la complejidad de la aplicación que desea crear. Según los autores de The PWA Book:

Construir una PWA desde cero requerirá entre 3400 wh (para una aplicación pequeña) y 9000 wh (un proyecto dedicado que hemos hecho). Esto significa un costo entre $ 400K y $ 1 millón. El uso de una plataforma en la nube será al menos un 75 % más económico y el tiempo de comercialización también será un 75 % más corto (2-3 meses en lugar de 8-12 meses).

– Capítulo 10, El libro de PWA

Esto parece costoso, pero le da una idea de cómo las principales marcas como las que analizamos anteriormente invierten en sus experiencias.

Por supuesto, si está convirtiendo un sitio en una PWA en lugar de construirlo desde cero, será más barato y más fácil en la mayoría de los casos. Como estimación aproximada, está pensando en invertir al menos 3 meses y entre $20 000 y $50 000 para obtener un excelente resultado.

Los desarrolladores siguen diferentes fases del proyecto pero, en la mayoría de los casos, involucra siete fases: descubrimiento, diseño, revisión, desarrollo preliminar, prueba, corrección de errores y lanzamiento final.

Si su PWA es más compleja, espere que su finalización dure más considerando las funcionalidades avanzadas que deben integrarse, como GPS, soporte de redes sociales y acceso a la cámara.

Dicho esto, los PWA simples pueden tardar menos de tres meses (o incluso un par de semanas si son básicos). Si desea tener funciones más avanzadas, como el panel de administración de back-end, patrones de visualización y otras integraciones, aún puede tener su PWA en menos de seis meses.

Esto puede parecer una cantidad considerable, pero si lo pones en contexto, vale más que la pena. No solo son más asequibles y más rápidos de crear que las aplicaciones nativas, sino que es probable que la velocidad y la mejora de la experiencia del usuario se paguen solas a largo plazo.

Si está en WordPress, hay algunas formas más sencillas de convertir su sitio de WordPress en un PWA y algunos complementos de PWA de WordPress que puede probar.

Podemos ayudarlo a asesorarlo sobre sus opciones, y si su sitio es el adecuado, use nuestra plataforma personalizada para convertirlo en un PWA en solo 2 semanas, por una fracción del costo estándar. ¡También podemos crear aplicaciones nativas de iOS y Android desde su sitio en un período de tiempo similar, por lo que tiene todas sus bases móviles cubiertas para 2021 y más allá!

Póngase en contacto con uno de nuestros expertos móviles para una consulta para obtener más información.

Está en sus manos: ¡comience a crear una aplicación web progresiva hoy mismo!

Ya debería tener una buena visión general de las características y el poder de las aplicaciones web progresivas.

Para obtener más información, consulte estos recursos:

• El libro de la PWA
• Recursos de Google en web.dev y Google Developers
• PWA Stats (métricas interesantes y estudios de casos)
• PWA Roadshow de Google (gran serie de videos)
• Las excelentes pautas de PWA de Mozilla
• El libro Aplicaciones web progresivas de Jason Grigsby
• ¿Qué puede hacer la web hoy? (muestra cómo se ha desarrollado la tecnología web)
• Sí, ese proyecto web debería ser una PWA (excelente guía/artículo)
• Nuestra guía sobre la diferencia entre aplicaciones nativas, web e híbridas

Ahora es tu turno. Puede parecer una tarea abrumadora, pero debe convertir su sitio web en una aplicación web progresiva para tener una presencia web impresionante, moderna y óptima.

Cuando esté listo para su lanzamiento, estará feliz, se lo garantizamos. Y sus clientes lo recompensarán dedicando más tiempo, atención y dinero a su negocio.

Sin embargo, como mencionamos, un PWA no es un reemplazo para las aplicaciones nativas. Los PWA son principalmente un sitio web mucho mejor. Puede ser difícil lograr que los usuarios los instalen en sus dispositivos, ya que aún no están acostumbrados a eso, y se pierde el envío de notificaciones automáticas a los usuarios de iOS y la presencia de la marca en las tiendas de aplicaciones.

¿Deberías crear aplicaciones nativas también?

Una PWA es imprescindible, pero las aplicaciones nativas siguen siendo la mejor experiencia de usuario móvil. La única razón por la que algunos son cautelosos o negativos sobre la perspectiva de las aplicaciones nativas es el gran gasto ($ 50,000 +) y el largo y laborioso proceso de desarrollo que tradicionalmente las acompaña.

Si comparte esas inquietudes, pero está interesado en crear aplicaciones de iOS y Android para su marca, debe consultar nuestras plataformas News, Canvas para comercio electrónico o Canvas. Cualquiera que sea el adecuado para usted, puede convertir su sitio o aplicación web en aplicaciones nativas de alta calidad en solo semanas, por tan solo $ 100 / m.

Nuestras plataformas se pueden utilizar para convertir cualquier sitio web en una aplicación móvil. No importa con qué esté construido su sitio. MobiLoud es ideal para construir:

• aplicaciones de WordPress
• aplicaciones de burbujas
• aplicaciones de espacio cuadrado
• Aplicaciones Wix
• Aplicaciones WooCommerce
• Aplicaciones de flujo web

¡Y cualquier cosa intermedia! Contará con notificaciones automáticas ilimitadas en Android e iOS, y tendrá todas las funciones que necesita para crear una presencia multiplataforma ganadora en la web y las tiendas de aplicaciones.

También podemos ayudarlo con un PWA, por lo que tendrá el combo móvil ideal en el futuro. Si esto suena bien, póngase en contacto y reserve una demostración hoy. Si decide tomar otra ruta, entonces buena suerte en su viaje. ¡Esperamos que hayas disfrutado los ejemplos de PWA y hayas obtenido algo de inspiración para ayudarte a prosperar en dispositivos móviles!