Comunicacion entre android y javascript WebView

Muchas veces en un proyecto resulta que se necesita que salga a la luz en varias plataformas como por ejemplo en dispositivos android, ios, pero también este disponible para web, una de las formas de resolver esto sin tener que hacer un proyecto para cada plataforma es realizar el proyecto para web y crear el cascaron para android o ios. En ocasiones necesitamos que nuestra app android que contiene el proyecto web sea mas que un cascaron y que comunique información con android y viceversa, es por esto que hoy vamos a ver un ejemplo de comunicacion entre android y javascript mediante el uso de webview e interfaces javascript asociadas, te animas a aprenderlo?

Definiendo lo que aprenderemos..

Lo que haremos el dia de hoy es aprender a para informacion desde una pagina web vista desde un webview a una aplicacion android que ejecuta este webview, esto lo haremos con javascript e interfaces javascript en android.

Del lado de android

Una vez que tengamos nuestro webview

final WebView navegador2 = (WebView)findViewById(R.id.navegador2);

activamos javascript

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

navegador2.getSettings().setJavaScriptEnabled(true);

y declaramos una interfaz javascript

final Intermediario intermediario = new Intermediario(Navegador.this);
navegador2.addJavascriptInterface(intermediario, "Android");

que viene dada de la clase Intermediario que veremos mas adelante y un nombre asociativo con el que desde javascript podremos referirnos a android, en este caso «Android»..

podremos tener nuestro metodo onPageFinished para realizar alguna actividad al terminar de cargar nuestra pagina

navegador2.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);

}
});

y cargamos nuestra url

navegador2.loadUrl("http://nuestrowebsite.com/nuestrapagina");

La clase Intermediario es como sigue..

public class Intermediario {
Context mContext;

Intermediario(Context c) {
mContext = c;
}

@android.webkit.JavascriptInterface
public void PasoInformacion(final String token, final String username){
runOnUiThread(new Runnable() {
public void run() {
SharedPreferences settings = getSharedPreferences("com.jonathanmelgoza.comunicacionjavascriptandroid", 0);
SharedPreferences.Editor editor = settings.edit();

int num = MainActivity.cuentas.size();
editor.putString("com.jonathanmelgoza.comunicacionjavascriptandroid.user"+(num+1), username);
editor.putString("com.jonathanmelgoza.comunicacionjavascriptandroid.pass"+(num+1), token);

editor.commit();
}
});
}

@android.webkit.JavascriptInterface
public void regresarAlogin(){
android.os.Process.killProcess(android.os.Process.myPid());
System.exit(1);
}

}

Ahora para llamar una funcion javascript desde android simplemente utiliza el componente webview para ejecutarlo asi..

webview.loadUrl("javascript:funcion(\"" + argumento+ "\")");

y del lado de android eso es todo, ahora seguimos con nuestro codigo web en la pagina que leera el webview.

Del lado de javascript

Ahora para comunicar algo desde javascript es mucho mas facil con todo lo que ya hemos realizado hasta el momento, simplemente tenemos que llamar funciones android mediante el nombre asociativo que dimos a nuestra interfaz, en este caso Android..

// Codigo Javascript en nuestra pagina web
if(typeof Android != 'undefined'){
Android.regresarAlogin();
}

Primero nos aseguramos que este definida la interfaz Android, es decir que estemos ejecutando nuestra pagina web desde un webview, y despues gracias a nuestro nombre asociativo llamamos cualquier metodo en android, en este caso regresarAlogin.

Comunicacion entre android y javascript

Como vimos la comunicacion entre android y javascript es mas facil de lo que pensabamos y se vuelve una herramienta fundamental con el apogeo del desarrollo de aplicaciones moviles y sobre todo el hecho de no tener que realizar una aplicacion para cada sistema operativo (android, ios, blackberry,etc) sino simplemente crear una webapp y crear los cascarones correspondientes para cada sistema operativo.

Un enlace de mucho interes: Crear webapps con webview (en ingles)

¿Tienes algo que añadir al tema? Abajo tienes los comentarios abiertos para crear nuestra discusión..