En estos últimos meses, he podido observar el incremento y empuje que Google está llevando a cabo en cuestión de las Progressive Web Apps. En sí, al trabajar de cerca con una PWA, puedo dar fe a que es una solución bastante atractiva con la que se puede experimentar.
Por años, la gran pregunta alrededor de las aplicaciones siempre ha sido el ‘¿cuál es mejor?’, aplicaciones web o aplicaciones móviles, y puede que lo siguiente de lo que vamos a hablar pueda ser una buena alternativa para responder, ya que ha emergido esta tecnología la cual está tomando las ventajas de cada uno de estos desarrollos para crear una mejor experiencia: las Progressive Web Apps.
Las PWAs fueron lanzadas en el 2015 por bastantes y muy buenas razones. Primero que nada, usan mucho menos datos que una mobile app regular. En todo este tiempo se ha observado que funcionan mucho mejor que las apps nativas, en lugares o situaciones donde existe una conectividad mala o muy pobre. Actualmente, cientos de mercadólogos y equipos de desarrollo incentivan a sus equipos a aumentar su uso para llevar a cabo experiencias de usuario mucho más sencillas y amenas.
En muchos países, las marcas comienzan a utilizar el concepto PWA, ya que se han dado cuenta que ofrece mucho mejores experiencias de usuario, independientemente del dispositivo donde se corra. Las PWAs eliminan mucha de la fricción existente, usando la web para ofrecer apps a nivel nativo. No hay necesidad de ir a buscar las apps a las tiendas, no existe un gasto de datos para su descarga, no hay que esperar a su instalación, etc. Solamente se navega en el browser y listo.
Algo interesante de las PWAs es que están enfocadas en cargar rápido con un mínimo de consumo de datos y que incluso, puedan funcionar sin una conexión a Internet. Con esto en mente, es bueno que sepamos que el 53% de los usuarios, abandonan un sitio si toma más de tres segundos en cargar, pero eso se intenta eliminar con el uso de las PWAs.
El 53% de los usuarios, abandonan un sitio si toma más de tres segundos en cargar.
Los nuevos estándares para la Interacción Web
Twitter es un caso de éxito respecto a la adopción temprana de las PWAs después de lanzar Twitter Lite, que toma menos de 1 megabyte para cargar, es decir 30% más rápido que la app normal, haciendo que se ahorre hasta un 70% de datos. Las pruebas que se llevaron a cabo para poder sacar esta información, fueron hechas con reloj y una conexión a una red 3G bastante deficiente, donde se demostró una carga menor a 5 segundos.
MakeMyTrip, un sitio de reservaciones de la India, lanzó su PWA para ofrecer a todos los usuarios de teléfonos inteligentes, una experiencia de reserva móvil eficaz y fiable sin importar el tiempo, la ubicación o la disponibilidad de la red. La compañía vio triplicar su tasa de conversión global y un aumento del 160% en las sesiones de compras.
Siempre hemos dicho que atender las necesidades del mercado es una prioridad clave, y este lanzamiento nos lleva un paso más en nuestro compromiso de proporcionar movilidad a un billón de indios — Cofundador y CTO, Ankit Bhati.
Resultados como estos, están permitiendo aclarar por qué las PWAs están convirtiéndose rápidamente en el nuevo estándar para las interacciones web, aunque se tiene que aclarar que esto no se trata simplemente de eliminar funciones a lo masivo en favor de la velocidad. Tanto en dispositivos Android como en iOS, los usuarios pueden volver a crear lazos con una marca gracias a las notificaciones push, en donde puedes dar a conocer ofertas o lanzar recordatorios. También, se pueden guardar iconos en las pantallas de inicio de un teléfono, haciéndolos fácilmente accesibles y ofreciendo una sensación de aplicación nativa.
Una pregunta interesante que ha salido a la luz al momento de exponer acerca de las PWAs, ha sido si ellas reemplazan a las aplicaciones nativas. La respuesta que he manejado siempre ha sido la misma; ambas pueden trabajar en tándem. Además es bueno hacer el recordatorio que, para hacer un trabajo correcto, siempre será necesario saber los objetivos de la marca que está lanzando tal o cual app, para poder tener en cuenta los alcances y limitaciones de las tecnologías que se usarán y si estas van a poder cubrir las metas que se están persiguiendo. Por ejemplo, tal vez necesitemos validar una app en un tiempo récord antes de entrar en el proceso de desarrollo de una nativa. Gracias a lo fácil que se puede considerar, poner en funcionamiento una PWA, podríamos estar llevando a cabo pruebas en un tiempo considerablemente menor.
Alibaba.com, una de las plataformas de comercio electrónico más grandes del mundo, registró un aumento del 76% en sus conversiones y una tasa de interacción cuatro veces mayor, después de actualizar su sitio móvil a una Progressive Web App.
La marca Lancôme experimentó un aumento del 53% en la duración de sus sesiones y sus tasas de rebote disminuyeron un 10% entre los usuarios de iPhone. Lo más interesante es que sus conversiones aumentaron un 17%.
Pero lo mejor fue que estas mejoras no ocurrieron solo en productos de consumo, Weather Channel registró una mejora del 80% en el tiempo de carga de su sitio en PWA, con casi un millón de usuarios que además optaron por recibir notificaciones push.
Requisitos técnicos en una Progressive Web App
Cuando queremos comenzar a utilizar la tecnología detrás de una PWA, primero hay que decidir si una PWA es lo mas adecuado para nosotros. Las PWAs ofrecen a los usuarios mejores experiencias web, definitivamente, pero por lo mismo de que es una forma de desarrollo relativamente nueva, se ha observado que en mercados latinos no ha terminado de generar mucha confianza por lo tanto, es menos la adopción.
Las PWAs cuentan con un par de checklists para poder ser consideradas como tal.
Lista base para una PWA:
- HTTPS ← Sin esto, no funcionará una PWA, ¡nunca!
- Responsiva en tablets & dispositivos móviles
- La URL de inicio se carga aunque se esté en modo offline
- Metadatos proporcionados para “Agregar a la Pantalla de Inicio”
- Primera carga rápida, incluso en 3G
- El sitio trabaja igual en cualquier navegador
- Las transiciones de página no se sienten como “atoradas”
- Cada página tiene su propia URL
Checklist de aplicaciones de una PWA:
Indexabilidad & social
- El contenido del sitio está indexado por Google
- Se proporcionan metadatos de Schema.org donde sea apropiado
- Se proporcionan metadatos sociales cuando procede
- Las URL canónicas se aplican cuando es necesario
- Las páginas utilizan la API de Historial
Experiencia de Usuario
- El contenido no salta mientras la página se carga
- Al volver a una página, desde una página de detalle, se conserva la posición donde se quedó inicialmente
- Al hacer una selección o llenado, los formularios no son tapados por el teclado de la pantalla
- El contenido se puede compartir fácilmente en cualquier modo
- Responsiva en tablets & dispositivos móviles
- Las solicitudes de instalación de la aplicación no se utilizan excesivamente
- El mensaje de “Añadir a pantalla de inicio” se intercepta
Desempeño
- Primera carga rápida, incluso en 3G
Caché
- El sitio utiliza la primera conexión en caché
- El sitio informa apropiadamente al usuario cuando está fuera de línea
Notificaciones Push
- Proporcionar contexto al usuario sobre cómo se utilizarán las notificaciones
- La interfaz que alienta a los usuarios a activar las notificaciones no debe de ser demasiado agresiva
- El sitio atenúa la pantalla cuando se muestra la solicitud de permiso
- Las notificaciones push deben ser oportunas, precisas y pertinentes
- Proporciona controles para habilitar y deshabilitar las notificaciones
Características Adicionales
- El usuario se registra en todos los dispositivos a través de la API Credential Management
- El usuario puede pagar fácilmente a través de la interfaz de usuario nativa desde la API de solicitud de pago.
A tomar en cuenta para comenzar a pensar en una PWA
Sabemos que el proceso en un dispositivo móvil siempre será muy similar. Un usuario nos buscará en su browser, intentará visitarnos y su principal acercamiento será el uso inmediato de una app sin haber tenido que instalar nada, ¡imagina las posibilidades!. Si ya se cuenta con una aplicación nativa, puedes solicitar a los usuarios que la descarguen mas tarde, para poder relacionarte con ellos.
Considera la experiencia de instalación de la aplicación. Las PWAs permiten que un usuario instale el sitio a través de un icono en la pantalla de inicio de su teléfono (cosa que mencionamos en la lista de requerimientos). Ten en cuenta cuándo introducir dicho mensaje de instalación: no debe sentirse intrusivo. Por lo mismo, es muy necesaria la creatividad con la que se debe de invitar a una instalación y la experiencia que se pretende ofrecer, incluyendo cómo se verá la PWA cuando se instale el icono asignado y en la pantalla de bienvenida, al iniciar.
Como último detalle a tomar en cuenta, es el diseño de la propia PWA. Los consumidores tienen mayores expectativas de la interfaz para las aplicaciones que para los sitios móviles, por lo que el diseño debe ser sensible y bien aplicado para una interacción similar a las aplicaciones nativas: rápidas y sin problemas, a pesar de que el Internet muestre una velocidad de conectividad baja.
Fuente: Datos anónimos de Google Analytics de un muestreo de sitios mWeb que compartieron su información para estudios de mercado, Marzo 2016.
