Progressive Web App (PWA) consiste en construir experiencias móviles en la web. Nos permite usar funcionalidades que hasta hace poco eran exclusivas para las apps móviles. Por eso, es la revolución tecnológica que nos permite democratizar las ventajas del móvil a la web.

El uso que le damos al móvil

El informe de 2017 de comscore.com sobre métricas móviles revela interesantes estadísticas de cómo usamos el móvil. Hay varios puntos interesantes que llaman la atención:

  • El tiempo navegando en móvil / tablet (por ocio) es mayor a el tiempo navegando en un ordenador de escritorio. Además cuanto más joven es el usuario, mayor es la diferencia.
  • El 87% del tiempo que pasamos interactuando con el móvil es en aplicaciones móviles, frente al 13% que pasamos usando la navegación web en el móvil.
  • La cantidad de visitantes únicos de una web es 2,2 veces mayor a la cantidad de visitantes únicos de una app móvil.

Éstas estadísticas son muy significativas por que nos están indicando que pese a que se pasa 16 veces más tiempo en apps móviles que en la web, se visitan 2,2 veces más webs distintas que aplicaciones móviles. ¿Por qué es así?

Al usuario móvil le gustan las apps, es donde se siente cómodo, pero no suele instalar nuevas todos los meses. Sin embargo si que visita webs nuevas.

¿Cómo puede ayudar PWA a tener estas estadísticas a favor en una web?

Las Progressive Web App eliminan barreras que las apps móviles tienen, como es tener que ir a Google Play o App Store para instalarla. Cuando visitas la web por primera vez te preguntará si quieres añadirla a la pantalla de inicio.

Instalar PWA

¡Y ya está! Si el usuario le da al botón, le da al botón, estaría la PWA automáticamente instalada en su dispositivo móvil. De hecho sería una app más, sin distinciones. Veamos como quedaría por ejemplo la PWA de esta web:

adapptative

¿Que hacer para que el usuario vuelva?

Ye hemos solucionado el primer problema. Estar instalados en el móvil del usuario, pero si queremos que pase tiempo en nuestro contenido… ¡Debemos hacer que vuelva!

Primero un consejo: sin contenido de calidad el usuario no volverá. Si tu contenido es interesante, PWA nos da herramientas para crear una conexión con el usuario: las notificaciones.

Cuando el usuario entre en la web por primera vez, aparte de preguntarle por instalar la PWA le preguntará si desea recibir notificaciones.

Si el usuario le da a permitir, entonces podrás enviarle notificaciones en el móvil, que son altamente efectivas porque casi siempre se ven. Estas notificaciones se llaman notificaciones push y son las que aparecen en la pantalla de bloqueo, o arriba en la barra de notificaciones.

Notificación móvil de una PWA

Puedes leer más sobre notificaciones push aquí.

¿Cómo “enganchar” al usuario?

Hemos instalado Progressive Web App en el dispositivo móvil del usuario, le hemos mandado una notificación y la abierto de nuevo. Ahora tenemos que deleitarlo para que quiera usarlo. ¿Cómo lo hacemos?

El término en inglés es “engagement” y en español no hay una traducción directa. Consiste en crear una relación entre un producto y el usuario. Veamos como podemos mejorar el engagement con PWA.

PWA nos permite ofrecer una experiencia móvil inmersiva. Esta experiencia se proporciona añadiendo una personalización extra que tienen las apps pero no la web. Habrás podido comprobar que algunas aplicaciones móviles permiten cambiar el color de la barra superior del móvil haciendo que el color de la marca sea uniforme. Con PWA también podremos hacer eso. Por ejemplo, ahora mismo, en la mayoría de los móviles podrás comprobar que la parte superior del dispositivo es del color rosa al visitar nuestra web:

Estilo adapptative

Progressive Web App nos permite además dar una experiencia de carga mas rápida, transiciones mas fluidas y un scroll mas natural. Además gestiona la conexión y en vez de mostrar la página de “no hay internet” se sigue dentro de la web reintentando hasta que el corte de internet se recupere.

Además, por si fuera poco, Google tiene en cuenta las buenas prácticas de PWA para incrementar la puntuación de SEO y mejorar el posicionamiento de las webs que usan estas tecnologías.

