AndroidBridge 사용 및 테스트하는 법[Kotlin]

AndroidBridge는 웹에서 JavaScript로 Android의 함수를 호출할 수 있도록 도와주는 기능이다.

 

AndroidBridge를 사용하기 위해서 webView를 다음과 같이 세팅해준다.

override fun onCreate() {
	val webView = findViewById<WebView>(R.id.main_web_view)
	webView.setting.javaScriptEnabled = true
	webView.addJavascriptInterface(/*BridgeClass명*/, /*호출에 사용할 고유 이름*/)
}

이 예제에서는 BridgeClass명은 AndroidBridge, 호출에 사용할 고유이름은 Bridge로 할 것이다.

위의 addJavascriptInterface는 다음과 같이 된다.

webView.addJavascriptInterface(bridge, "AndroidBridge")

 

클래스를 하나 만든다.

나는 AndroidBridge라는 이름의 클래스를 만들었다.

class AndroidBridge {

}

이 안에 javaScript에서 필요 시 호출할 함수를 만들어준다.

함수에는 반드시 @JavascriptInterface 어노테이션이 붙어있어야한다.

나는 예시로 makeToast라는 함수를 만들었다.

class AndroidBridge {

	@JavascriptInterface
	fun makeToast(msg: String) {

	}
}

이 함수는 외부에서(Web에서) 사용하는 함수이기때문에 IDE 상에는 사용하지 않는 함수로 인식될 것이다.

함수명이 회색이 되어도 걱정할 필요 없다.

 

안드로이드가 갖고있는 이 함수를 자바스크립트에서는 필요한 때에 다음과 같이 호출해서 사용할 것이다.

window.Bridge.makeToast('토스트를 띄웁니다.')

Javascript에서 위의 함수를 호출하면 안드로이드의 makeToast함수가 동작하는것이다.

이제 makeToast 함수를 완성해보자.

 

먼저 전달받은 msg값을 webView가 있는 Activitiy에 전달해주기 위해 interface를 만들어서 msg를 담아보자.

class AndroidBridge {

    private var callback: BridgeListener? = null

    fun setListener(listener: BridgeListener) {
        callback = listener
    }
    
    @JavascriptInterface
	fun makeToast(msg: String) {
	    callback?.showToast(msg)
	}
    
    interface BridgeListener {
    	fun showToast(msg: String)
    }
}

Activity는 대략 이런 모습이 된다.

class MainActivity : AppCompatActivity(), AndroidBridge.BridgeListener {

	private val bridge = AndroidBridge()
	
	override fun onCreate() {
		val webView = findViewById<WebView>(R.id.main_web_view)
        
		webView.setting.javaScriptEnabled = true
		webView.addJavascriptInterface(bridge, "AndroidBridge")
        
		bridge.setListener(this)
	}

	--생략--

	override fun showToast(msg: String) {
		Toast.makeText(this, msg, Toast.LENGTH_SHORT).show()
	}
}

 

Bridge세팅은 끝났다. 이제 웹에서 이 함수를 호출했을 때 잘 작동하는지 확인해보자.

 

일단 테스트를 위해 네이버 페이지를 띄워놓았다.

loadUrl("https://www.naver.com")

크롬을 실행해서 chrome://inspect를 입력한뒤 이동한다.

그러면 하단에 아래처럼 현재 연결된 웹뷰를 볼 수 있다.

inspect를 눌러 보면 다음과 같은 화면을 볼 수 있다.

 

콘솔창에 다음 함수를 작성해 실행해보자.

window.AndroidBridge.makeToast('토스트를 띄웁니다.')

정상적으로 호출돼 작동하는 모습이다.