본문 바로가기

Developer/Mobile

[Android] Javascript bridge - 1

 

 

 

하이브리드 앱을 제작하다보면,

안드로이드와 자바스크립트간에 통신이 필요합니다.

안드로이드 앱과 자바스크립트간의 데이터를 주고 받을 수 있도록 다리 역활을 하는것을 Bridge 라고 하는데요.

 

설정 방법을 보면

 

1. 웹뷰설정

jsWebSettings = jsWebView.getSettings();

jsWebSettings.setJavaScriptEnabled(true);

 

2. 브릿지연결

jsWebView.addJavascriptInterface(new ClassName(context, jsWebView), "Android");

이며 Android 는 String 형이며 자바스크립트에서 호출 할 수 있는 별칭 정도록 생각하시면 됩니다.

 

이면 브릿지는 완성이 됩니다.

 

 

사용방법을 보면 크게 두가지 형식으로 나타나는데,

 

1. 자바스크립트에서 네이티브로

: javascript

var android = window.Android;

android.callNativeFnName(param)

 

: Native

jsWebView.addJavascriptInterface(new ClassName(context, jsWebView), "Android"); // 브릿지설정

 

public class ClassName{

public ClassName(Context c) {
    mContext = c;
}
 
@JavascriptInterface
public void callNativeFnName(String param) {
    System.out.println("Call Fn");  
 }

}

2. 네이티브에서 자바스크립트로

: Native

jsWebView.loadUrl("javascript:callbackFunctionName()")

 

와 같이 통신을 하실 수 있습니다.

저도 이제 막 공부하기 시작한 시점이라, 많은걸 알지는 못해도 조금씩 글을 올려보도록 하겠습니다~