PWA: ¿Qué es una Progressive Web APP y en qué se diferencia de una Nativa?

En el mundo de la informática, la principal obsesión es sin dudas optimizar la experiencia del usuario, refiriendome claro está desde el punto de vista de un desarrollador. Esto es especialmente importante en el ecosistema mobile, donde la competencia es enorme.

Por ello cada día se desarrollan nuevas formas de ofrecer contenido al usuario mobile. Las aplicaciones nativas parecen dominar en ese sentido, pero al parecer las PWA podrían poner eso en discusión debido a los múltiples beneficios de estas.

¿No sabes qué es una PWA? Pues ahora mismo te enseñaremos todo lo que debes saber sobre ellas; desde su definición hasta su funcionamiento y cómo hacer una para tu empresa o negocio, ya que son una poderosa herramienta de marketing.

¿Qué es una PWA (Aplicación Web Progresiva) y para qué sirve?

Una aplicación web progresiva o PWA, es una pagina web programada en HTML5 o CSS que se comportan tal cual como una aplicación móvil nativa, lo cual optimiza al máximo la experiencia al ofrecer una mayor velocidad para ofrecer el contenido. En este sentido se parecen mucho a una aplicación web normal, pero esta tiene la particularidad de que puede ser instalada en el navegador, además de otras características mucho más potentes.

Visto de este modo, se podría decir que una PWA es una evolución de la aplicación web que conocemos hasta ahora en servicios como web.telegram.org, que te permite utilizar una interfaz similar a la app nativa pero desde tu navegador. Las apps progresivas también pueden ser alojadas en un dominio web y ser leídas desde cualquier navegador, pero puede ser instalada en este, como si de una extensión del mismo se tratase.

Historia de las PWA, ¿Cómo llegamos hasta ellas?

En 2013 se confirmó lo que muchos había presagiado y los usuarios mobile ya superaban abiertamente a los de escritorio. Esto pasó en gran medida por culpa de las aplicaciones nativas, que te daban todo y mucho más que una web. Las ventajas eran evidentes entre una y otra, por lo que los desarrolladores comenzaron a idear maneras para hacer que esa brecha se hiciera mas corta.

En principio aparecieron las aplicaciones web, que eran páginas escritas en HTML y PHP que se comportaban de manera similar a una app nativa, pero seguía teniendo las limitaciones de una web normal; dependencia de internet, almacenamiento externo y un largo etcétera. Sin embargo, la gran cantidad de funciones que adaptaron y el hecho de ser compeltamente responsivas llamó mucho la atención.

Ahora, finalizando la segunda década del siglo XXI, nacen las PWA, que son una evolución significativa a las apps webs, ya que tienen todas sus fortalezas y muy pocas debilidades, siendo lo más similar a una aplicación nativa que se puede tener en un navegador desde cualquier dispositivo.

¿Cuáles son las diferencias entre una PWA, una aplicación web y una app nativa? ¿Cuál es mejor?

Para entender este punto debemos recapitular. Una aplicación nativa es aquella que puede ser instalada en el móvil, la app web es aquella que se aloja en un dominio y la app progresiva es la que puede ser instalada en el navegador. Estos tres conceptos parecen muy similares, pero son más profundos de lo que creen:

Conexión a internet

La principal y más clara diferencia entre una app nativa y una aplicación web es que la primera puede ejecutarse perfectamente sin conexión a internet, mientras que la segunda la necesita pues sus datos se alojan en un dominio externo. Esta también es una constante cuando la comparamos con una app progresiva, la cual también puede ser ejecutada offline.

Almacenamiento

La segunda diferencia clara entre una app nativa y una web es el alojamiento de los datos que la conforman. La primera de ellas se aloja en el almacenamiento interno del móvil, lo que permite que no se necesite nada de internet para ponerla a funcionar ya que solo hay que ejecutarla. Mientras que la segunda se almacena en la nube, siendo necesaria la conexión a internet para poder ejecutarla.

