Aplicaciones nativas que consumen webviews

Las aplicaciones móviles se han vuelto una parte integral de nuestra vida cotidiana, permitiéndonos cubrir gran parte de nuestras necesidades. Para lograr esto, muchas aplicaciones móviles hacen uso de “webviews” para mostrar su contenido.

¿Qué es un webview?

Un webview es un componente que permite visualizar contenido web dentro de una aplicación móvil. Se utiliza para integrar sitios web o aplicaciones web dentro de una aplicación nativa. Es un desarrollo que puede ser llevado a cabo por cualquier desarrollador web con conocimientos de HTML, CSS y JavaScript, y haciendo uso de una serie de eventos que permiten la comunicación entre el webview y la aplicación nativa. Sin embargo, aunque esto puede parecer una solución conveniente, no significa que sea la más correcta al momento de crear productos digitales.

A continuación, veremos algunas de las ventajas y desventajas importantes que deben ser consideradas:

Ventajas:

• Uno de los aspectos positivos a la hora de utilizar webviews en las aplicaciones nativas es que no tienen que pasar por las exhaustivas pruebas de los markets (AppStore, GooglePlay) cada vez que se quiera actualizar el contenido de estos webviews, evitando tener que generar nuevas versiones de la aplicación por pequeñas correcciones.
• Brindan una mayor flexibilidad y control sobre el contenido web, ya que los desarrolladores pueden personalizar la apariencia y la funcionalidad del contenido dentro de la aplicación.
• Mayor rapidez y eficiencia en el desarrollo de la aplicación. Al utilizar un webview, los desarrolladores pueden reutilizar código existente y evitar tener que escribir código específico para cada plataforma o sistema operativo, lo que disminuye el esfuerzo, y a su vez, produce una reducción en el coste.

Desventajas:

• Menor rendimiento: el uso de webviews puede afectar negativamente el rendimiento de la aplicación. Dado que al utilizar un componente de terceros para mostrar contenido web, es posible que la aplicación sea más lenta y menos fluida que si se utilizan tecnologías nativas.
• Limitaciones de funcionalidad: Los webviews pueden limitar la funcionalidad de la aplicación. Al no estar integrados de manera nativa con el sistema operativo del dispositivo donde se está utilizando, es posible que no se puedan acceder a todas las funciones, como la cámara, la agenda de contactos, los accesos por biometría como huella o FaceID, etc.
• Pueden ser más propensos a errores y problemas de seguridad que un navegador web externo, ya que están integrados directamente en la aplicación.

Pero... ¿Cómo comunicamos el contenido de un Webview con el código de Android?

En este punto, os mostramos un pequeño ejemplo de cómo integrar un webview que usa JavaScript al código de Android (Kotlin), y cómo es su comunicación.

El primer paso es agregar un componente Webview en el diseño, incluyendo el siguiente código:

De manera predeterminada, JavaScript está inhabilitado en la Webview. Hay que habilitarlo a través del objeto WebSettings adjunto a tu webview:

Ahora vinculamos el código JavaScript al código de Android

Se puede crear una interfaz entre el código de JavaScript y el código de Android. Por ejemplo, el código de JavaScript puede llamar a un método en tu código de Android para mostrar un Dialog en lugar de utilizar la función alert() de JavaScript.

En este ejemplo, la clase WebAppInterface permite que la página web cree un mensaje Toast mediante el método showToast().

Puedes vincular esta clase al código de JavaScript que se ejecuta en tu Webview con addJavascriptInterface() y asignar el nombre Android a la interfaz. Por ejemplo:

Así se crea una interfaz llamada Android para el código de JavaScript que se ejecuta en la Webview. En este punto, tu aplicación web tiene acceso a la clase WebAppInterface.

No es necesario inicializar la interfaz Android desde JavaScript. La Webview la pone automáticamente a disposición de tu página web. Entonces, cuando se hace clic en el botón, la función showAndroidToast() usa la interfaz Android para llamar al método WebAppInterface.showToast().

Y finalmente, está lista la comunicación entre el Webview y Android, y ya estamos preparados para utilizar la técnica poderosa que permite a los desarrolladores crear aplicaciones más complejas, dinámicas y customizables.

Diferencias entre una aplicación nativa que consume webviews y una Aplicación Híbrida

Debido a la alta versatilidad y compatibilidad de las tecnologías a menudo se pueden llegar a confundir unas con otras, por lo que en este punto es importante aclarar las diferencias que existen entre una aplicación híbrida y una aplicación nativa que usa un webview. Ambas son tipos de aplicaciones móviles que combinan tecnologías web y nativas. Sin embargo, existen algunas diferencias importantes entre ellas:

En definitiva, una aplicación Híbrida ofrece una experiencia más completa y personalizada que un Webview, pero requiere más tiempo y esfuerzo de desarrollo que crear una aplicación basada en webviews.

Hablando desde el punto de vista del negocio...

Finalmente, una vez expuestas las características técnicas del uso de este tipo de tecnologías, entra en juego la visión del equipo de negocio para colaborar en la toma de decisiones, aportando una visión más estratégica con el objetivo de garantizar el éxito comercial del proyecto.

El equipo debe evaluar cuidadosamente los pros y los contras de utilizar un webview en una aplicación móvil antes de tomar una decisión y tener presente como quieren que se posicione su producto en el mundo digital y cuál es la perspectiva que se desea tengan los usuarios sobre su producto digital.

¿Cuándo es conveniente utilizar webviews?

• Menor costo y tiempo de desarrollo: Desarrollar una aplicación móvil puede ser costoso y requiere tiempo, especialmente si se quiere que la aplicación sea compatible con varios sistemas operativos. Utilizar un webview para mostrar contenido dinámico o para integrar un sitio web en la aplicación puede ser una manera más rápida y económica de agregar funcionalidad a la aplicación.
• Reutilización de contenido: Si ya se tiene un sitio web existente que es compatible con dispositivos móviles, es posible utilizar un webview para integrar ese contenido en la aplicación móvil.

¿Cuándo no es conveniente utilizar webviews?

• Experiencia de usuario: La experiencia de usuario puede verse afectada negativamente si se utiliza un webview para integrar contenido en la aplicación móvil. Los webviews pueden tener una velocidad de carga más lenta y una funcionalidad limitada en comparación con el contenido nativo de la aplicación.
• Accesibilidad: Los webviews pueden tener problemas de accesibilidad, especialmente si el sitio web al que se accede no ha sido diseñado con accesibilidad en mente. Esto puede resultar en una experiencia de usuario pobre para personas con discapacidades.
• Seguridad: Las aplicaciones que utilizan webviews pueden ser más propensas a ataques cibernéticos y a la vulnerabilidad de la privacidad de los datos del usuario.
• Dificultad de mantenimiento: Puede ser difícil mantener y actualizar contenido integrado en un webview, lo que puede resultar en una experiencia de usuario desactualizada o poco atractiva.