Aplicaciones web progresivas: 10 ejemplos de páginas web

Las aplicaciones web progresivas, progressive web apps, o simplemente PWA, están de moda. ¿Qué son las aplicaciones web progresivas? ¿Cuáles son sus ventajas respecto a otras sistemas, como las aplicaciones móvil tradicionales?

De entrada, es importante conocer la diferencia entre una aplicación web y una aplicación móvil tradicionales. A partir de esta diferencia, te contaré qué es una aplicación web progresiva y sus ventajas.

Aplicación web y Aplicación móvil

Las aplicaciones que usamos en nuestros dispositivos se podrían clasificar rápidamente en dos tipos: aplicaciones web y aplicaciones móvil.

Las aplicaciones web las usamos mediante un navegador, esto es, a través de páginas web. Por lo tanto, solamente necesitamos un dispositivo con conexión a internet, y una navegador web para acceder y hacer uso de las funcionalidades de la aplicación en cuestión. Además, según el navegador que tengamos, tendremos acceso a funcionalidades adicionales, como por ejemplo compartir la página que estamos visitando directamente por email, como nos permite muchos navegadores modernos.

Por otro lado, las aplicaciones móvil necesitan de un smartphone o tablet para ejecutarlas. Además, necesitamos previamente instalarlas mediante alguna plataforma de aplicaciones tipo Store. En función del tipo de dispositivo que tengamos, como Android o iOS, las aplicaciones se pueden comportar de formas distintas, así como darnos acceso a funcionalidades concretas. Por lo tanto, la aplicación móvil queda vinculada al tipo de dispositivo que tengamos.

Las aplicaciones web progresivas, progressive web apps, o simplemente PWA, están de moda. ¿Qué son las aplicaciones web progresivas? ¿Cuáles son sus ventajas respecto a otras sistemas, como las aplicaciones móvil tradicionales?

De entrada, es importante conocer la diferencia entre una aplicación web y una aplicación móvil tradicionales. A partir de esta diferencia, te contaré qué es una aplicación web progresiva y sus ventajas.

Qué son las PWA

Las aplicaciones web progresivas son básicamente páginas web, pero mediante el uso de Service Workers y otras tecnologías se comportan más como aplicaciones normales que como aplicaciones web.

Básicamente, una PWA es una solución basada en la web tradicional, aunque incorpora algunas particularidades que hacen que su estética y funcionamiento le hacen parecerse a una app nativa para teléfonos móviles y tablets. Se accede a ellas a través de un navegador, pero se puede anclar un acceso directo en el dispositivo. No dependen de sistemas operativos y van incorporando funcionalidades nativas del dispositivo.

10 ejemplos de aplicaciones web progresivas

Muchas de las aplicaciones web progresivas se parecen tanto a las aplicaciones web normales que ni siquiera se reconocerá como PWA’s a veces.

Una PWA utiliza menos espacio que una aplicación nativa, no se necesita instalar, puede funcionar offline, no hace falta actualizarlo… Gracias a todas las ventajas que consigue una PWA, algunas empresas han decidido optar por ello.

Por eso, os dejamos algunos ejemplos de PWA’s, algunas más o menos conocidas.

AliExpress

Aunque AliExpress tiene una aplicación nativa propia, también existe la posibilidad de usarla como PWA. Visitar esta la web de AliExpress es como usar cualquier otra aplicación o página web, pero con la gran diferencia de que hay la posibilidad de hacer compras online de todo lo que se encuentra durante la navegación. Esta tienda asiática tiene una de las mejores PWA que se puede dar el uso. La plataforma es muy sencilla, el diseño es amigable y, lo mejor de todo, tienen 20 puntos en usabilidad.

Telegram

Otra web muy conocida es Telegram, uno de los pocos servicios de mensajería que ha apostado por una PWA y al que le ha ido genial. Los usuarios que tienen Telegram no notan la diferencia para nada de esta aplicación en su formato web progresivo que en su formato app nativa y eso es una ventaja bastante importante. Difusiones, foros, envío de archivos, llamadas, chat, todo sigue intacto y muy funcional.

Dev.to 

Dev.to es una popular plataforma de blogs para desarrolladores web. A pesar de su popularidad, no se incluye en la mayoría de los ejemplos de PWA, lo que resulta sorprendente si cuando se trata de la alta puntuación de la aplicación web, con un 100 en progresividad y 90 en rendimiento.

Es importante saber que las plataformas de blogs y noticias son una de las aplicaciones web más difíciles de optimizar, ya que están llenas de información textual y visual aportada por diferentes usuarios. Sin embargo, Dev.to ha demostrado que todavía es posible que un blog popular tenga un PWA de alto rendimiento.

Flipboard

Flipboard es la aplicación web progresiva para todos los que quieren estar informados de los últimos acontecimientos del mundo ya que es una aplicación web sobre noticias y novedades. Esta red social solía ser muy lenta al usarla en el móvil en formato app nativa, ya que está cargada de contenido; sin embargo, su nuevo formato PWA funciona rápido y con pocos recursos, así que se puede navegar a través de ella sin ningún tipo de problema.

