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.
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:
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:
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.
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.
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.