[Kotlin]JavaScript < ㅡ > Native 통신

개발 환경

---------------------------------

OS : Mac

개발 툴 : Android Studio

개발 언어 : Kotlin

targetSdk : 31

minSdk : 23

---------------------------------

 

이번 포스팅에서는 android 프로젝트에서 Kotlin으로 JavaScript <-> Native 간 통신을 해보겠습니다.

간단히 그냥 서로 함수 호출을 해보는 작업입니다.

 

하이브리드 앱을 개발할 때 거의 필수로 사용되는데 이 기능을 구현할 줄 알면 많은 상황에 대응할 수 있습니다.

 

JavaScript -> Native 함수 호출하기

 

앱 셋팅

 

1. webView 셋팅 

   webView에서 셋팅할거는 한개밖에 없는데요!

   

   webView 셋팅하는 부분에 아래 코드를 추가합니다.

 

webViewBinding.webView.addJavascriptInterface(WebAppInterface(),"WebAppInterfaceBridge")

 

위에서 사용한 addJavascriptInterface는

 

addJavascriptInterface

addJavascriptInterface 개체는 iframe을 포함하여 웹 페이지의 모든 프레임에 주입되고 addJavascriptInterface 얘를

webView에 위 코드와 같이 셋팅해주면 JavaScript에서 WebAppInterface() 내부의 함수에 액세스할 수 있다 

이렇게 이해하면 될 것 같습니다.

 

그렇다면 addJavascriptInterface 개체의 매개변수 중 WebAppInterfaceTest() 뒤에 있는 저 String이 뭐냐면

JavaScript와 통신할 수 있는 bridge 역할을 합니다. 저 값은 아무거나 쓰셔도 됩니다. 

 

   webView를 셋팅하고 webViewActivity 안에 inner class 하나를 생성하겠습니다.

 

inner class WebAppInterface(){

 

class 명을 WebAppInterface로 설정했습니다. 

 

그리고 @JavaScriptInterface annotaion을 달아서 JavaScript 단에서 호출할 함수를 생성합니다.

@JavascriptInterface
fun WebAppInterfaceTest(param : String) {
    this@WebViewActivity.WebAppInterfaceTest(param)
}

 

그리고 위 소스 3line 보시면 WebViewActivity에서 WebAppInterfaceTest 함수를 호출합니다.

 

this@WebViewActivity.WebAppInterfaceTest(param)

 

앱에서 처리할 로직을 담을 함수를 하나 생성해서 안에서 이벤트 처리를 해주면 됩니다.

 

private fun WebAppInterfaceTest() {

}

 

JS셋팅

 

위처럼 앱에서 셋팅을 끝냈다면 javaScript단에서 호출하는건 간단합니다.

 

설정해둔 bridge를 입력하고 뒤에 함수명을 입력해주면 호출됩니다.

 

WebAppInterfaceBridge.WebAppInterfaceTest();

 

Native -> JavaScript 함수 호출하기

 

Native단에서 Javascript 함수를 호출하는거는 간단합니다.

 

아래 코드에서 콜론 뒤에 호출할 함수를 넣어주면 됩니다.

"javascript:"

 

JavaScript단에 WebAppInterfaceTest 함수가 있다는 가정하에 아래처럼 코딩해주면 됩니다. 

webViewBinding.webView.loadUrl("javascript:WebAppInterfaceTest()")

 

오늘은 android 프로젝트에서 JavaScript <-> Native 간 통신을 알아보았습니다 !