Por su parte, la aplicación progresiva se almacena en la memoria caché, ya que es lo suficientemente ligera para ser cargada rápidamente desde esta, lo que las hace similares a las apps nativas.

Peso

Este es posiblemente el único apartado en el que pierda una app nativa, ya que pueden llegar a ser considerablemente más pesadas que las otras dos. Actualmente podemos encontrar juegos que pesan más de 1GB o herramientas profesionales de cientos de megas. Una app web es mucho más liviana, superando rara vez los 10MB, mientras que las progresivas en promedio ocupan 1MB.

Notificaciones Push

Las notificaciones push son aquellas que te envían tus aplicaciones para recordarte tareas pendientes o por ejecutar a pesar de que esta esté cerrada o en segundo plano. Estas son un factor muy importante en lo que respecta al retorno del usuario, por lo cual tienen un valor de marketing tremendo. Esta es una de las principales características de las aplicaciones nativas, que ahora también son adoptadas por las app progresivas, pero que lamentablemente no están disponibles siempre en las apps webs.

Velocidad de carga

Según el peso de una aplicación nativa, esta puede llegar a tardar hasta un minuto en abrir, aunque las más livianas generalmente lo hacen en 20 segundos aproximadamente. Las apps webs dependen principalmente de la velocidad de internet, pero si tienes una buena conexión estarán listas en 10 segundos aproximadamente. Las apps progresivas al ocupar tan poco espacio estarán cargadas en un par de segundos.

Potencia

Actualmente una app mobile puede llegar a ser casi tan potente como un software profesional, de modo que en ese sentido sigue sin tener rival. Tanto las aplicaciones webs como las progresivas son muy limitadas en ese sentido, por lo que no se puede esperar de ellas funciones tan potentes.

Multiplataforma

Una app nativa es el equivalente a un programa de ordenador pero instalado en un móvil. Esto hace que esté limitado a la plataforma en la que se ha instalado, y no puedas luego volver a cargar la app en otro dispositivo sin antes instalarla. Esto no pasa con las apps webs y las aplicaciones progresivas, ya que estas pueden ser multiplataforma con solo cargarlas en un navegador u otro sin problemas.

¿Qué características únicas hacen a las aplicaciones web progresivas tan potentes?

Ya conoces bien en qué se diferencia una aplicación progresiva de las demás que se usan actualmente. Pero estas no son todas las sorpresas, hay ciertas características únicas que hacen que estas apps superen con holgura a las aplicaciones webs convencionales.

Service Worker

También conocido como el programador de servicio, es un elemento programático muy simple que permite guardar y acceder a recursos en el caché. Este concepto básico es muy importante en el funcionamiento de una web progresiva, ya que este es el que permite que pueda hacer cosas como ser ejecutada sin conexión, y poder registrar acciones mientras se está offline para que luego sean cargadas cuando se disponga de internet.

Progreso

Se les llama progresivas porque estas pueden ir creciendo a medida de que lo hagan los navegadores. Es decir, que mientras se hagan navegadores más potentes se podrán crear PWAs que también lo sean. De hecho, se ha especulado que este sería el futuro de los juegos MMORPG, permitiendo que puedan ser jugados sin conexión desde el navegador con todos sus recursos.

Conclusión

Una app progresiva y una nativa sin dudas son mejor que una aplicación web, las diferencias han quedado evidentes en los puntos anteriores. Sin embargo, cuando las comparamos entre ellas nos encontramos con un serio conflicto en el que siguen estando por encima las apps nativas.

¿Por qué es mejor contar con PWAs que con otras aplicaciones? ¿Son realmente el futuro de la web?

Sin dudas una aplicación responsiva es sumamente provechosa y es más que probable que en un futuro no muy lejano veamos que son cada vez más potentes. Es muy probable que estas sustituyan a muchos modelos de webs como las ecommerce o los medios digitales, pero seguirán habiendo webs en abundancia.

