Todo el Internet parece estar discutiendo PWA en este momento. Y el tema se puso aún más de moda después de Google I / O 18 ‘y una confirmación largamente esperada de que los PWA llegarán al escritorio con Chrome 67 a principios de junio.
Pero demos un paso atrás aquí … Probablemente ya lo sepas, pero el término fue acuñado por dos ingenieros de Google, Alex Russell y Frances Berriman, en 2015. El concepto, sin embargo, parece tener vigencia solo en 2018.
La popularidad de PWA está llegando a su punto máximo en 2018 (fuente: Google Trends)
De hecho, es un concepto fascinante, que le permite crear un sitio web que se ve y se comporta como una aplicación nativa en diferentes plataformas.
Ya hemos visto muchos ejemplos de compañías que intentan lograr una experiencia similar a la aplicación, incluida la operación fuera de línea, la capacidad de agregar una aplicación a la pantalla de inicio, notificaciones automáticas, etc. ¿Recuerda conceptos como aplicaciones de la Tienda Windows, Electron y Chrome Aplicaciones empaquetadas? Todos hicieron exactamente eso, pero al mismo tiempo abandonaron la Web. Después de todo, si no puede vincularse a algo, no es la Web.
Las aplicaciones web progresivas son algo diferente. En lugar de implementar aplicaciones nativas en todas las tiendas a la vez, como en el caso de otras tecnologías multiplataforma, el objetivo principal de los PWA es reutilizar el código existente para proporcionar una experiencia móvil. Es una especie de revolución que tiene lugar en los navegadores modernos.
Los PWA brindan la experiencia de una aplicación sin abandonar la Web. Básicamente son sitios web creados con tecnologías modernas y que proporcionan una experiencia completamente nueva al usuario:
- son instalables: si un usuario visita su sitio web por segunda, tercera o cuarta vez, tiene la opción de agregarlo a su pantalla de inicio. Después de eso, todavía se puede vincular y, por lo tanto, se puede compartir a través de URL.
- son indexables: su aplicación es visible en los navegadores y, por lo tanto, los usuarios pueden buscarla
- funcionan sin conexión: una vez que lo descarga en su dispositivo, puede consumir contenido de la aplicación sin una conexión a Internet. Sus usuarios nunca verán al downasaur corriendo 🙂
- pueden enviar notificaciones push: una vez que aparezca un nuevo artículo / producto / noticia, se notificará a los usuarios.
- reducen los tiempos de carga de la página: como lo demuestra housing.com, los PWA pueden reducir significativamente los tiempos de carga de la página y, por lo tanto, mejorar la experiencia de usuario general.
- son progresivos: funcionarán para cualquier usuario en cualquier dispositivo, incluso con una mala conexión a Internet.
Además, los PWA siguen los principios básicos de una experiencia web positiva: son rápidos, integrados, confiables y atractivos.
Una diapositiva de Google I / O 18 ‘, el discurso de Jenny Gove y Pete LePage
Así es como funcionan las aplicaciones web progresivas
Permítanme usar un gif genial del ejemplo de Paul Kinlan y Matt Gaunt: el sitio de Chrome Dev Summit.
Esto es lo que está pasando:
- Todo comienza en una pestaña. Un usuario visita Chrome Dev Summit por segunda (tercera, cuarta …) vez. Esa es una señal de que podrían estar interesados en el contenido futuro de esta página y el navegador puede verificar si cumplen con los criterios de frecuencia. Para evitar el spam, no sucede nada en la primera carga.
- El usuario recibe una invitación del navegador para mantener el sitio web guardado como una aplicación en su pantalla de inicio gracias al poder del Manifiesto de la Aplicación Web.
- El banner de instalación de la aplicación se puede cancelar o reaparecer en un momento más conveniente si el usuario no desea agregar la aplicación de inmediato. Si lo instalan, el banner ya no aparecerá.
- El usuario puede volver a visitar la aplicación en cualquier momento. Funcionará sin conexión (con algunas limitaciones, por supuesto), se mantendrá receptivo, rápido y mantendrá toda la magia de PWA.
Tenga en cuenta que las capacidades de las PWA ahora también se extienden al escritorio, por lo que muy pronto los usuarios podrán llevar la aplicación a sus computadoras.
¿Cuándo debería considerar desarrollar una PWA?
Lo que pasa con los PWA es que no son visibles en las tiendas de aplicaciones (aparte de Microsoft Store), por lo que elegir este enfoque cerrará ese canal de tráfico específico en particular para usted. ¿Puede su negocio manejar eso? Elegir el enfoque PWA también puede tener poco sentido si sus usuarios no visitan su sitio web de manera regular porque se les puede solicitar que descarguen la aplicación en sus pantallas de inicio solo mientras visitan el sitio en un navegador. Por otro lado, si no tiene visitas frecuentes, crear una aplicación móvil tiene aún menos sentido … Lo que estoy tratando de decir es que PWA definitivamente es parte del futuro de las aplicaciones, pero el enfoque no es perfecto. Al menos por el momento.
Las preguntas a continuación y sus respuestas lo ayudarán a decidir si los PWA son una solución que debería analizar más de cerca:
1. ¿Reducir el costo de adquisición de clientes es uno de sus objetivos clave?
Disculpas si te sentiste algo manipulado para responder afirmativamente, pero PWA en realidad reduce el CAC. La adquisición de usuarios es difícil y realmente costosa para las aplicaciones nativas y algunas compañías ya han anunciado que sus costos de adquisición se redujeron hasta 10 veces después de la introducción de PWAs. Cuanto más tiempo y barreras se puedan eliminar del proceso de adquisición, mejor, por lo que los PWA definitivamente son un ganador aquí.
2. ¿Sus usuarios descargan su aplicación a través de tiendas de aplicaciones? ¿O lo harían ellos?
Si está desarrollando una aplicación para administrar los presupuestos domésticos, existe una alta probabilidad de que sus posibles usuarios estén navegando en las tiendas de aplicaciones usando palabras clave como “administración de presupuestos”, “presupuestos domésticos” y similares. Si eres Spotify (bueno, ¡¿verdad ?!), es mucho más probable que tus usuarios descarguen tu aplicación directamente visitando la tienda de aplicaciones en lugar de visitar Música para todos … Pero no confíes en mi palabra: eso es en realidad solo mi presunción.
Y para que lo sepas, Spotify en realidad tiene un PWA. Puede consultar la simple demostración de su lanzamiento en Chrome OS, escritorio.
3. ¿Su aplicación requiere poderes de procesamiento considerables?
Los PWA funcionarán perfectamente para plataformas de comercio electrónico, sitios web de eventos, portales orientados a la educación y similares. También tenga en cuenta que con los PWA se puede acceder sin conexión solo en una versión limitada. Por otro lado, algunas aplicaciones pueden beneficiarse enormemente al ejecutarse directamente en el dispositivo y tener acceso directo a sus recursos.
4. ¿Necesita características nativas específicas de la plataforma?
Los PWA tienen una cosa muy importante en común con las aplicaciones nativas: las notificaciones push. Puede recordar fácilmente a sus usuarios sobre su existencia una vez que publique nuevo contenido o agregue nuevos productos a su pila. PERO. Si planea introducir características como geofencing, pagos móviles y acceso a listas de contactos / calendarios a su aplicación, optar por una aplicación nativa sería una opción mucho mejor.
5. ¿Estás de acuerdo con esperar un mejor soporte de Apple?
El soporte para PWA es actualmente más fuerte en Android / Chrome, mientras que la experiencia del usuario iOS / Safari sigue siendo inferior. Apple agregó soporte PWA en iOS 11.3, sin embargo, la lista de características faltantes todavía es bastante larga: sin notificaciones push, sin pantalla de inicio, falta de Banner de aplicación web, falta de soporte para otros navegadores que Safari, y mucho más.
6. ¿Ya tienes un sitio web optimizado para móviles?
El costo de convertirlo en PWA será relativamente bajo, especialmente en comparación con el desarrollo de una aplicación nativa desde cero. Y obtienes todas las golosinas de PWA en el paquete.
Si todavía está construyendo su producto y preparándolo para su lanzamiento, PWA e iOS trabajarán juntos en la mayoría de los casos (lo que le dará versiones Web + iOS + Android). Sin embargo, existe la posibilidad de que, en un futuro cercano, los PWA solos hagan todo el trabajo.
Casos de la vida real
Para aquellos que aún no están convencidos de que los PWA son una cosa ahora, los Googlers han preparado un montón de estudios de casos que describen cómo la tecnología impactó positivamente a las empresas de diferentes formas y tamaños, y hay una probabilidad extremadamente alta de que ya haya utilizado uno de los los productos que decidieron rediseñar sus sitios web para seguir este nuevo enfoque como la lista de empresas que lo han adoptado desde su lanzamiento ahora incluye Forbes, Twitter, 饿 了 么 – 网上 订餐 _ 外卖 _ 饿 了 么 订餐 官 网, Lancome, OLX, Guardian , AliExpress y Flipkart. Pero toda la lista es mucho, mucho más larga.
Ahora veamos cómo los PWA influyeron en algunas de esas empresas.
Twitter Lite
Twitter es una de las aplicaciones sociales más populares con 328 millones de usuarios activos mensuales. Dado que el 80% de ellos usan Twitter en dispositivos móviles, los desarrolladores querían mejorar la experiencia móvil para ser más rápidos y confiables. Al hacer que los PWA fueran la experiencia móvil predeterminada en abril de 2017, lograron:
- Disminuir la tasa de rebote en un 20%
- Aumenta el número de Tweets enviados en un 75%
- Aumenta el número de páginas por sesión en un 65%
Esos son números bastante impresionantes. Los usuarios de Lite también pueden reducir la velocidad a la que están quemando a través de sus planes de datos; un PWA tiene solo 600kB, mientras que la versión descargada pesa 23.5MB. Para la versión Lite, el primer tiempo de carga en una red 3G es de aproximadamente 5 segundos. Cuando el usuario regresa, la aplicación se carga en menos de 3 segundos.
Según Nicolas Gallagher, responsable de ingeniería de Lite: “Twitter Lite es una aplicación JavaScript del lado del cliente y un servidor Node.js pequeño y simple. El servidor maneja la autenticación del usuario, construye el estado inicial de la aplicación y representa el shell de la aplicación HTML inicial. Una vez cargada en el navegador, la aplicación solicita datos directamente de la API de Twitter “.
Lea el estudio de caso completo de Twitter Lite.
http://MakeMyTrip.com
Más de dos tercios del tráfico entrante al sitio web de la compañía de viajes líder de la India proviene de dispositivos móviles. Con 23 millones de descargas de su aplicación nativa, el móvil es un canal indispensable para la empresa. El lanzamiento de una versión PWA mejoró significativamente la experiencia del usuario y aumentó los ingresos, también:
- Tasas de conversión triplicadas
- Se mejoró el tiempo de carga de la página en un 38%.
- Aumentó el número de sesiones de compradores en un 160%
Incluso cuando el banner de la aplicación web no aparece, http://MakeMyTrip.com alienta a los visitantes a agregar su PWA a la pantalla de inicio.
MakeMyTrip encontró difícil ofrecer una experiencia de usuario impecable a los usuarios con conexiones de Internet deficientes. Además, el número de bajas y los costos de adquisición de clientes eran inaceptables y el desarrollo de una PWA resultó ser un gran remedio para esos problemas. Finalmente, MakeMyTrip decidió apegarse tanto a los enfoques nativos como a los de PWA, y equilibraron su estrategia con ambas soluciones en juego.
Lea el estudio de caso completo de MakeMyTrip.com.
Si está interesado en encontrar más fuentes sobre PWA, lea toda la publicación de blog de mi colega Karolina: “¿Debería considerar PWA?” Posibilidades notables de aplicaciones web progresivas