Diseño Android: Interfaces web con WebView

VERSIONES

  1. 14/02/2013 (Primera publicación)
  2. 09/02/2014:
    • Añadida sección i18n

android

En el primer tutorial sobre el widget WebView, vimos que este componente encapsula el motor html/JavaScript WebKit , y cómo utilizarlo para implementar un sencillo navegador. En este tutorial se va a mostrar de forma muy simple cómo utilizar WebView para diseñar las interfaces gráficas (o algunas partes de ellas) de nuestras aplicaciones Android utilizando las tecnologías web soportadas por WebKit (HTML 5, JavaScript, CSS 3…) haciendo que estas interfaces puedan interactuar con nuestras Activities.

La principal ventaja de la utilización de tecnologías web para el desarrollo de aplicaciones móviles, conocidas como apps híbridas, es que permite a los programadores web la creación de apps sin necesitar apenas conocimientos de programación Android o incluso Java. Esto aumenta exponencialmente el número de programadores que pueden trabajar en la plataforma. Asimismo, otra gran ventaja es que este tipo de aplicaciones son relativamente fáciles de portar entre plataformas ya que las apps no son ejecutadas directamente por el SO sino por el componente WebView en Android o UIWebView en iOS por ejemplo y , gracias a Cordova, la integración de estas aplicaciones con las funcionalidades del SO resulta también independiente de la plataforma.

Sin embargo, el desarrollo de este tipo de apps tiene un precio: una gran pérdida de rendimiento debido a ejecutar la aplicación sobre un WebView y no de forma nativa. No obstante esta penalización es cada vez menor debido al imparable y rápido aumento de la potencia de los dispositivos móviles y, el menos en el caso de Android, la mejora del propio WebView a partir de Android 4.4 Kit Kat.

Seguir leyendo

Android WebView: incrustar un navegador en nuestras apps


VERSIONES

  1. 19/05/2012 (Primera publicación)
  2. 28/10/2012:
    • Añadida nota a la introducción sobre la versión de WebKit
    • Tratamiento de favicon (sólo en el código de GitHub)
  3. 06/12/2012:
    • Integración del favicon con el código de ejemplo del tutorial
    • Comprobación de conectividad (anteriormente incluído en los comentarios)
    • Solucionado el problema que no mostraba el teclado virtual en los input
    • Gestión de rotaciones
    • Launcher icon personalizado
  4. 16/02/2013:
    • Descargas asíncronas
    • Activación de plugins
    • Enlaces a los tips Android relacionados
  5. 17/11/2013:
    • Código revisado y probado con Android 4.3 y 4.4
    • Mejorado historial (sólo en demo de GitHub)
    • Añadida descripción de novedades de WebView en Android 4.4
    • Sólo se ofrece como código de ejemplo la demo completa en GitHub para facilitar el mantenimeinto y actualización del artículo.
  6. 13/09/2015:
    • Revisión general
    • Lollipop

NOTA

Este artículo explica la mayor parte de una demo más completa publicada en GitHub.


android

Android SDK proporciona un widget denominado WebView para renderizar páginas web, ya sea obteniéndolas través de una URL o bien recibiendo el html directamente desde una Activity.
WebView está basado en el proyecto Open Source WebKit, que incluye un motor de renderizado de html y un intérprete de javascript. WebKit es utilizado en numerosas aplicaciones y es la base de navegadores como Safari, ChromiunGoogle Chrome o Midori.

En este artículo se va a exponer de forma práctica cómo incrustar y utilizar en una app un navegador web; WebView, además de renderizar html, es muy potente y altamente configurable y proporciona numerosos métodos para controlar la navegación, gestionar cookies, procesar los errores, etc. El uso que veremos será básico y orientado a la navegación web pero este widget es la base de las aplicaciones híbridas basadas en tecnologías web (HTML5, JavaScript, CSS) y frameworks como Ionic que se ejecutan “dentro” de un WebView. Para una introducción a este uso del WebView (sin framework) consultar este tutorial.

Seguir leyendo