Lo que ese está buscando con la aplicación progresiva es crear webs que puedan ser tan potentes como una app nativa, de modo que la gran duda es si en algún momento podrían llegar a superarlas. Siendo esta una guerra muy fuerte por ver quién se queda con el trono en el apartado mobile.

Por ahora las PWA están recién naciendo, lo que les da un margen de mejora enorme, pero también un margen de incertidumbre, todo dependerá de hacia donde vaya el dinero.

El concepto de PWA es bastante simple, pero también con mucho potencial. Si nos imaginamos navegadores con cualidades de un sistema operativo que pueda ser utilizado para correr apps progresivas potentes, sin duda podemos llegar a ver cómo apps nativas son superadas en descargas por estas.

¿Cuáles son los beneficios de cambiar una app nativa por una progresiva?

Sus beneficios en relación a una app web son evidentes, así que decidimos compararla contra una app nativa que es su verdadero rival en el mercado global. A pesar de que aun está literalmente comenzando su camino, una app progresiva puede ser más ventajosa que una normal en varios sentidos.

Multiplataforma

El hecho de poder ser cargada literalmente en cuestión de segundos hace que puedas utilizarla en cualquier plataforma en la que te encuentres, sea un ordenador, una tablet o un Android. La app nativa por su parte debe ser instalada previamente, lo cual puede dificultarse si no cuentas con internet para descargarla de la tienda.

Actualizaciones instantáneas

Una de las cosas que más odiamos es cuando una app relativamente pesada debe ser actualizada, ya que además de consumirnos muchos datos del plan, puede llegar a tardar mucho. Una web progresiva es mucho mas práctica en ese sentido, pues sus actualizaciones son mas rápidas pues su peso es extremadamente liviano, lo que literalmente permiten que las llamemos actualizaciones exprés.

Posicionamiento SEO

Este es otro factor importante desde el punto de vista del desarrollador. Una app progresiva puede ser alojada en un dominio, y por lo tanto posicionada como si de una website se tratase, pero al entrar en ella el usuario se topará con un ecosistema similar al de una aplicación nativa.

¿Cómo funciona una PWA? Componentes de una aplicación progresiva

¿Estás pensando en crear tu propia PWA? Pues te sorprenderá que no es tan difícil como podrías imaginártelo. En líneas generales, se utilizan los mismos lenguajes que para programar una página web, aunque una app progresiva se estructura de manera diferente. Si estás pensando hacer tu propia aplicación web progresiva debes saber que estas se componen de los siguientes elementos.

Manifiesto de la app web

El manifiesto es un archivo JSON que contiene toda la meta información sobre la app, que vendría siendo el nombre, el color del tema, el color del fondo, el icono y otros aspectos muy básicos. Este vendría siendo el equivalente a un encabezado de una página web normal, pero en un archivo independiente.

Service Worker

Este es quizá el componente más importante. Como te mencionamos antes estos son un aspecto programático que ofrece soluciones para el intercambio de información entre la red y el caché del navegador, que es dónde esta será almacenada. Además, estos también registran información para que sea cargada cuando haya conexión, lo que permite que la app sea ejecutada sin internet fácilmente.

Icono

El icono no es más que la imagen que identificará a tu aplicación de las demás aplicaciones webs que hay en el mercado, será su distintivo por ello debes escoger uno diseñado por ti mismo.

HTPPS

Por último, será necesario contar con un servidor seguro con su correspondiente sertificado SSL que garantice la privacidad y seguridad de los clientes. Los navegadores jamás ejecutarán una PWA que sea alojada en un HTPP como muchas webs actualmente. Lo más importante de una app progresiva es su seguridad, y los navegadores velarán por ella.

Lista de las 10 mejores aplicaciones webs progresivas creadas hasta ahora

Bueno, ya sabes mucho más de lo que cualquier mortal sabe sobre las aplicaciones progresivas, pero te estarás preguntando: ¿dónde puedo conseguir una? Pues la verdad es que es muy probable que ya hayas utilizado alguna y ni cuenta te hayas dado. A continuación te vamos a presentar cuales son las 10 mejores aplicaciones progresivas desarrolladas hasta ahora:

