Embediendo aplicaciones HTML5 dentro de aplicaciones nativas Android

28-08-2014
 

Una aplicación HTML5 nunca va a tener el mismo rendimiento, ni usabilidad, ni podrá hacer uso de los recursos del dispositivo(teléfono,tablet, TV, reloj, wareables, etc.) igual de bien que una aplicación nativa. Pero una aplicación HTML5 también tiene sus pros, por ejemplo, es mucho menos costoso de mantener, el desarrollo es mucho mas rápido o el mismo desarrollo se puede re-aprovechar para distintos dispositivos. Entonces, en ocasiones(por ejemplo, aplicaciones que hacen poco uso de los recursos del dispositivos, no tienen una UI muy compleja, etc.), la app HTML5 puede ser la mejor solución.

Para embedir una aplicación HTML5 lo hacemos mediante el componente WebView siguiendo estas instrucciones:

En el fichero AndroidManifest.xml añadimos el permiso para conectar a Internet:

	...
	<uses-permission android:name="android.permission.INTERNET" />
	...

En el mismo fichero manifest configuramos la activity con los siguientes parámetros para que no aparezca la barra superior típica de las aplicaciones Android y para que no recargue la página cuando gires el dispositivo(Que es muy molesto).

      <activity
            android:name=".AlbertCoronadoActivity"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.Black.NoTitleBar"
            android:configChanges="keyboardHidden|orientation|screenSize"
            >

En nuestro layout principal de la aplicación insertamos el componente haciendo que ocupe toda la pantalla

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    android:paddingBottom="0dp"
    tools:context=".AlbertCoronadoActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

</RelativeLayout>

Creamos nuestra propia página html de error, en mi caso, la llamo ‘error.html’ y la guardo en la carpeta ‘assets’ (No pongo el código, pero es un simple mensaje de error personalizado).

Finalmente, en el método ‘onCreate’ configuramos el componente WebView para que cargue nuestra página, no guarde cache(Para que cuando actualicemos no tengamos problemas) y además abra las URL externas de nuestra aplicación mediante el navegador del teléfono(así es mas elegante).

        webview = (WebView) findViewById(R.id.webview);

        webview.setWebChromeClient(new WebChromeClient());

        WebSettings s = webview.getSettings();
        s.setJavaScriptEnabled(true);

        webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if(url.contains("javascript:") || url.contains("app.albertcoronado.com")) {
                    view.loadUrl(url);
                } else {
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                    view.getContext().startActivity(i);
                }
                return true;
            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                webview.loadUrl("file:///android_asset/error.html");
                }
            });

        webview.clearHistory();
        webview.clearFormData();
        webview.clearCache(true);
        webview.loadUrl("http://app.albertcoronado.com");

Conclusiones

El componente WebView tiene un montón de posibilidades de integración entre el contenidos web y la aplicación nativa Android como: posibilidad de interceptar la carga de URL, capturar errores, etc.

En la siguiente captura podéis ver el resultado de una aplicación HTML5 corriendo embedida dentro de una aplicación nativa Android:

HTML5 app embedded Android

HTML5 app embedded Android

Leave a Reply

© Albert Coronado Calzada