Workopolis 

Esta PWA permite a los usuarios buscar un trabajo utilizando varios filtros, según su conveniencia. Con un diseño y visualización de color verde/blanco bastante sencillo, la página principal del usuario de Workopolis no es nada fuera de lo común, es decir, es parecida a otras webs ya conocidas. Sin embargo, es atractivo y minimalista y, gracias a ello, sigue todos los estándares de usabilidad.

Además de ser totalmente progresivo, de carga rápida y de alto rendimiento, Workopolis tiene una alta puntuación en la accesibilidad, las prácticas utilizadas para el desarrollo y el posicionamiento SEO.

Twitter

En 2017, Twitter decidió realizar una PWA para rejuvenecer su tecnología y ofrecer un formato más rápido. La razón por la que se decidió llevar a cabo fue porque siempre había sido una aplicación pesada que necesitaba muchos recursos del móvil para funcionar correctamente. Sin embargo, sigue existiendo la app nativa para aquellos que quieran seguir usándola.

La organización, sabiendo el problema que ocurría, lanzó una versión más ligera para que los móviles menos potentes puedan soportarla y ejecutarla de forma correcta: Twitter lite. Esta aplicación web progresiva es todo lo que muchos usuarios de Twitter estaban esperando: carga videos e imágenes de forma rápida, se actualiza de manera veloz pero conserva la apariencia de la App Nativa.

2048

Este fantástico juego de concentración, táctica e inteligencia se puede disfrutar en una versión con mucho menos peso y que usa menos recursos. El hecho de que 2048 se pueda presentar en formato PWA ayuda, sobre todo, en el rendimiento de la batería. De este modo, se consume menos cantidad y tiene más durabilidad. Esta aplicación web progresiva es un excelente ejemplo de lo que se puede llegar a conseguir con esta nueva versión. El juego funciona exactamente igual que la versión nativa, es igual de fácil de usar para el usuario y la única diferencia es que no consume tanta cantidad de recursos.

Umbrella

Umbrella es una web sobre meteorología en la que se pone la ubicación y hace un rastreo según las horas de la temperatura, humedad, nubes… Lo mejor de esta PWA es que el diseño creativo de esta aplicación no impide el rendimiento, es decir, tiene gran cantidad de contenido creativo y de objetos, pero no retarda el tiempo de carga. Como se puede ver en las puntuaciones, Umbrella es totalmente progresivo y tiene una gran puntuación en cuanto a su rendimiento.

HighTide 

HighTide es una Aplicación Web Progresiva con un uso principalmente de los surferos. La web rastrea en qué momento y en qué lugar hay olas más altas o de mejor calidad para que todos los que deseen surfear tengan una buena experiencia. Al igual que Umbrella, esta aplicación web progresiva impresiona por su atractivo y colorido diseño. Sin embargo, el concepto de HighTide no es tan mundano: este PWA es un localizador inteligente de mareas para los aficionados al surf.

Aunque tiene gran puntuación según su progresividad, el rendimiento es un poco inferior a la media, lo que puede explicarse debido a que esta aplicación web necesita ser interactiva. A pesar de trabajar con datos de localización y tener una funcionalidad similar a la de Umbrella, HighTide es más lento y debería ser optimizado.

Spotify

Esta web es muy conocida debido al servicio que ofrece para poder escuchar música, podcasts o incluso vídeos de manera digital. Además, da acceso a millones de canciones y contenido de creadores a lo largo de todo el mundo.

Aunque no lo parezca, Spotify puede resultar unas PWA. Esta tiene un muy buen rendimiento y ocupa mucho menos espacio tanto en la pantalla de inicio del aparato como en el disco duro o en la memoria. Para instalar esta Aplicación Web Progresiva, solo es necesario acceder al link, pulsar el botón de instalar y, gracias a ello, la aplicación mostrará un acceso directo al escritorio.

A veces, nos centramos en instalar aplicaciones y más aplicaciones en el escritorio o en la página principal de los dispositivos y no somos consientes de que, la mayoría de las webs, tienen la opción y oportunidad de instalar la PWA. Además, si quieres conocer las ventajas de las aplicaciones web progresivas sigue leyendo:

Ventajas de las aplicaciones web progresivas

Ahora sí, ya puedo explicarte las ventajas de las aplicaciones web progresivas. Como te explicaba, una aplicación web progresiva (PWA), es la suma de una aplicación web y una aplicación móvil, sin perder las funcionalidades que conocemos de cada una.

1- Obtenemos funcionalidades web y móvil, 2×1.

En primer lugar, la principal ventaja es que ganamos acceso a funcionalidades web y móvil en la misma aplicación. Con una PWA, podemos servir funcionalidades propias de web y móvil, desde la misma aplicación, en función del dispositivo del usuario. Con una aplicación web progresiva, trabajamos en un mismo proyecto aspectos web y móvil.

Durante el desarrollo, se tomarán decisiones sobre las diferencias entre el formato web y el formato app (móvil), con tal de aprovechar ambos potenciales en cuanto a funcionalidades del navegador y del smartphone respectivamente.

