¿Qué es una aplicación web progresiva (y por qué debería importarte)?

En 2016, los usuarios móviles primero superaron a aquellos que accedían a la web desde dispositivos de escritorio. Desde entonces, el móvil no ha mostrado ningún signo de desaceleración.

A medida que todos buscan cómo hacer que los sitios web y las aplicaciones web sean más amigables con los dispositivos móviles, cada vez más comenzarás a encontrar la frase "Aplicación Web Progresiva". Hoy estamos analizando qué es esto, en qué se diferencia de otras tecnologías como AMP y cómo puede comenzar.

El móvil no está disminuyendo

Un estudio del Templo de Piedra demuestra cómo esta división continúa creciendo con cada año que pasa. Aquí es cómo esas tendencias de uso cambiaron de 2016 a 2017 solo en los Estados Unidos:

Y el móvil parece ser aún más popular entre los usuarios globales:

Como tal, tenemos que preguntarnos, ¿cómo podemos mejorar la experiencia móvil tal como está? ¿Hemos llegado a la cima de la movilidad móvil?

Google se encargó de responder esa pregunta con la introducción de la aplicación web progresiva en 2015. Exploremos cómo se ve el futuro de la web móvil con las aplicaciones web progresivas y por qué debería importarle.

¿Qué es una aplicación web progresiva?

Una aplicación web progresiva (PWA) es una que cierra la brecha entre los sitios web móviles y las aplicaciones móviles. Si bien sería fácil describir un PWA como un sitio web móvil dentro de un shell de aplicación, hay mucho más que eso.

Esencialmente, toma la experiencia móvil que desean los usuarios y la amplifica con todas las cosas buenas que surgen de tener su propia aplicación nativa totalmente sensible. Puede esperar lo siguiente de una aplicación web progresiva:

  • Aplicación de interfaz de usuario y navegación
  • Velocidad de página
  • Confiabilidad
  • Presencia en la pantalla de inicio
  • Capacidades fuera de línea
  • Funciones de telefonía (como notificaciones push y geolocalización)

Hay muchos tipos de sitios web que pueden beneficiarse de tener un PWA. Las redes sociales como Twitter ya han hecho el cambio.

Compañías de medios como Forbes, sitios de bienes raíces como Housing.com y servicios de hospitalidad como Ele.me también han implementado exitosamente PWA.

Cada uno ha experimentado diferentes resultados, aunque el resultado es siempre los mismos tiempos de carga más rápidos, una interfaz de usuario mejorada y una gran comodidad y acceso. Todo lo cual lleva a usuarios más comprometidos.

¿Cómo construir una aplicación web progresiva?

A diferencia de las aplicaciones nativas que generalmente requieren la contratación de desarrolladores de aplicaciones para administrar el proceso y una gran inversión de fondos para hacerlo, las aplicaciones web progresivas son mucho más fáciles y, a menudo, más económicas de construir.

Una aplicación web progresiva consta de dos partes: un manifiesto de aplicación web y trabajadores de servicios. Permíteme explicarte más.

Aplicación Web Manifiesto

Este es un archivo JSON que define los elementos similares a una aplicación de un PWA. Incluye cosas como:

  • Nombre de la aplicación
  • Icono de la aplicación
  • Diseño de navegación y elementos para el encabezado y / o pie de página.
  • Diseño de la pantalla de bienvenida.
  • Otros metadatos

Trabajadores de servicio

Los trabajadores del servicio son los que realmente le dan a las aplicaciones web progresivas su poder sobre la experiencia web estándar.

Los trabajadores del servicio se configuran a través de un archivo JavaScript. Lo que hacen es hacer que su aplicación se ejecute de la manera más eficiente y rápida posible. Además, ya sea que sus usuarios estén en línea o fuera de línea, siempre tienen acceso a su contenido, ya que los trabajadores del servicio funcionan de manera muy similar a como lo hacen los servidores proxy de almacenamiento en caché.

En términos de construir una aplicación web progresiva, tienes un par de opciones.

