Android ve Web Sayfası Arasında Veri Aktarımı

Merhaba, bu yazıda sizlere Android uygulamasından açılan WebView’e veri yollamaktan ve almaktan bahsedeceğim.

Örnek bir senaryo ile veri nasıl alınır ve yollanır inceleyelim.

Ön Adım, WebView’den belirtilen url’i açma

 webView.webViewClient = WebViewClient()
 webView.settings.defaultTextEncodingName = "utf-8"
 webView.loadUrl("url")

1- Android App’den WebView’e veri yollama

WebView’de açılan sayfaya parametre yollamak için aşağdaki gibi kod yazılabilir.

val value = "Test"
webView.evaluateJavascript("doSomething(\""+ value + "\")",
                    ValueCallback<String?> { s ->

                    })

WebView’deki doSomething JS fonksiyonuna value değerini yollayarak client üzerinden çalıştırmış olduk.

2- WebView’den Android App’e veri yollama

WebView’den veri almak için ve Client’a veri iletmesini sağlayacak bir interface oluşturmalıyız.

    class WebAppInterface() {
        @JavascriptInterface
        fun passValue(data: String?) {
            activity?.let {
                it.runOnUiThread {
                    //Do Something with data
                }
            }
        }
    }

Oluşturulan interface WebView’e aşağıdaki gibi eklenir.

webView.addJavascriptInterface(
                WebAppInterface(),
                "Android"
            )

WebView’e eklenen interface’i tetiklemek için WebView sayfasındaki JS fonksiyonu aşağıdaki gibi olmalıdır.

function sendMessageToAndroid() {
   var data=  document.getElementById("inputField").value;
      Android.passValue(data);
  }

WebView’de açılan Web Sayfasındaki sendMessageToAndroid() JS fonksiyonu ile Android’de yazmış olduğumuz passValue fonksiyonu tetiklenir. Bu şekilde WebView’deki değeri Android Client’ına taşımış oluruz.

Tebrikler artık WebView’in kontrolü tamamen sizin elinizde :)

Ekstra not: Android’de WebView’i açarken WebView.setWebContentsDebuggingEnabled(true) tanımlasını yaparak Web Sayfasına veri yolladığınızda verinin gelip gelmediğini tarayıcı üzerinden(chrome://inspect#devices) debug edip görebilirsiniz.