Instagram.com

Así es, la web de instagram es una PWA que lleva varios años funcionando perfectamente. Anteriormente no podías utilizar tu cuenta fuera de un teléfono móvil, pero eso cambió hace un tiempo y con esta web progresiva es posible revisar tu perfil desde el navegador. Eso sí, esta versión es mucho más limitada ya que desde ella no se pueden compartir fotos ni vídeos, así como también están limitadas muchas funciones para interactuar en las historias.

Forbes.com

La web de Forbes es también una aplicación progresiva muy bien realizada que permite que sus usuarios puedan entrar a la web sin conexión. Sin embargo, al ser un medio digital que se actualiza constantemente, cuando entres sin conexión solo podrás ver la última versión de la app que haya sido cargada, de modo que si desde entonces han habido nuevas noticias estas no se visualizarán hasta conectarte.

Mobile.Twitter

Hace un par de años la red social del pajarito lanzó Twitter Lite, la cual era una PWA pero instalable directamente en el móvil. Ahora está mobile. Twitter que sí es una aplicación progresiva en toda la regla y te permite perfectamente ingresar con tu navegador sin conexión a internet. En poco más de un año han duplicado su Dwell Time (tiempo de permanencia) y los usuarios reportan una mejoría en su experiencia bastante notable.

Sigue a Papá Noel de Google

Si pensabas que los juegos no tienen cabida en el mundo de las PWA estabas equivocado. Google ha desarrollado este divertido juego al que puedes ingresar desde tu navegador. Es estilo arcade, muy básico, pero es bastante divertido y tiene muchos niveles. También realizan eventos en navidad para que sigas en vivo la ruta que hace Santa para repartir los juguetes por todo el mundo. Puedes acceder desde aquí.

Dino Game

Esta es posiblemente la app progresiva más antigua de la historia. Se trata del juego del dinosaurio que Google Chrome te muestra cuando tratas de cargar una web sin conexión a internet. Es muy simple ya que solo debes utilizar el teclado para saltar los obstáculos que se te presentan, pero para nadie es un secreto lo adictivo que puede llegar a ser este juego.

Uber

El servicio de taxis de moda cuenta con una de las mejores aplicaciones progresivas que puedes encontrar en ninguna parte. Con ella podrás buscar y contratar un servicio de taxi tal como lo haces en la app nativa, además de poder calificar a tu servidor, cotizar el precio del servicio y mucho más. En líneas generales es una de las apps más completas de esta lista.

Flipboard

Esta es una app similar a la que ofrece Forbes ya que también es utilizada para ver noticias que pasan en todo el mundo, pudiendo acceder a ellas sin problemas sin conexión a internet siempre que estén cargadas al 100%. No hay mucho más que decir de ella más allá de poder realizar comentarios y calificar las noticias para compartirlas en tus redes sociales.

PadPiper

Esta es una excelente aplicación progresiva que permite a los estudiantes buscar inmuebles en cualquier país del mundo en el que vayan a realizar sus estudios. De modo que mientras esperas la llegada de Airbnb en tu país, es buena idea utilizar esta sin conexión a internet para ubicar el piso ideal para ti.

Yhimsical

Esta es una aplicación muy interesante ya que desde ella podrás acceder a contenido de plataformas como YouTube o Vimeo para reproducirlo desde ella, es muy sencillo de utilizar ya que solo pones el nombre del tema que quieres escuchar y listo. Es un reproductor de audio bastante versátil que te muestra también una miniatura del vídeo.

Convertidor de moneda (Currency-calc.com)

Esta es otra PWA que utiliza un concepto bastante simple para facilitar el acceso al mismo. Se trata de un sencillo convertidor de divisas que podrás utilizar para saber el valor de tu moneda local en todas las de los demás países fácil y rápido. Puedes utilizarlo sin problemas sin internet.