La primera opción es utilizar la documentación del desarrollador de Google y escribir su propia PWA. Pero esa opción aún requiere una inversión de su tiempo y recursos.

Si no está preparado para manejar ese nivel de trabajo, o prefiere enfocar sus energías en otro lugar, puede usar una herramienta como la plataforma de diseño web Duda para convertir fácilmente su sitio web en una aplicación web progresiva.

Todo lo que necesita es un clic para activar la función, y solo unos pocos más para configurarlo a su gusto.

¿En qué se diferencia una aplicación web progresiva de un sitio web?

Como puede ver en el Informe de la aplicación móvil digital 2017 de comScore, la mayoría del tiempo que los usuarios de dispositivos móviles pasan en sus teléfonos es en realidad con aplicaciones y no con sitios web basados ​​en navegadores.

Existen muy buenas (y válidas) razones por las que los usuarios de dispositivos móviles prefieren la experiencia similar a la aplicación en lugar del navegador básico. Y debido a que PWA ayuda a los usuarios a dar ese salto sin tener que comprometerse con otra descarga de recursos de la tienda de aplicaciones, debe prestar mucha atención a las siguientes diferencias y beneficios.

Las aplicaciones web progresivas son la opción óptima en la web móvil porque:

  • Un PWA está diseñado para ser más atractivo ya que utiliza barras de herramientas y elementos fáciles de encontrar.
  • Los usuarios agregan su icono a su pantalla de inicio. Esto aumenta la visibilidad, lo que los hace más propensos a interactuar con su aplicación.
  • Los navegadores de Android automáticamente piden a los usuarios que instalen PWAs a sus pantallas de inicio, lo que aumenta el factor de conveniencia.
  • Los PWA resultan en tiempos de carga increíblemente rápidos.
  • Los trabajadores de servicios aumentan la confiabilidad del acceso a los PWA, ya que son independientes de la conectividad.
  • Los PWA se integran perfectamente con las funciones de telefonía de los usuarios; en particular, los servicios de notificaciones push, click-to-call y geolocalización.
  • HTTPS es un requisito para todos los PWA, lo que los hace inherentemente más seguros que la web.
  • Mynet fue una de esas compañías que tomó nota de la drástica diferencia entre la experiencia de su sitio web móvil y su aplicación móvil.

    Mientras que el 85% del tráfico que recibió Mynet provino de la web móvil, los usuarios pasaron el doble de tiempo en la contraparte de la aplicación móvil. Una vez que la marca turca de medios lanzó su PWA (con la ayuda de contenido impulsado por AMP), Mynet vio que las páginas vistas y el tiempo en el sitio mejoraron considerablemente.

    ¿En qué se diferencia una aplicación web progresiva de las páginas móviles aceleradas?

    ¿Qué quieren los usuarios móviles? Velocidad, comodidad y facilidad de uso, cosas que tanto los artículos de PWA como los de AMP hacen excepcionalmente bien. Dicho esto, existe una clara diferencia entre las dos plataformas compatibles con dispositivos móviles creadas por Google.

    AMP, o Páginas Móviles Aceleradas, mantiene a los usuarios dentro del navegador móvil. Sin embargo, reduce considerablemente los tiempos de carga al eliminar u optimizar elementos que tienden a atascar las velocidades de carga del navegador, como:

    • JavaScript de bloqueo de procesamiento
    • Archivos de peso
    • Scripts externos
    • CSS hinchado
    • Animaciones de recursos caros

    Básicamente, toma todos esos elementos del backend que pesan sobre la experiencia del frontend y los convierte en algo más liviano y manejable. Debido a esto, hay algunas partes de la experiencia móvil que están comprometidas, por lo que AMP es ideal para sitios web con gran cantidad de contenido que priorizan la legibilidad sobre la funcionalidad.

    Los PWA, por otro lado, son tan rápidos como AMP pero no sacrifican funciones para hacerlo. Es por eso que hay un mayor rango de posibilidades para PWAs.

    Sin embargo, lo que muchos usuarios podrían no darse cuenta es que esto no tiene que ser una elección de uno u otro. Google ha desarrollado estas soluciones para que puedan trabajar en conjunto. El caso en cuestión es Wego.

    AMP se combinó con trabajadores de servicio de PWA para velocidades de carga súper rápidas (menos de 1 segundo). Esto dio lugar a grandes mejoras en las visitas orgánicas (hasta un 12%) y conversiones (95% más). Wego también descubrió que las páginas de carga más rápida significaban más interacción (tres veces más) con los elementos monetizados en la aplicación, también.

    ¿En qué se diferencia una aplicación web progresiva de una aplicación nativa?

    Un estudio de Localytics de 2016 demuestra lo difícil que puede ser para las aplicaciones nativas reclamar un lugar dedicado en los dispositivos móviles de los usuarios:

    Por supuesto, una vez que una aplicación ha demostrado su valía y ha logrado que los usuarios inicien sesión y participen casi una docena de veces, entonces esas tasas de retención parecen bastante sólidas. Pero, ¿qué está pasando aquí? ¿Por qué los usuarios aman las aplicaciones móviles pero no pueden comprometerse con ellas?

    Bueno, cuando comparas una aplicación nativa con una aplicación web progresiva, puedes ver una clara diferencia en por qué la web móvil se está moviendo más y más hacia la PWA:

    Costo

    Cuesta mucho menos construir un PWA, lo que lo hace accesible para más empresas.

    Capacidad de búsqueda

    Los PWA pueden clasificar como cualquier sitio web móvil regular en la búsqueda. Esto significa que hay una mayor probabilidad de que los usuarios se encuentren con ellos que aquellos que tienen que visitar la tienda de aplicaciones dedicada de su dispositivo.

    Recursos

    Los PWA tienden a funcionar de forma magra, gracias a los trabajadores de servicio. Las aplicaciones nativas, al ser el ancho de banda y los recursos de almacenamiento que son, no pueden competir con eso. Según el informe de comScore, una de las principales razones por las que los usuarios eliminan una aplicación es la cantidad de espacio que consume:

    Flexibilidad

    En general, las aplicaciones nativas se crean para un dispositivo sobre otro: iOS o Android. Por lo tanto, el mantenimiento de un producto en realidad requiere al menos el doble de trabajo en la mayoría de los casos. Pero con los PWA que viven en el navegador y, sin embargo, pueden existir fuera de ellos, son compatibles con todos los navegadores y dispositivos.

    Compartibilidad

    Los PWA tienen URL que pueden compartirse fácilmente con otros. Las aplicaciones nativas no lo hacen.

    Todo esto, por supuesto, no significa que deba evitar la creación de una aplicación nativa para su negocio si tiene sentido. Las aplicaciones nativas son excelentes para casos de uso muy específicos. Por ejemplo:

    Las redes sociales, el chat y las plataformas de entretenimiento dominan la lista de las aplicaciones móviles más populares. También encontrará una gran cantidad de conceptos basados ​​en juegos, productividad y recompensas en forma de aplicación también.

    Por otro lado, los PWA no suelen tener restricciones tan severas en términos de qué tipo de empresas se desempeñan mejor en ellas.

    Resumen

    Entonces, ¿por qué algo de esto importa? Bueno, si ha esperado encontrar una mejor manera de ponerse en contacto con sus usuarios móviles, es posible que las otras opciones disponibles no lo hayan eliminado.

    • La web móvil es demasiado limitante y no funciona más allá de los límites del navegador.
    • AMP es ideal para sitios controlados por contenido, pero no mucho más.
    • Las aplicaciones nativas son una buena solución para ciertos modelos de negocios, pero pueden ser costosas de construir, difíciles de administrar y difíciles de mantener felices a los usuarios.

    La aplicación web progresiva toma los puntos fuertes de cada una de estas plataformas y las combina en algo que nuestros usuarios móviles desean y necesitan. Este es el futuro de la web móvil.