PWA es la abreviatura de Progressive Web App. En cuanto a diseño web, muchos no diferencian aún entre decir web app o aplicación web progresiva. La clave está en la «p» de PWA. Las web app progresivas no es que sean sustancialmente distintas de las webs que todos conocemos ya. Pero con los conocimientos adecuados de programación, y una optimización web que permita una descarga rápida podremos configurar nuevas funcionalidades que nos traen éstas.
PWA. ¿Qué es?
Como ya hemos anticipado en el primer párrafo, las pwa son páginas que tienen una carga progresiva web. En resumen, que tienen la capacidad de hacer que los elementos de una web carguen según sean prioritarios para que la web app sea interactiva. Además, que el resto de sus recursos pueda irse descargando en segundo plano.
¿Qué funcionalidades extra tiene una PWA?
Muchas. Pero las más interesantes ya quieras tener un blog, o una tienda online de carga progresiva web, son las siguientes:
- Notificaciones PUSH (o mensajes PUSH. Lo más monetizable)
- Instalación en la pantalla del móvil o la tablet
- Pantalla de carga o inicio personalizados
- Las PWA funcionan offline
- Últimas novedades: Uso del GPS móvil y geofencing; uso de la cámara del dispositivo. Otros.
El resto de funcionalidades los comparte con cualquier WEB APP. Por ejemplo el caché estático, una carga rápida y optimizada. Sólo que gracias a los service workers (trabajadores de servicio) se pueden realizar tareas en segundo plano. Como ya dijimos, por ejemplo, el cacheado en segundo plano, para que luego tu uso de la app progresiva sea instantáneo y hasta offline.
Ejemplos de PWA
Muchas empresas de renombre se están aprovechando de las muchas ventajas que ofrece pasar tu web a una pwa. Algunos ejemplos son los que siguen:
Desde que Twitter implementó su PWA:
- Han obtenido un incremento del 65% en páginas por sesión.
- Un incremento del 75% en Tweets.
- Una reducción del 20% en su tasa de rebote.
- Y su servicio ha pasado de 100Mb (en IOS) a 0,6Mb en su PWA.
- Incremento de opiniones de clientes favorables.
Forbes
Forbes ha obtenido resultados similares tras implementar su PWA:
- 100% de aumento del tiempo medio de sesión por usuario.
- Ha multiplicado por 6 las suscripciones a sus newsletter.
- Han obtenido un 20% más de impresiones.
- Y su Aplicación ha pasado de 43.2Mb (en IOS) a 0.2Mb en su versión progresiva.
Lancome
Veamos los increíbles resultados presentados por Lancome en el uso de su PWA:
- Incremento del 17% en sus Ratios de Conversión.
- Aumento del 51% en sus sesiones desde móviles.
- Incremento del 18% en aperturas de sus Notificaciones Push.
- El 8% de las respuestas a esas notificaciones terminaron en la compra de productos.
Otros grandes ejemplos de la Industria en pasarse a las apps progresivas son Lift o el Financial Times. Este último, abandonó por completo las Aplicaciones nativas y se animó al desarrollar una App Progresiva.
The Washington Post
TheWashington Post está probando su versión PWA en beta desde el 2016. También escribió un artículo donde explica que ha introducido la funcionalidad de carga progresiva, intentando estar a la última en tecnología.
Desafortunadamente, revisando su código fuente del manifiesto y haciéndoles un test, el resultado no activa el icono de PWA de Lighthouse de Chrome. Esto significa que aún les queda bastante por optimizar para ser considerados una PWA. No obstante, podéis experimentar algunas de sus funcionalidades si visitáis el enlace que os he puesto en el párrafo anterior, activándolo desde un dispositivo móvil.
PWA vs Apps nativas
El verdadero contrincante de las pwa son las apps nativas. Pero las primeras tienen la partida casi ganada en el largo plazo.
Las apps nativas no sólo tienen que competir por un posicionamiento salvaje y de ppc entre los mercados de apps de cada fabricante. También las apps nativas tienen que competir con distintas versiones de sus apps para las distintas plataformas. Las PWA sin embargo son multiplataforma, y al tener notificaciones PUSH en los dispositivos se convierten en una herramienta de marketing gratuita, directa, y visible.
Top 3 apps de cada usuario
Los usuarios suelen tener un top 3 de apps nativas y/o pwa que usan con una frecuencia muy superior al resto de sus aplicaciones móviles. Al poder realizar una instalación de escritorio y configurar mensajes PUSH directos, tu visibilidad por encima del resto no será una tarea complicada.
Ya tengas un blog o una tienda online, si sabes cómo enganchar al usuario y ofrecerle que instale tu app en su escritorio a cambio de algo que le interese, o un mejor servicio, o notificaciones útiles, lograrás tu objetivo.
PWA en Dispositivos de Escritorio
Al igual que con las web apps, las PWA no tendrán el uso de ciertas funcionalidades, pero al haberlas optimizado a su máximo nivel en rendimiento, la carga progresiva web será rápida y funcional. También podrás seguir notificando con mensajes PUSH de navegador, y realizar descargas de contenido en segundo plano.
¿Cómo hacer una progressive web app?
Realizar una aplicación progresiva empieza con una web app de filosofía mobile-first. Esto es, los CSS y el HTML5, quizás incluso añadiendo la codificación AMP (accelerated mobile page).
Necesitarás optimizar la carga de imágenes, de recursos externos. También deberás cargar de manera asíncrona aquel javascript que no sea esencial en la parte superior de cada contenido o página de tu web app.
Tendrás que crear lo que se llama progressive web app manifest. Es un archivo que configura distintas características de tu pwa para que los navegadores identifiquen a tu web app como una aplicación de carga progresiva, y ahí activarás las funcionalidades, y las opciones.
Lo sé, lo sé. Demasiada información condensada en muy poco contenido. Esto dista mucho de ser un curso de programación de todos y cada uno de los lenguajes y optimizaciones que necesitarás aprender para saber cómo crear una pwa. Pero esperamos que al menos ayude a que ahora entiendas qué es una web app progresiva y en qué puede beneficiar a tu página web.