Aplicaciones Web Progresivas

Progressive Web Apps o Aplicaciones web progresivas, es un termino bastante hablado estos días en el mundo del desarrollo web, así que en esta publicación vamos a aprender que son y como empezar a aprenderlas.

Aplicaciones Web Progresivas o PWA

En términos simples, una PWA o Progressive Web App es un conjunto de tecnologías que permiten convertir una aplicación web en aplicaciones móviles nativas usando las características nativas del dispositivo móvil. Caracteristicas como la cámara, GPS (geolocalizacion), sensores, acceso Offline, entre otras características más.

Quizas te estes preguntando porque es tan popular. Bueno, se esta volviendo tan popular debido a que en un futuro muy cercano es más que probable que todas las aplicaciones web sean aplicaciones web progresivas debido a que proveen muchas ventajas y hacen tus aplicaciones más interactivas y fáciles de usar por los usuarios. así que es mejor prepararnos para el futuro ahora.

Pero empecemos analizando correctamente. ¿Que es una Aplicaciones Web Progresiva?

¿Que es una PWA o Progressive Web App?

Si tratamos de deducir a a partir del nombre, se nos hará muy difícil deducir que es realmente una PWA, ya que una progressive web app no es más que un conjunto de características que puedes añadirle a un sitio web que se ejecuta en un navegador para darle nueva funcionalidad. es decir es agregarle nuevas características a una aplicación web para que se comporte como una aplicación móvil nativa.

Y no estoy hablando del diseño web responsive o responsive web design, que hace que las aplicaciones luzcan bien en ambos dispositivos, si no de caracterizaras que hacen que nuestra aplicación web se comporte como una aplicación móvil. Un ejemplo seria que nuestras aplicaciones web tambien puedan funcionar en modo offline o que tengan un icono en el pantalla de nuestro dispositivo móvil o escritorio del computador (ya que tambien tienen el objetivo de funcionar en entornos de escritorio o Desktop), o que nos permita acceder a las características del dispositivo como la cámara, el GPS para obtener geolocalizacion, o permitirnos enviar notificaciones como si se tratara de un aplicativo movil.

En años anteriores era muy difícil crear este tipo de funcionalidad, pero actualmente todos los navegadores ya soportan estas características, la cual es la razón de porque podemos usarlas actualmente.
PWA mejora nuestras aplicaciones web para que luzcan y se comporten como una aplicación móvil nativa

Pero esto no quiere decir que si tenemos una aplicación de este tipo, esta ya no vaya a funcionar en navegadores antiguos, sino lo único que quiere decir es que si tenemos un navegador moderno podremos tener una experiencia muy superior con estas características. Y si en caso nuestro usuario no tiene un navegador moderno que soporte nuestra aplicación web, esta funcionara como cualquier otro sitio web como siempre ha funcionado, además recuerda que los navegadores siempre están en constante actualización así que no es nada descabellado pensar que estas características estarán disponibles en su totalidad en todos los navegadores populares eventualmente.

Características principales de una Aplicación Web Progressiva

entre las carateristicas principales podemos encontrar:
  • Confiable. Provee una carga rápida y funcionalidad offline, en algunas partes de la aplicación. Esto se decide al momento de desarrollo, guardando en memoria cache los datos para que estos sean cargados cuando no exista una conexion a internet.
  • Rápida. Una aplicacion Web progresiva es rápida no solo la primera vez que carga la aplicación sino también cuando el usuario esta usándola, ademas provee animaciones y provee utilizar características nativas del dispositivo de una manera intuitiva. En la práctica esto es gracias a caracteristicas de Javascript en el navegador, como un enrutador del lado client,e o el uso de AJAX. Ademas frameworks o bibliotecas del Frontend modernas como React, Angular, Vue, entre muchas otras; ya proveen soporte para aplicaciones web progresivas.
  • Atractiva. Las aplicaciones web progresivas son una experiencia atractiva y placentera para el usuario ya que proveemos una experiencia con más enganche. Podemos ofrecerle a nuestros usuarios push notifications (notificaciones similares a las de los aplicativos moviles o de escritorio) incluso si nuestra aplicación esta cerrada; Tambien podemos ofrecerle una navegacion rapida y optimizada incluso sin conexión (Offline), y muchas otras características que hacen lucir a nuestra aplicación web como si fuera una aplicacion nativa.

Mobile Web vs Native Apps

Comparemos Aplicaciones moviles web vs las Aplicaciones móviles nativas para entender si tiene sentido construir una aplicacion movil a partir de una web.
resporte conScore Mobile Metrix del 2016

Si analizamos un poco a los usuarios de aplicaciones moviles, un 80% de estos pasan más tiempo en una aplicación movil, mientras que el 8% de ellos pasan tiempo en un sitio web desde el movil, y el resto lo hace desde una App.

Ahora, esto es un poco desalentador, ya que podriamos pensar ¿porque construir una aplicacion web? si es obvio que las apps son mucho más usadas. bueno, primero veamos porque las personas pasan más tiempo en Apps.

