Ejemplos de aplicaciones web progresivas PWA: desde plataformas de blogs hasta páginas web de empresas

by Janeth Kent Date: 10-05-2020 pwa progressive web apps


Para explicar la esencia y la idea detrás de las aplicaciones web progresivas, los desarrolladores web han ideado múltiples metáforas. "Aplicaciones web nativas", "Aplicaciones web sobre vitaminas". etc. Aunque la mayoría de las comparaciones son puntuales, estas comparaciones siguen siendo demasiado vagas para aclarar por qué los PWAs han estado en el centro de atención durante los últimos 2 años.

Que son las PWA en sintesis

La lucha inicial con las aplicaciones web fue hacerlas disponibles para todos los dispositivos y condiciones de red, por lo que no es de extrañar que las aplicaciones web progresivas aborden este mismo desafío. Para superar la velocidad de los HTTP/1 más comunes, las PWAs usan HTTP/2 y transfieren datos en pequeños trozos. Además, estas aplicaciones pueden almacenar datos en caché automáticamente, lo que les permite no sólo mejorar el rendimiento general, sino también funcionar sin conexión. Por último, una aplicación web progresiva puede instalarse en un dispositivo móvil como si fuera una aplicación móvil normal. Incluso aparecerá en el menú 'Apps' de su sistema operativo, pero sólo pesará un par de docenas de kilobytes.

Progresividad y rendimiento

Sin embargo, no es necesario utilizar todas estas capacidades: cada equipo de desarrollo de aplicaciones web debe decidir por sí mismo qué características necesitan. Como ha demostrado nuestra propia investigación, los desarrolladores implementan todas las capacidades progresivas sólo en el 30% de los casos. Muchos optan por HTTP/2 para acelerar el rendimiento, pero reducen las opciones de modo sin conexión y de instalación de la pantalla de inicio. Dependiendo de la cantidad de estas capacidades de PWA habilitadas, Google Lighthouse -una herramienta de auditoría de PWA- otorga a una aplicación web una puntuación por su "progresividad".

La misma herramienta de auditoría también le da a una aplicación web una puntuación de rendimiento. Uno de los aspectos principales que permite evaluarla es la velocidad de carga de la página. Según Google, una primera pintura significativa de una aplicación web progresiva debería aparecer en no más de 2 segundos y convertirse en interactiva en menos de 5 segundos. De lo contrario, un usuario frustrado simplemente abandonará la aplicación.

Ejemplos de aplicaciones web progresivas

Por ahora, debería ser bastante obvio que las aplicaciones web progresivas no se ven diferentes de las aplicaciones web comunes. De hecho, muchas de ellas se parecen tanto a las aplicaciones web normales que ni siquiera las reconocerá como PWAs. Además, algunas aplicaciones web progresivas tienen un diseño anticuado que no las hace parecer "progresivas" en absoluto.

A continuación ponemos algunos ejemplos de aplicaciones web progresivas, con más información sobre ellos en los resultados de la auditoría de Google Lighthouse. Aquí, sólo listaremos aplicaciones con una alta puntuación de PWA y una solución de UI/UX inteligente o creativa.

Dev.to – Plataforma de blogs

PWA: 100; Performance: 90; Accesibilidad: 69; Buenas prácticas: 88; SEO: 80

Dev.to es una popular plataforma de blogs para desarrolladores. A pesar de su popularidad, no estaba incluido en la mayoría de los listados de PWA, lo que resulta sorprendente si nos fijamos en la puntuación de la aplicación web de 100 en progresividad y 90 en rendimiento. Estos resultados pueden ser tomados como un elogio de Google Lighthouse y lo que es más, es un gran elogio para una plataforma de blogs.

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.

Umbrella – App meteo

PWA: 100; Performance: 94; Accesibilidad: 67; Buenas prácticas: 100; SEO: 89

Pero lo mejor es que el diseño creativo de esta aplicación no impide el rendimiento. Como se puede ver en las puntuaciones, Umbrella es totalmente progresivo y, gracias a la muy alta velocidad de carga, tiene una puntuación de rendimiento de 94.

HighTide – Localizador de olas para surferos

PWA: 100; Performance: 67; Accesibilidad: 55; Buenas prácticas: 94; SEO: 89

Al igual que Umbrella, esta aplicación web progresiva impresiona por su atractivo y colorido diseño de inmediato. Sin embargo, el concepto de HighTide no es tan mundano: este PWA es un localizador inteligente de mareas para los aficionados al surf.

La aplicación obtuvo la puntuación más alta de progresividad, pero tiene una puntuación de rendimiento ligeramente inferior a la media, lo que puede explicarse en el momento en 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.

Workopolis – Busqueda de trabajo

PWA: 100; Performance: 89; Accesibilidad: 100; Buenas prácticas: 88; SEO: 80

Este PWA permite a los usuarios buscar un trabajo utilizando varios filtros. Con un esquema de color verde/blanco bastante sencillo, la interfaz de usuario de Workopolis no es nada fuera de lo común. Aún así, es atractivo y minimalista y cumple con todos los estándares básicos de usabilidad.

Los resultados de la auditoría presentados por Google Lighthouse son impresionantes aquí. Además de ser totalmente progresivo, de carga rápida y de alto rendimiento, Workopolis tiene una alta puntuación en otros aspectos de la auditoría que evalúan la accesibilidad, las prácticas utilizadas para el desarrollo y SEO.

Resumen

Como podemos ver en los ejemplos de aplicaciones web progresivas de éxito anteriores, la progresividad y el rendimiento están estrechamente relacionados. Cuanto mayor sea el rendimiento de una aplicación web, más progresiva será. Esto apoya la ideología de PWA y establece altos estándares para los desarrolladores de aplicaciones web. También es evidente que las aplicaciones web progresivas efectivas pertenecen a varias categorías, así que no importa qué aplicación web tengas, puedes actualizarla recreándola como PWA.

.

 
by Janeth Kent Date: 10-05-2020 pwa progressive web apps visitas : 25942  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Artículos relacionados

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Búsqueda en la Dark Web: instrucciones

Hoy en día, las ciberamenazas vienen de todas partes, tanto de la superficie como de la web oscura. Muchas empresas se basan en la información recogida en las comunidades de…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Guía: Como entrar en la DeepWeb y la Darknet

Queremos presentarte una guía que te permitirá entrar en las principales darknets que componen la Dark Web, conocida coloquialmente como la Deep Web, aunque este último término tiene otro significado.…

El diseño gráfico y su impacto en el desarrollo web

En el artículo de hoy explicaremos el concepto de diseño gráfico, sus fundamentos y lo que aporta al desarrollo web. El diseño gráfico se aplica a todo lo visual, lo…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración