PWA (Progressive Web Apps) es uno de los cambios tecnológicos más comentados en la web y ha ganado un impulso sin precedentes entre los profesionales del mundo de la informática. Si estás construyendo para la web, estoy seguro de que PWA es la última «palabra de moda» que se ha añadido a tu vocabulario de trabajo. No es de extrañar porque PWA ha hecho realidad el sueño lejano de instalar aplicaciones web en el teléfono.
Ya ha habido muchos focos y ‘geekspeaks’ sobre la construcción de PWA y sus ventajas. La mayoría de los intentos de introducir PWA, especialmente a los novatos, parecen estar llenos de jerga o tenían demasiado código que podría intimidar a dar el primer paso. En este artículo, estoy tratando de dar una instantánea de PWA, lo suficiente para poner en marcha su proceso de aprendizaje.
¿Qué es una aplicación web progresiva?
«Progressive Web App (PWA) es un término utilizado para denotar una nueva metodología de desarrollo de software. A diferencia de las aplicaciones tradicionales, las aplicaciones web progresivas son un híbrido entre las páginas web normales (o sitios web) y una aplicación móvil. Este nuevo modelo de aplicación intenta combinar las características que ofrecen la mayoría de los navegadores modernos con los beneficios de la experiencia móvil»
Esto es lo que dice la wikipedia sobre las PWA. Bueno, esto puede parecer un poco vago o incluso polémico. Así que veamos la PWA de manera informal.
Si alguna vez lo mejor de la web y lo mejor de las apps tuvieron un hijo clon – es la PWA. O bien, es que la página web ha tomado todas las ‘vitaminas adecuadas’ para que pueda comportarse más como una app descargada de la App Store/ Play Store. Comienza como una página web normal en un navegador, y a medida que el usuario explora la página web, se le pregunta si desea «Añadir a la pantalla de inicio». Una vez que el usuario da el pulgar hacia arriba a esta solicitud, ¡VOILA! La PWA se añade a su pantalla de inicio. Una vez abierto desde la pantalla de inicio, puede incluso ocultar los controles de la interfaz de usuario del navegador y aparecer como una aplicación.
Esto es más como un marcador glorificado que ha golpeado el punto dulce entre la web y las aplicaciones móviles. Digo esto porque la PWA ha conseguido salvar la brecha en la web. La web siempre ha estado sedienta de un rendimiento fiable a la altura de las apps nativas. Siempre ha anhelado un lugar en la bandeja de notificaciones y en la pantalla de inicio al igual que una app. Más del 40% de los usuarios abandonan los sitios web que tardan más de 3 segundos en cargar. La PWA es una solución para esta «Epidemia de Obesidad Web» a la que se enfrentan los usuarios.
Se trata de eliminar la fricción y facilitar a los usuarios el acceso a lo que quieren.
Todo el mérito de esta experiencia sin fisuras debe darse al Service Worker( Un script que el navegador ejecuta en segundo plano separado de la página web), que es la columna vertebral de cada PWA. Los service workers permiten un almacenamiento en caché fiable e inteligente, la actualización del contenido en segundo plano, las notificaciones push y la funcionalidad offline más atractiva para los sitios visitados anteriormente. Esto significa que, después de la primera visita a un sitio web, el sitio y la aplicación serán fiablemente rápidos incluso en redes defectuosas.
Pero aquí podría surgir una pregunta: ¿qué pasa con la primera carga rápida con un rendimiento fiable? Es entonces cuando Accelerated Mobile Pages (AMP) se une al trabajador de servicios. AMP proporciona componentes web fiablemente rápidos para la primera carga. Estos componentes se cargan mucho más rápido y consumen menos datos. Los sitios web que utilizan la combinación de AMP y Service Worker proporcionarán una velocidad fiable como la de las aplicaciones nativas. Una vez cargada la página, el sitio configura el Service Worker y los activos se almacenan en caché de forma inteligente. Esto mantendrá siempre actualizada la PWA liberando así a los usuarios de las frecuentes actualizaciones que hay que hacer desde la App Store.
PWA en pocas palabras:
- Fiable : Carga rápida y funciona sin conexión
- Rápido : Animaciones suaves, desplazamiento sin jank y navegación fluida incluso en redes defectuosas
- Atractivo : Se lanza desde la pantalla de inicio y puede recibir notificaciones push
¿Por qué es importante?
Es un mito que los usuarios se descarguen alegremente la app de cada sitio web que visitan con frecuencia. Según el Informe de Aplicaciones Móviles de Comscore, más del 50% de los usuarios de teléfonos inteligentes de Estados Unidos se descargan cero aplicaciones al mes. Es decir, se acabaron los días en los que el teléfono estaba lleno de aplicaciones y la fase de luna de miel de los teléfonos inteligentes se está agotando. Cada paso para descargar una app reduce el 20% de los usuarios. La PWA reduce los pasos entre el descubrimiento de una aplicación y su inclusión en la pantalla de inicio y, por lo tanto, elimina la fricción de conseguir instalar una aplicación. Esto proporciona un terreno muy fértil para que las empresas lancen sus PWA.
Se pueden destacar las siguientes tres métricas para entender la importancia de las PWA para moldear la web del futuro.
a. Alcance : La audiencia de la web móvil ha crecido a un ritmo vertiginoso en los últimos años. Google ha informado que Chrome tiene la friolera de mil millones de usuarios móviles en comparación con los antiguos 400 millones de usuarios en 2016. Según el informe de Comscore, el alcance de la web móvil es 2,5 veces mayor que el de las aplicaciones, teniendo en cuenta los 1000 principales sitios y aplicaciones. Esta es la razón por la que la decisión de Flipkart, Myntra, etc., de abandonar su sitio web y ser «solo aplicaciones» fue contraproducente. Si pudiéramos proporcionar una mejor experiencia a un público más amplio, seguramente podríamos obtener una ventaja competitiva sobre los demás.
b. Adquisición : Otra grave preocupación a la que se enfrentan las apps móviles es su capacidad de descubrimiento de los usuarios en comparación con los sitios web. El coste de adquisición de usuarios de la web será 10 veces más barato que el de las apps nativas. Con una mayor exposición y una baja fricción para la incorporación, es probable que la PWA adquiera más usuarios con un gasto muy reducido.
c. Conversión : La experiencia de usuario sin fisuras, incluso con redes defectuosas, proporcionada por la PWA mejora el número de conversiones exitosas. Flipkart lanzó su PWA ‘Flipkart-lite’, que afirman haber entregado un aumento en la tasa de conversión en un 70% con un menor costo de adquisición.
En resumen: La PWA ayuda a mejorar las conversiones aumentando el alcance potencial con bajos costes de adquisición.
¿Cómo empezar?
Una vez que se conoce una nueva tecnología, el siguiente reto en línea es la decisión de adoptarla. La mayoría de la gente se encuentra en un dilema en este punto. La decisión debe ser impulsada por la necesidad específica de su negocio. Los siguientes dos casos podrían ayudarte a identificar el método que te conviene para implementar la PWA.
a) Desde cero
Considera el escenario cuando una empresa está construyendo un nuevo sitio web o pasando por un rediseño. En este caso, construir una PWA desde cero tiene sentido y es factible. Esto hará que la empresa aproveche la potencia de la PWA con AMP, service workers, App shell y Web Manifest. Por ejemplo. Según Ali Express, una vez que renovaron su sitio web como PWA, fueron capaces de aumentar su tasa de conversión para los nuevos usuarios en un 104%, ganaron 2X más páginas visitadas por sesión por usuario en todos los navegadores y un aumento del 74% en el tiempo invertido por sesión en todos los navegadores.
b) Una versión simple o Una sola característica
Cuando la construcción desde cero no es realista, siempre se puede construir una versión simple del sitio web o centrarse en una sola característica que tenga un alto impacto para los usuarios finales. El objetivo es ofrecer una experiencia rápida, atractiva y fiable. AirBerlin es un ejemplo apropiado en este caso. Se centraron en la experiencia posterior a la reserva en su PWA. Después de que un pasajero haya facturado, puede acceder a los detalles de su viaje y a la tarjeta de embarque incluso sin conectividad a Internet.
4. Desafíos en la PWA
Hay algunos desafíos en la PWA que hay que tener en cuenta a la hora de elegirla.
a) Soporte de navegadores cruzados : Mientras que Chrome, Opera y el navegador androide de Samsung son compatibles con la PWA, IE, Edge y Safari todavía tienen que ampliar su soporte.
b) Funcionalidad limitada: La PWA no tiene soporte para ningún hardware que no sea compatible con HTML5
c) Legitimidad limitada: Al no existir una tienda central de descargas para las PWA, carecen de dar una sensación de legitimidad y confianza que sí suelen dar las apps nativas de Play Store/App Store.
d) Soporte de inicio de sesión entre aplicaciones: Las apps nativas tienen la capacidad de hablar con otras apps y autenticar inicios de sesión (Facebook, Twitter, Google). Como página web, la PWA no tiene la capacidad de comunicarse con otras apps instaladas.
Conclusión
No podemos decir que la PWA matará a las apps nativas en el futuro. Pero todavía hay un interés creciente por este enfoque en la comunidad. Las PWAs están todavía en su infancia con un montón de retos por resolver. Sin embargo, tienen el potencial de crear un cambio en la forma en que funciona la web.
Alimento para el pensamiento
Según Henrik Joreteg, «¡la PWA es lo más grande que ha sucedido en la web móvil desde que Steve introdujo el iPhone!»
¿Discutible? ¿Controvertido? ¿Aceptable?
Piensa antes de que el tiempo vuele