개요
안드로이드를 개발하다보면 웹뷰를 쓸 일 이 생긴다. 최대한 안드로이드 컴포넌트로 뷰(View)를 개발하면 좋겠지만, 안드로이드 컴포넌트로 뷰를 개발할 경우 유연성이 떨어지게 된다. 물론 안드로이드 컴포넌트로도 유연성 있게 개발을 할 수 있지만, 이미 작성된 코드 내에서의 유연성이 생길 뿐이다.
이에 따라 유연성이 필요한 곳에서는 웹뷰를 쓰는 곳이 많다. 웹뷰를 사용하기 위해서는 Android와 Webview간 통신 방법을 알아야 한다. 이번 글에서는 브릿지를 만드는 방법에 대해 알아보고자 한다.
브릿지란?
브릿지란 안드로이드와 웹뷰의 통신을 위해 만들어지는 Javascript용 인터페이스이다. 웹뷰에서는 안드로이드의 메서드를 직접 호출하는 것이 불가능하기 때문에 '브릿지'라는 통로를 통해 호출해야 한다. 브릿지는 웹뷰에 붙는 인터페이스의 구현체이며, 웹뷰는 객체의 메서드들을 인스턴스를 통해 호출 할 수 있다. 자 이제 브릿지를 만들어서 웹뷰와 통신을 시작해보도록 하자.
웹뷰 통신 테스트 준비하기
1. 브릿지객체 정의
브릿지 객체의 이름을 Native로 정의한다. 이 값은 아래에서 통신을 위한 객체의 이름으로 사용된다. JavaScript 객체는 싱글톤으로 생성되어 Native라는 객체는 싱글톤이다.
2. 테스트용 html 파일 생성
webviewexam.html을 아래와 같이 작성 후 assets 폴더에 넣는다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body style="background-color: white;">
<button type="button" onclick="clickA()">클릭해 보세요!</button>
<script>
function clickA() {
Native.showMessage();
}
</script>
</body>
</html>코드1. webviewexam.html
코드1 설명
- 버튼 선언 버튼 클릭 시 clickA 함수가 수행됨
- clickA 수행 시 Native.showMessage() 함수가 수행
JavaScript 브릿지 만들기
3. JavaScript 브릿지 선언
- @JavascriptInterface를 메서드 위에 주석으로 달면 메서드명으로 브릿지 함수가 선언된다.
- 아래 코드에서는 showMessage()가 브릿지 함수가 선언된다.
class JavascriptBridge() {
@JavascriptInterface
fun showMessage() {
System.out.println("Message Received")
}
}4. Webview에 Javascript 브릿지 설정하기
1) 웹뷰에서 Javascript 코드가 실행 가능 하도록 설정
settings.javaScriptEnabled = trueWebView에서 Javascript가 실행 가능하도록 설정해야 웹뷰에서 JS 코드를 실행할 수 있다.
javascript를 허용하는 코드를 넣으면 해당 웹뷰가 있는 메서드에 Warning이 뜬다. 이는 메서드가 속한 Activity나 Fragment 상단에 @SuppressLint("SetJavaScriptEnabled") 을 써서 해결할 수 있다.
@SuppressLint("SetJavaScriptEnabled")
class WebActivity : ComponentActivity() {
2) webview.addJavaScriptInterface(JavascriptBridge(), “[브릿지명]”)
addJavascriptInterface(
JavascriptBridge(),
"Native"
)[브릿지명]으로 JavascriptBridge() 클래스로 싱글턴 객체를 생성해 웹뷰와 연결시켜주어야 한다. [1. 브릿지객체 정의]에서 정의한 내용에 따라 Native라는 이름으로 싱글턴 객체를 생성한다.
전체 코드는 아래와 같다.
Surface(color = MaterialTheme.colors.background) {
Column {
AndroidView(
modifier = Modifier
.fillMaxWidth()
.height(300.dp),
factory = { context ->
WebView(context).apply {
settings.javaScriptEnabled = true
setBackgroundColor(Color.TRANSPARENT)
loadUrl("file:///android_asset/webviewdebug.html")
addJavascriptInterface(
JavascriptBridge(),
"Native"
)
}
}
)
}
}
브릿지 통해 메서드 실행하기
5. 안드로이드 실행 후 클릭해보세요 버튼을 클릭
버튼을 누르면 JavascriptBridge()내의 showMessage() 메서드가 수행되어서 Native.showMessage() 메서드가 수행된다. 따라서 “Message Received” 가 출력된다.