Algunas de las razones por las que los usuarios usan una App:
  • Push Notifications. una de las razones por las que las apps son tan usadas, es por las notificaciones que reciben los usuarios, lass cuales hacen que causen interes en los usuarios y estos vuelvan a entrar en la app. Y Recuerda que puedes recibir notificaciones, aun cuando no estes utilizando la app o si tienes tu móvil en el bolsillo.
  • Home Screen Icons. Los iconos de las pantallas de los moviles hacen muy facil acceder a una aplicación, porque a diferencia de la web, los usuarios no tienen que pasar buscando tu sitio o escribir una dirección url. tan solo vas a tu pantalla de inicio, das un toque en el icono, o un doble click si estas en escritorio, y ya estás en la app.
  • Acceso a las características nativas del dispositivo móvil, como la camara, los sensores, localización y muchas otras caracteristicas de tu dispositivo.
  • Funcionamiento Offline. al tener la app instalada puedes seguir usandolas sin necesidad de tener acceso a internet.
Estas son algunas razones por la que los usuarios utilizan las aplicaciones móviles nativas, pero si lo analizas un poco, podemos hacer toda esta funcionalidad dentro de un navegador también.

Que Conlleva crear una Aplicación Móvil Nativa

  • Lenguajes de Programación distintos para cada Plataforma. Como existen múltiples plataformas, se necesitan múltiples lenguajes para cada plataforma, en los cuales podemos encontrar a los lenguajes de programación más utilizados como Java, Kotlink, Swift o Objective-C. y no solo esto ya que si quieres que tu aplicación sea soportada en multiples dispositivos, necesitas conocer más de las caracteristicas del dispositivo. Por otro lado, tambien es necesario considerar que para desarrollar una aplicacion en multiples sistemas por lo que  necesitaras muchos más desarrolladores. Sería mucho más simple si pudieras crear una aplicación en el lenguaje que ya conoces como, HTML, CSS, y Javascript que te permiten crear aplicaciones web. Ademas de ser lenguajes mucho más sencillos de aprender y utilizar en comparacion a lenguajes de programación.
Pero el mejor argumento es, que aunque aunque la mayor parte de nuestros usuarios usan aplicaciones móviles nativas, el 80% de ellos utilizan tan solo las aplicaciones top más usadas, que desafortunadamente no creo sean nuestras apps. Me refiero a que las apps mas utilizadas son apps creadas por parte de empresas como Google, Facebook, y empresas similares. Apps como Facebook, Whatsapp, .

Hay un mercado muy pequeño para nuestra app. y considera que los usuarios no pasan cada mes instalando apps nuevas, tan solo las instalan cuando tienen un dispositivo nuevo, y el resto del tiempo utilizan las apps más usadas, y estas son las estadísticas.

Analicemos entonces porque la web tiene muchas más ventaja. la razón es que mientras que en las aplicaciones móviles tenemos 3.3 billones de usuarios en la web tenemos 8.9, y a diferencia de las apps en las que los usuarios tan solo usan las apps top #1, en la web cualquier persona puede acceder a ellas, tan solo usar el buscador, y esta a un click de tu app, por lo que es un mercado más abierto. 
pero analicemos en el siguiente recuadro las diferencias.

Progressive web app vs Aplicaciones Nativas vs Aplicaciones web tradicionales 

Como ves mientras que en las apps móviles nativas tenemos acceso a las características del sistema operativo, en las web apps, el acceso es limitado, y mientras que en las web apps tenemos mucho más alcance a una enorme cantidad de usuarios en la apps nativas, el numero de usuarios se limita a las apps más populares, mientras que las Aplicaciones web progresivas, quiere tomar lo mejor de ambas propuestas.

Comentarios

  1. Muy interesante, en el ultimo cuadro deberías corregir que tienes dos veces web apps tradicionales.

    ResponderBorrar
  2. Que ejemplos hay de empresas que usen este tipos de apps y cuales segun tu punto de vista serían los aspectos negativos de esta tecnología?

    ResponderBorrar
  3. Muy claro todo, bien explicado. Me gusta. Enhorabuena :)

    ResponderBorrar
  4. mi amigo como le puedo descargar el archivo

    ResponderBorrar
  5. Gracias por el articulo, tienes algunos errores de ortografía y en la imagen pero muy bueno

    ResponderBorrar
  6. Lo que estaba buscando. Excelente articulo como siempre. Muchas gracias.

    ResponderBorrar
  7. Gracias por la información. Me agrada tu página.

    ResponderBorrar
  8. Hola Fazt, con el aumento de robos de autos en Chile, decidí instalar en mi vehiculo un GPS Tracking, funciona de maravilla, pero todo a travez de mensajes de texto, donde debo recordar telefono, comandos, password y parametros, pense en crear una app que me permitiera tener botones asociados a comandos SMS, investigue y muchos me orientaron a programar en otros lenguajes que no se, pero llegue a los "sistemas" PWA, donde me permitia realizar una pagina web y llevarla al telefono, pero no he logrado encontrar "algo" que me permita enviar SMS directo y capturar el SMS de respuesta, incluso he leido que aun no es posible acceder a los SMS o utilizar OTP, que no entendi nada. ¿Es posible hacer esto?, capturar los SMS entrantes con html/JS/PWA o definitivamente tengo que usar una APP nativa?.

    ResponderBorrar
  9. Buenas noches. Excelente información. Es de mucha ayuda saber más.

    ResponderBorrar
  10. Buen artículo, siempre es bueno cuestionar lo establecido ver nuevas opciones a lo ya existente. Me topé con tu canal de youtube, que no conocía y me pareció interesante. Se agradece el tiempo invertido y los contenidos, estan bastante buenos.

    Saludos desde Chile

    ResponderBorrar

Publicar un comentario