El enorme crecimiento de los dispositivos móviles ha traído consigo muchos cambios en la forma que teníamos de consumir contenidos digitales. No hay que hablar de futuro sino de presente para entender qué son las Aplicaciones Web Progresivas o PWA.
¿Qué son las Aplicaciones Web Progresivas o PWA?
Progressive Web Apps es la conjunción tecnológica entre las aplicaciones nativas y las aplicaciones web basadas en HTML5 que conocemos. Las PWA han llegado para unificar la brecha tecnológica entre las APPs y las páginas web.
Google ha sido uno de los máximos exponentes a la hora de incentivar el desarrollo de este tipo de tecnologías. Para entender mejor qué características tiene, tenemos que hablar de unas aplicaciones que tienen que ser de confianza, rápidas y atractivas.
Características que han de tener las Aplicaciones Web Progresivas
Para dejar suficientemente claro y explicado el concepto de PWA, vamos a adentrarnos en las características imprescindibles que deben tener este tipo de tecnologías.
Por supuesto, hablamos en términos generales. A partir de ahí, el modelo de negocio/servicio adaptará sus objetivos a las necesidades del propio target.
Rapidez
El tiempo es dinero, no solo para Google sino para todos aquellos negocios que la carga lenta de sus productos pueden hacer perder al usuario de una posible compra.
Google lleva haciendo hincapié en esta premisa mucho tiempo. El nacimiento del proyecto AMP tuvo este objetivo y ahora las PWA se suman a la necesidad de tener un acceso rápido a la información desde las aplicaciones.
El usuario actualmente no tienen paciencia, no espera a que un sitio cargue completamente. El 53 % de los usuarios no esperará más de 3 segundos en que se cargue un sitio web según Think with Google
De Confianza
Cuando hablamos de confianza nos referimos a las garantías de funcionamiento del sitio. Gracias a lo que se conoce como Service Workers la influencia de la conexión de la red no debe impedir la carga de la PWA’s.
Instalable
Las PWAs pueden instalarse sin necesidad de ir al Chrome Store, Apple Store o cualquiera de las tiendas de aplicaciones que existen. Recordemos que no son aplicaciones nativas por lo que podemos tener acceso a ellas sin necesidad de pasar por estas tiendas.
La instalación se comporta simplemente como un acceso directo, no necesita espacio para almacenar los diferentes archivos.
Diferentes dispositivos: Móvil y Escritorio
La base de código entre ambos dispositivos es única lo que hace que las técnicas de diseño responsive se apliquen tanto a móvil como a escritorio.
Ventajas y desventajas de las PWAs
Algunas ventajas ya las hemos comentado anteriormente para explicar las características de las aplicaciones progresivas. Pero existen muchas más para que pensemos en utilizar esta tecnología en nuestro negocio.
- Ahorro de recursos
- No precisa de instalación
- Velocidad de carga muy alta
- Notificaciones Push directas a smartphone
- Ejecución en todos los Sistemas Operativos
- Mejora la seguridad
- Menos trabajo en desarrollo y mantenimiento que una APP nativa.
- Más económica que una App nativa.
Desventajas
- Necesita conexión a internet.
- No todos los navegadores soportan las PWAs.
- Alta consumo de batería
¿Qué es un Service Worker?
Volviendo un poco al apartado técnico tenemos que hablar de ciertos aspectos sin los cuales las aplicaciones progresivas no podrían funcionar. Los service workers son scripts que se ejecutan en segundo plano realizando las peticiones a las aplicaciones web, caché o la propia red.
Una cosa importante que debemos saber es que los Service Workers solo pueden funcionar si se tiene certificado SSL y lo sirven mediante https.
Ahora vamos a verlo todo con un ejemplo, la web de BMW y su PWA.
Ejemplo de PWA: BMW
He intentado hacer un artículo sin meterme en profundidad en aspectos técnicos y ahora vamos a ver un ejemplo de aplicación que va ayudar a entender mejor el concepto de PWA.
Si entramos a la web de BMW, podemos ver que cuentan con un diseño muy atractivo primando lo visual, pero más allá de ponernos a hablar de diseño vamos a ver de qué tipo de web hablamos.
Aparentemente es una web “normal” pero si os metéis en el código nos llevamos la primera sorpresa. En efecto, es una web enteramente desarrollada en AMP, no solo la versión móvil.
Pero vayamos al caso que nos ocupa hoy.
Una vez dentro de la web, vayámonos a la barra de “personalización y controles de Chrome”.
Como habéis podido ver, se ha abierto una ventana con el contenido de la web BMW. Comparando ambos contenidos vemos que son prácticamente idénticos.
Imagen de la web en el navegador (Chrome)
Imagen de la web en PWA desktop
Los desarrolladores de BMW han conseguido mantener un aspecto visual idéntico. Cuando aceptamos la “instalación” de la PWA en nuestra carpeta de archivos de chrome o incluso en el escritorio (dependiendo del S.O, actualente estoy usando MacOs), se nos ha descargado un acceso directo a la PWA.
Si nos estamos agobiando por instalar aplicaciones y queremos desinstalar, solo tenemos que irnos a nuestra venta de la versión PWA, pinchar en la parte derecha al igual que en Chrome y seleccionar desinstalar.
En la versión móvil es prácticamente similar. Cuando entramos en la web con versión PWA, nos llega una notificación para “crear un acceso directo”.
Si aceptamos veremos un icono de la PWA en nuestro escritorio del móvil.
DevTools para conocer más sobre las PWA
Una vez en este punto, quiero adentrarme con ejemplos a explicar conceptos y características de este tipo de aplicaciones.
Para ello vamos a utilizar la herramienta para desarrolladores que nos facilitar chrome (DevTools). Sacamos el inspector con el botón derecho y nos vamos a Application.
Devtools de Chrome
App Manifiest (Manifiesto de las Aplicaciones Web)
El manifiesto es un pequeño archivo JSON con aspectos de estilo básicos que proporciona al navegador para evitar cambios bruscos.
Ejemplo de Manifiest (JSON)
Service Workers
Como hemos explicado anteriormente, ahora podemos ver de qué se trata. Vemos el archivo JS y en él los scripts que emplea. El Service Worker se instala en el navegador. Tendremos varios de otras aplicaciones web.
Una de las funciones principales de este tipo de código es asegurarnos que se sirva siempre la misma versión (controla la caché) aunque abramos otra pestaña.
¿Cómo implementar PWA en WordPress?
Mientras que si hemos desarrollado nuestra web con código propio tendremos que hacer bastante trabajo de forma manual, la situación será muy diferente si hemos desarrollado nuestra web en WordPress. Si este es el caso, tendremos a nuestra disposición varios plugins que nos permitirán habilitar la tecnología PWA en un par de clicks. La versión PWA de SEO Alive, de hecho, es fruto de este plugin que recomendamos.
Las PWA en Marketing
Para los que nos dedicamos al marketing las Aplicaciones Web Progresivas pueden facilitarnos alcanzar objetivos que todo departamento de marketing tiene presente para hacer crecer una marca.
Fidelización y Ventas
Uno de los objetivos peor trabajados por algunas marcas. Todos conocemos la baja implicación que tienen las marcas de telefonía móvil a la hora de tratar a sus clientes, por poner un ejemplo.
Las notificaciones Push en las PWA son una de las acciones que mejor están funcionando y contribuyendo a la generación de ventas.
Un estudio realizado por Gartner sobre las PWA nos dan una serie de estadísticas muy interesantes sobre Lancome y Alibaba; Lancome nos habla de un incremento del 17% en las conversiones, un 51 % en las sesiones desde dispositivo móvil y una 52 % en iOS. Alibaba (grupo al que pertenece Aliexpress) ha mejorado el ratio del conversión en un 76%.
Aunque hemos hablado de 2 gigantes a nivel mundial, tener una aplicación en el móvil en el que el tiempo de carga y de ejecución no sea un lastre y además se respecte el buen diseño, queda demostrando que incrementa el ratio de conversión.
Concluyendo podemos decir que las PWA cada vez más se van extendiendo, principalmente, entre las grandes marcas. Seguramente en España tardemos un poco en darnos cuenta del enorme potencial de esta tecnología, pero más pronto que tarde se irá implantando.
Toda tecnología que facilite la navegación en móvil tiene una gran importancia, pasamos muchas horas con nuestros smartphone y al fin y al cambo, el acceso tanto a contenidos como a productos es negocio.
2 comentarios en «Guía Definitiva de las Progressive Web Apps (PWA)»
como puedo crear banner con botón de descarga para mi pwa
Tan solo tienes que descargarte uno de los plugins que recomendamos y seguir los pasos. A tu disposición :)