2- Notificaciones Push en las PWA

Las notificaciones Push ya las conocemos: nos llegan decenas de ellas, a nuestro smartphone, a lo largo del día. Son las notificaciones que nos llegan al móvil, a partir de las apps que tengamos instaladas.

Con una aplicación web progresiva, cuando la hemos instalado en nuestro dispositivo, permite enviar notificaciones push a los usuarios de la misma. Como decía arriba, con una PWA ganamos acceso a funcionalidades web y móvil. Por lo tanto, en este caso, ganamos acceso a enviar notificaciones push que llegan directamente a nuestros móviles.

3- Desarrollo más ágil

Comprendiendo que una aplicación web progresiva es una hibridación entre una aplicación web y una aplicación móvil, que nos da acceso a ambos conjuntos de funcionalidades, desarrollarla supone mucha más agilidad. Por el simple hecho que podemos crear ambas estructuras en el mismo proyecto.

En la misma PWA estamos trabajando la funcionalidad web y la móvil, a la vez. Tradicionalmente, haríamos un proyecto web y la app de forma independiente, con sendos proyectos separados.

Por lo tanto, desarrollar una aplicación web progresiva supone una mejora sustancial a la hora de desarrollar una aplicación móvil, ya que esta partirá del proyecto web directamente, en vez de tener que crearse de forma separada.

4- Las aplicaciones web progresivas son rápidas

Si contamos con una aplicación web ágil, sin carga de recursos pesados, es decir, bien optimizada a nivel de velocidad, nos encontraremos con una PWA igualmente rápida.

Las aplicaciones web progresivas, además, suelen incorporar mecanismos de caché para mejorar enormemente los tiempos de carga, mejorando en muchos casos los que podemos experimentar con aplicaciones móviles que usamos diariamente.

5- Bases de datos unificadas

Como voy repitiendo, una Progressive Web App es una hibridación entre una aplicación web y móvil, por lo tanto, de entrada, podemos unificar la base de datos. Es decir, al unificar las dos aplicaciones, web y móvil, estamos también canalizando todo el flujo de información por un mismo canal.

Así, podemos optimizar la forma en la que interactuamos con la base de datos, crear una estructura robusta que nos permita dar servicio a una aplicación web progresiva, en su funcionalidad web y móvil. Mismos datos, aplicaciones unificadas, funcionalidades web y móvil nativas, ¿qué más quieres?

6- No necesitan conexión a internet para usar una Progressive Web App

Una funcionalidad muy interesante de las PWA es la posibilidad de servir contenido cuando se ha perdido el acceso a internet. Esto es así porque la aplicación ha descargado previamente todo lo necesario para una navegación sin conexión.

Evidentemente, muchas funcionalidades no se podrán llevar a cabo, pero como mínimo no obtendremos un error de conexión, como sí obtendríamos visitando la misma aplicación, pero en modo web, a través de un navegador. Otro ejemplo más de las diferencias entre una aplicación web y una aplicación web progresiva que pueden interesarte para decantarte a esta tecnología apasionante.

7- Son seguras

Para poder descargar una PWA, tu navegador, que es el actor que te permite hacerlo en primera instancia, va a analizar si la aplicación web es segura. Si es el caso, te va a permitir descargar la versión móvil, es decir la PWA en su versión móvil.

Es, por tanto, indispensable cuidar la seguridad web para que a la vez prevalezca en la versión app móvil.

8- Se actualizan directamente, sin necesidad de trabajar con Stores

Con una app móvil tradicional, el desarrollador tiene que subirla a las Stores de Google y Apple. Es decir, después de terminar el desarrollo, debe subministrarlo a estos servicios para que a su vez los distribuyan a los usuarios. Por lo tanto, desde el inicio hasta cada actualización, pasarán por los canales de estas plataformas.

Con una aplicación web progresiva, como reside en simbiosis con la aplicación web, la descarga y la actualización se gestiona directamente, sin intermediarios. Se controla mucho mejor las versiones del producto y la forma de desplegar nuevas funcionalidades para todos los usuarios.

9- Google potencia y recomienda las aplicaciones web progresivas

El gigante buscador está potenciando el uso de las PWA, siendo una de las organizaciones que aportan más en el desarrollo de esta tecnología híbrida.

De hecho, en los análisis web que podemos realizar con Chrome en nuestra web, ya nos indica si la web en cuestión soporta o no una instalación de app tipo PWA. Quien sabe, quizás en un futuro próximo esta hibridación web-app pueda conllevar mejoras en el posicionamiento.

10- Son más baratas que las aplicaciones móvil tradicionales

Una aplicación móvil tradicional, ya sea nativa o híbrida, será muy probablemente más cara que realizar un desarrollo de hibridación con una aplicación web progresiva. La razón es el aprovechamiento de desarrollo entre aplicación web y móvil cuando se desarrolla un PWA.

Con una PWA, el desarrollo es híbrido, y como te he contado, podemos aprovechar esta simbiosis para formar un único proyecto, en vez de dos proyectos específicos para web y móvil.