¿Quién está construyendo PWA?

En la conferencia de Google I/O de 2017 hablaron bastante de Progressive Web App ya que apuestan mucho por ello. Especialmente el equipo de Chrome. En ésta conferencia pusieron de ejemplo el caso de la revista Forbes.

En Forbes desarrollaron una PWA para que el usuario pudiese instalarla, recibir notificaciones, navegar más rápido y con una interfaz mejorada. Los resultados son espectaculares:

  • Mejoraron la carga de la web de entre 3s y 12s hasta los actuales 0,8 segundos
  • Han mejorado el número total de sesiones de la página en un 43%
  • Han mejorado el engagement un 100%

Pero no es el único caso, veamos otros ejemplos de empresas conocidas.

  • Starbucks ha creado una PWA para mejorar la experiencia de los pedidos y hacerlo mas rápido
  • Pinterest creó su PWA y ahora tiene un 44% de mejora en general y en beneficios
  • PWA ha permitido a Uber expandirse en nuevos mercados y regiones
  • Lyft ha creado una PWA y ahora pueden funcionar en mercados emergentes
  • Twitter creó su PWA y ha visto un 65% de mejora en páginas por sesión y un 75% por ciento de incremento en clicks

Fuente: ionic framework

Las empresas más importantes están pasándose al PWA para crear mejores experiencias de usuario, tomando la ventaja de ser los primeros.

¿Cómo define Google a PWA?

Google ha sido el mayor impulsor de PWA. En sus web dedicada a ello definen Progressive Web Apps como experiencias  que tienen que llegar a la web y que son:

  • Confiable: Cargando instantáneamente y sin “mostrar nunca el dinosaurio” (el que ponen cuando no hay conexión). Incluso en condiciones de red desconocidas
  • Rápida: Responder rápidamente a las interacciones del usuario con sutiles animaciones y con un buen scrolling.
  • Engaging: Que se sienta como una app normal en los dispositivos móviles, con una experiencia Google inmersiva

¿Funcionan las tecnologías Progressive Web App en todos los dispositivos?

Por desgracia no en todos, pero si en la mayoría.

  • El sistema operativo Android lo soporta perfectamente.
  • En iPhone/iPad se soporta desde la versión 11.3
  • Windows Phone lo soporta sin problemas. De hecho permite añadirlas en muchos casos desde el market.

La parte positiva es que si no se soportan todas las funcionalidades extra, las más básicas si que funcionarán sin problemas. Además, los navegadores de escritorio ya están empezando a soportar estas funcionalidades. Por ejemplo, ya se pueden enviar notificaciones también en versiones de escritorio, da igual que sea Google Chrome, Firefox, Edge o Safari

Niveles de PWA

Como ya hemos comentado, PWA consiste en crear experiencias móviles. Ésta experiencias pueden ser más completas o menos. Por eso, aunque PWA sea un híbrido entre app y web, nosotros seguimos diferenciando entre el desarrollo app y el desarrollo web.

No todo el mundo necesita la misma capa de personalización en PWA.

Por supuesto, nuestras webs están diseñadas “mobile first”, es decir, primero en móvil. Aplicamos las buenas técnicas de Progressive Web App: hacemos uso de la personalización inmersiva mediante colores, habilitamos las notificaciones, el autoinstalable… pero sin embargo está pensada como web. Un ejemplo es esta misma.

Sin embargo, si se necesita una experiencia más completa: en velocidad, funcionalidades o simplemente se va a querer poder exportar también a los markets como Google Play o el App Store de Apple, entonces se hace una PWA que también puede ser exportable a estas plataformas de forma nativa.

Es el tiempo de Progressive Web App

Hemos visto que las grandes empresas están adoptando esta tecnología con resultados muy positivos. PWA nos da ventajas, desde el SEO hasta el “engagement” de usuarios que hace que merezca la pena en todos sus niveles de personalización.

En adapptative, incluimos las funcionalidades básicas de PWA a nuestras webs sin coste extra. Cuando hacemos una app móvil, ofrecemos la versión PWA también sin sobrecoste alguno, ya que creemos que PWA es una revolución de la cual queremos hacer bandera. Si estás interesado en una PWA, ya sea web o móvil, no dudes en contactar con nosotros.