android
- WEB → APP
- (APP)웹에서 호출하기 위한 함수들을 하나의 클래스로 만듦
`class JSInterface(private val context: Context) {
@JavascriptInterface
fun showToast(message: String) {
...
}`
- (APP)만든 클래스를 webView에 연결
`webView.addJavascriptInterface(JSInterface(applicationContext), "interfaceName1")`
- (WEB)웹에서는 window.클래스명.함수명과 같은 방법으로 Native에 선언된 함수를 호출
`window.interfaceName1.showToast("Hello Android")`
- APP → WEB
- (WEB)네이티브에서 호출하기 위한 함수를 CustomEvent로 만들고 window.함수명으로 할당(콜백으로 웹에서 원하는 동작 실행할 수 있음)
`window.sayHello = new CustomEvent("NativeEvent");
const nativeEventCallback = (event) => {
alert(`event receive from Native`);
};
window.addEventListener("NativeEvent", nativeEventCallback);`
- (APP)webView가 제공하는 evaluateJavascript 함수로 아래와 같이 window.dispatchEvent로 웹에 생성한 함수를 호출
`webView.evaulateJavascript("window.dispatchEvent(sayHello)")`
ios
- WEB → APP
- (APP)웹에서 호출하기 위한 인터페이스명을 WKUserContentController로 정의
`let controller = WKUserContentController()
controller.add(self, name: "interfaceName1")`
- (APP)웹뷰 설정에 1번에서 만든 Controller를 연결
`let config = WKWebViewConfiguration()
config.userContentController = controller
webView = WKWebView(frame: view.bounds, configuration: config)`
- (APP)WKUserContentController의 구현체는 ViewController 내에 delegate를 다음과 같이 구현
`func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if ([message.name](http://message.name/) == "interfaceName1") {
...
} else if ...
}`
- (WEB) 웹에서는 1번에서 정의한 interfaceName을 이용해 다음과 같이 postMessage를 이용해 호출
`window.webkit.messageHandlers.interfaceName1.postMessage("params")`
- APP → WEB
- (WEB)네이티브에서 호출하기 위한 함수를 CustomEvent로 만들고 window.함수명으로 할당(콜백으로 웹에서 원하는 동작 실행할 수 있음)
`window.sayHello = new CustomEvent("NativeEvent");
const nativeEventCallback = (event) => {
alert(`event receive from Native`);
};
window.addEventListener("NativeEvent", nativeEventCallback);`
- (APP)webView가 제공하는 evaluateJavascript 함수로 아래와 같이 window.dispatchEvent로 웹에 생성한 함수를 호출
`webView.evaluateJavascript("window.dispatchEvent(sayHello)") { (result, error) in }`
정리
- 웹 프론트에서
web -> app 호출할 때는 정의된 인터페이스를 가지고 미리 생성된 함수를 호출하는 방식으로 통신하고
app -> web 호출할 때는 정의된 인터페이스의 함수가 실행되고 콜백으로 웹에서 동작할 코드를 작성하는 방식으로 Bridge interface를 사용할 수 있다.
- html에서 뿐만 아니라 네이티브에서의 동작도 함께 정리해서 전체적으로 어떤식으로 구현되는지 이해하는 것이 좋을 것 같다.
