JavascriptInterface란.

두리두두·2024년 5월 25일

안드로이드

Android

목록 보기

19/25

오늘은 웹뷰와 앱 간의 통신을 가능하게 해주는 JavascriptInterface에 대해 공부해보겠다.
안드로이드 컴포넌트 공부 중이다가 갑자기. 하는 이유는 이번에 맡은 업무에서 사용하게 되어서;; 주말에 벼락치기를 해야 다음주에 업체에 메일을 보낼 수 있다,,

〽️ JavascriptInterface?

앱에서 웹뷰를 사용할 때 앱과 웹 간의 통신을 위해 사용하는 인터페이스
앱 코드와 자바스크립트 인터페이스 간의 소통

〽️ 사용법

사용하고자 하는 웹뷰에 브릿지 클래스(AndoidBridge)를 연결한다.

webView.addJavascriptInterface(new AndroidBridge(), "TestApi");

TestApi는 웹에서 호출할 이름으로 쓰일 것 (window.TestApi.postMessage("data"))
브릿지 클래스에 @JavascriptInterface 로 사용할 메소드를 정의해준다.

private class AndroidBridge {
    public AndroidBridge() {
        // TODO Auto-generated constructor stub

    }
    @JavascriptInterface
    public void postMessage(String id) {
    	// 웹으로부터 전달받은 String 값 id
    }
}

〽️ 예제

[1] 웹뷰 생성

onCreate() 설정

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        val webview = binding.webview
        webview.settings.javaScriptEnabled = true
        webview.loadUrl("file:///android_asset/sample.html")
        webview.addJavascriptInterface(WebInterface(this), "TestApi")
    }

TestApi라는 이름으로 브릿지를 만들었다.

[2] 웹뷰 <-> 앱 통신

class WebInterface(private val mContext: Context) {
        // 웹뷰 -> 앱으로 데이터 전달
        @JavascriptInterface
        fun showToast(toast: String){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
        }

        // 앱 -> 웹뷰로 데이터 전달
        @JavascriptInterface
        fun getJsonData(): String {
            // JSON 데이터를 문자열로 반환
            return createJsonData().toString()
        }

        private fun createJsonData(): Any {
            val jsonObject = JSONObject()
            jsonObject.put("종목코드", "종목명")
            jsonObject.put("종목코드", "현재가")
            jsonObject.put("종목코드", "등락율")
            return jsonObject
        }
    }

[3] sample.html

res와 같은 폴더 위치에 assets 폴더를 만들면 "file:///android_asset/~ 의 경로로 바로 이용할 수 있다.
버튼이 두 개가 있고 웹뷰 ->앱을 누르면 showAndroidTest가 호출되며 네이티브에 정의되어있는 TestApi의 showToast가 호출된다.
앱->웹뷰를 누르면 네이티브에 정의되어있는 getJsonData()가 호출되고, json 데이터를 돌려받는다. 이걸 자바스크립트에 정의되어있는 displayJsonData() 함수에서 파싱하여 보여준다.

<input type="button" value="웹뷰->앱" onClick="showAndroidToast('html에서 설정한 String이오.')"/>
<input type="button" value="앱->웹뷰" onClick="showJson()"/>

<div id="jsonDisplay">
    <h2>Received JSON Data:</h2>
    <pre id="jsonData"></pre>
</div>
<script type="text/javascript">
    function showAndroidToast(toast) {
        TestApi.showToast(toast);
    }

</script>

<script type="text/javascript">
        // 안드로이드에서 받은 JSON 데이터 표시
        function displayJsonData(jsonData) {
            var jsonDisplayDiv = document.getElementById('jsonData');
            jsonDisplayDiv.innerText = JSON.stringify(jsonData, null, 2);
        }
</script>

<script>
    function showJson(){
        // 안드로이드로부터 JSON 데이터 받기
        var receivedJsonData = JSON.parse(TestApi.getJsonData());
        displayJsonData(receivedJsonData);
       }
</script>