Tu negocio y las PWA
La tecnología da pasos de gigante cada día y en el universo de la computación el desarrollo del hardware y el software avanzan hora tras hora. Uno de los grandes hitos de la telefonía inteligente es, sin duda alguna, el lanzamiento en 2007 del primer teléfono inteligente de Apple que contaba además con un sistema operativo propio. Los de cupertino declararon que se podrían hacer aplicaciones para dicha plataforma a través de HTML5 y AJAX. Sin embargo, su pobre desempeño, su lentitud al cargar y su falta de acceso a funcionalidades del dispositivo llevaron a los amigos de la manzana a cambiar de idea. Esto llevó al desarrollo del App Store con su kit de aplicaciones para IOS, presentados al público en 2008 (Ritchie, 2020).
Años después Mozilla presentó el sistema operativo Firefox OS, diseñado para dispositivos móviles de gama media y baja, que se comercializarían en países como Brasil, Colombia, Venezuela, Polonia, España, entre otros. A pesar de los esfuerzos realizados para hacerse un espacio entre Android y iOS, el proyecto terminó cerrando sus puertas en 2015 y su soporte en 2016.
Mientras que Firefox OS desaparecía, Frances Berriman y Alex Russell, el primero diseñador web y el segundo ingeniero de google Chrome, fueron los primeros en acuñar el término Progressive Web App (PWA), en español Aplicaciones Web Progresivas, y describir las características necesarias para considerarse en esta categoría (Russell, 2020).
¿Qué es una PWA?
PWA es la sigla utilizada para Progressive Web App, o Aplicaciones Web Progresivas, y que se definen, a su vez, como aplicaciones entregadas al usuario a través de la Web construidas en HTML, CSS y Javascript. Gracias a esto, es posible usarlas en cualquier navegador web moderno sin importar el sistema operativo (Wikipedia, 2020).
¿Qué otros tipos de Apps existen?
Junto a las Progressive Web Apps, podemos encontrar los siguientes tipos de aplicaciones:
Apps nativas: Son software desarrollados para ser ejecutados en una plataforma o dispositivo en particular. Por ejemplo, una aplicación nativa para Android está escrita en Java y sólo puede ejecutarse en dicho sistema operativo.
Apps híbridas: Son software desarrollado para ser ejecutado en una plataforma específica pero que fue escrito en tecnologías web: HTML5, CSS y Javascript. Funciona dentro de un contenedor, para que se pueda instalar y descargar igual que las Apps nativas; siendo esta la principal diferencia con respecto a las PWA, que no usan esta clase de encapsulamiento para su distribución.
Características de una PWA
Responsiva. Para que pueda adaptarse a cualquier dispositivo sin importar las dimensiones de su pantalla.
Fuente: https://i.pinimg.com/originals/e8/d8/3e/e8d83e14bb6d1874f85d36213b1dac40.gif
Conectividad independiente. Puede trabajar de igual forma sin importar si hay o no conexión a internet.
Fuente: https://media.giphy.com/media/UuTIijN6ih5kzV9nNI/source.gif
Interacción como las aplicaciones nativas. El usuario la percibe como si se tratara de una aplicación nativa.
Fuente: https://mir-s3-cdn-cf.behance.net/project_modules/disp/3f61ec27118125.5636032dd67b0.gif
Fresca. Es capaz de mantenerse actualizada a través del uso de service workers¹.
Fuente: https://media.tenor.com/images/8dec4e6273538a1023d6d9159793e973/tenor.gif
Segura. Al ser servida mediante protocolo TSL previniendo el “Snooping” ².
Descubrible. Los motores de búsqueda le encuentran fácilmente, gracias al registro de Service Workers y al manifiesto de Aplicación.
Fuente: https://thumbs.gfycat.com/BlaringGaseousEsok-small.gif
Reenganchable. Es capaz de traer de vuelta al usuario a la aplicación con el fin informarle que está sucediendo algo; por ejemplo, mediante notificaciones push disponibles tanto en aplicaciones nativas como en sitios web.
Fuente: https://miro.medium.com/max/1600/1*owlBDVZVDHiEi8pqAklWXQ.gif
Instalable. Genera las indicaciones necesarias en el navegador para instalarse en el dispositivo, mientras se está usando la aplicación, y así el usuario pueda obtener sus aplicaciones favoritas sin necesidad de desplazarse a una tienda de aplicaciones.
Fuente: https://thumbs.gfycat.com/ActualInformalFurseal-small.gif
Enlazable. Mediante una URL se da la oportunidad de que esta pueda ser compartida más fácilmente.
PWA vs Apps Híbridas vs Apps Nativas
Con el fin de comparar los tres tipos de Apps mencionados anteriormente, vale la pena detenerse a mirar cinco aspectos fundamentales.
Parametros |
PWA | Apps Híbridas | Apps Nativas |
Reusabilidad del código | Alta | Alta | Baja |
Reusabilidad de conocimiento | Alta | Alta | Baja |
Librerías de terceros | Alta | Moderada | Alta |
Desempeño | Baja | Moderada | Alta |
Uso de características nativas del dispositivo | Baja | Moderada | Alta |
La anterior tabla nos ayudará a decidir qué tipo de aplicación necesitamos en función de diversos factores.
Habitualmente la reusabilidad del código hace referencia a la cantidad de veces que debo escribir el código para una aplicación. Por ejemplo, si debemos crear una aplicación para iOS y Android sería costoso programar para cada sistema operativo dado que se requiere escribir un código para cada lenguaje de programación según el sistema.
El parámetro de la reusabilidad de conocimiento es similar al anterior, pues el programador debe conocer dos lenguajes de programación totalmente diferentes para cada sistema operativo.
En cuanto a las librerías de terceros, estas permitirán saber si el programador tendrá o no a su disposición herramientas que le permitan afrontar retos al momento de programar. Un ejemplo de ello es cuando una aplicación requiere el uso de la localización del usuario, esta debería poder hacerse de forma fácil y efectiva.
En el desempeño se tiene en cuenta el rendimiento en función de la complejidad de la aplicación y los recursos que pueda consumir. Esto no quiere decir que todas las PWA sean deficientes al tener un bajo rendimiento; por el contrario, si la App es sencilla puede cumplir a cabalidad con su objetivo sin afectar negativamente la experiencia del usuario; pero si se trata de un App más compleja, como un juego, lo más conveniente será usar una tecnología que permita mayor rendimiento sobre el dispositivo.
Finalmente, en cuanto al uso de características nativas del sistema operativo o de partes del hardware siempre será mejor hacerlo desde una tecnología que pueda proveer dichas herramientas.
Entonces ¿Por qué podrías necesitar una PWA para tu negocio?
Casos de PWA reconocidos en la industria
Uber: https://m.uber.com
Starbucks: https://www.starbucks.com/menu
Flipboard: https://flipboard.com
Tinder: https://tinder.com
Finalizando
No hay aplicaciones buenas o malas, lo importante es reconocer cuál de los sistemas disponibles es el adecuado para un proyecto. Antes de iniciar con el desarrollo de una aplicación vale la pena detenerse a pensar en variables como Estabilidad, presupuesto, mantenibilidad y desempeño. Esto le ayudará a tomar una buena decisión. Recuerda que en asuntos de tecnología la curiosidad puede llevarnos a encontrar las mejores soluciones para un negocio. De igual forma, esta es una invitación a explorar las diferentes soluciones tecnológicas que podemos encontrar al momento de buscar una solución para su negocio, teniendo en cuenta la velocidad con la que avanzan las tecnologías, especialmente las tecnologías web.
Los invitamos, desde Castor, a que tengas en cuenta esta tecnología a la hora de buscar una solución para tu negocio. ¿Quieres que te ayudemos? Escríbenos
Artículo escrito por Álvaro Felipe García Méndez en colaboración con Fabio Oquendo, Claudia Ortíz y Silvia Luz Gutiérrez.
¹ “Es una secuencia de comandos que tu navegador ejecuta en segundo plano, separado de una página web, abriéndoles la puerta a funciones que no necesitan una página web ni interacción de usuario” (Gaunt, 2020).
² Acto de monitorear un remotamente la actividad de un computador o de un dispositivo de red (Rouse, 2020).
Referencias
- Wikipedia. (2020, August 5). Progressive web application – Wikipedia. Retrieved from Wikipedia: https://en.wikipedia.org/wiki/Progressive_web_application
- Ritchie, R. (2020, August 5). App Store Year Zero: Unsweet web apps and unsigned code drove iPhone to an SDK | iMore. Retrieved from iMore: https://www.imore.com/history-app-store-year-zero
- Russell, A. (2020, August 9). Infrequently Noted. Retrieved from Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
- Gaunt, M. (2020, Agosto 21). Introducción a los service workers | Web Fundamentals. Retrieved from Web | Google Developers: https://developers.google.com/web/fundamentals/primers/service-workers
- Rouse, M. (2020, Agosto 21). What is snooping? – Definition from WhatIs.com. Retrieved from SearchSecurity: https://searchsecurity.techtarget.com/definition/snooping
Mantente al tanto de nuestras publicaciones a través de nuestras redes sociales: LinkedIn, Instagram y Twitter.