¿Qué es una PWA?

Una PWA (Progressive Web App o Aplicación Web Progresiva) es una aplicación web con funciones y estética de una aplicación nativa.

Una de sus principales características es la desvinculación que tienen sobre los sistemas operativos y terminales en los que se ejecutan, ya que para su funcionamiento únicamente requieren de un navegador web.

Una PWA es una web a la que accedemos pero que funciona y ofrece la misma experiencia de usuario de una aplicación nativa. Las PWA son capaces de funcionar en segundo plano y disponer de un icono de acceso directo como una aplicación normal.

Las PWA son capaces de ofrecer una experiencia de usuario similar o incluso igual que una aplicación nativa.

Características de una PWA

Las características básicas que tiene las aplicaciones web progresivas son:

Actualizadas

Tal vez una de las características que más aportan al usuario final, las progressive web apps siempre están actualizadas ya que la actualización no la tiene que hacer los usuarios y es independiente del almacenamiento y la versión del dispositivo donde se ejecuta.

Adaptables

Como un estándar web a día de hoy es necesario que las webs que accedemos se adapten al dispositivo de manera responsive. Esto quiere decir que se adaptan al tamaño de pantalla donde se visualicen.

Seguras

Las PWA siempre deben funcionar bajo Https, por lo que el contenido está cifrado mediante TLS.

Offline

Gracias a los service workers y el almacenamiento en caché de los navegadores, permiten ejecutar determinadas acciones sin conexión a internet.

Multiplataforma

Las PWA pueden ejecutarse en cualquier sistema operativo mientras dispongan de una navegador web.

Indexables

El contenido de las PWA son indexables por los buscadores permitiendo aparecer en búsquedas orgánicas y ser accesibles mediante enlaces directos.

Icono de acceso directo

Las webs con formato PWA habitualmente invitan al usuario al añadir/instalar un icono de acceso directo. Este sirve para tener anclado en las pantallas de inicio o menús de aplicaciones un icono como el de cualquier aplicación, pero realmente es una acceso directo a la web que se abrirá en el navegador.

Apariencia nativa

La interfaz con la que se interactúa y las interacciones son similares o iguales que las de una aplicación nativa.

Ejemplo de Aplicación Web Progresiva, Aliexpress es una pwa que ofrece una experiencia web igual en su apartado web como en la versión nativa de la aplicación

Ventajas del uso de una PWA

Crear una PWA ofrece muchas ventajas frente al modelo clásico de desarrollo y distribución de aplicaciones. Para comenzar a enumerar las ventajas empezaremos por:

  • No requieren instalación en el almacenamiento del dispositivo.
  • Son multiplataforma.
  • El coste de desarrollo es menor.
  • Requieren menos recursos
  • Son indexables en buscadores web.
  • Siempre están actualizadas a su última versión.
  • Únicamente hace falta un navegador web para acceder.

Desventajas de las PWA

Por otra parte el uso de este tipo de aplicaciones web tiene algunas desventajas frente al uso de una aplicación nativa como pueden ser:

  • Consumo mayor de batería.
  • Nula visibilidad en market places de aplicaciones.
  • Limitaciones de funciones nativas de los sistemas operativos.

Como y donde crear una Progressive Web App(PWA)

Los requisitos básicos que pide Google Chrome para catalogar tu web como PWA son:

  • Recurrencia de usuarios que visiten el sitio web.
  • Una conexión segura Https.
  • JSON Manifest instalado.
  • Service Worker instalado para las notificaciones push y cachear el contenido.

Si no dispones de los recursos suficientes o prefieres utilizar una herramienta No Code para crear tu PWA puedes utilizar:

Puntos clave de UX en una PWA

Para crear una experiencia de usuario natural y satisfactoria en una Progressive Web App se debe intentar emular lo más posible el entorno nativo. A nivel de UI la PWA debe diferenciarse de los clásicos entornos web, para poder transmitir que son una aplicación.

Algunos tips para mejorar la User Experience con la interfaz de la PWA serían:

  • Eliminar el pie de página (footer)
  • Utilizar fuentes del sistema para mantener la coherencia.
  • Evitar las transiciones lentas de pantalla
  • No ocultar la entrada de texto cuando aparece el teclado.
  • Mantener la posición de la pantalla al entrar y salir de la PWA.

Para poder auditar una PWA, Google ofrece una herramienta como Lighthouse que ofrece información sobre puntos clave de rendimiento y seguridad.

Espero que te haya servido y quedado claro lo que es una PWA, si quieres saber más acerca de la PWA puedes visitar web.dev para obtener más información.


Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Pruebas de usabilidad

    Las pruebas de usabilidad juegan un papel fundamental en el diseño y desarrollo de productos físicos y digitales, a través…
  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…