[Android] 안드로이드 기능을 웹에서, AndroidBridge

Android 개발 시, 기존 모바일웹을 어플로 띄우고 싶을 때가 있을 겁니다. 그럴 때 사용하는 게 바로 WebView인데

가끔 Web에서 안드로이드의 기능 (ex. 카메라, 바코드스캐너, 알림 등등)을 사용하고 싶을 때가 있을 겁니다.

물론 최근의 WebView는 그런 걸 많이 커버하려고도 하지만, 커스터마이즈한 기능들까지 다 커버하지는 못하죠.

그럴 때, 개발자의 갈증을 2프로 정도 해소해줄 수 있는 기능이 바로 AndroidBridge입니다.

이는 AndroidBridge라고 따로 있는 건 아니고 기능상으로 그러하다는 거고 webview를 통해 web과 android가 통신할 수 있도록 다리를 놓아주는 기능이기 때문에 AndroidBridge라고 보시면 됩니다.

 

1. Bridge 만들기

import android.content.Context;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class CustomBridge {
    private Context mContext;
    private WebView mWebView;

    private Handler mHandler;

    /**
     * 생성자
     * @param context 호출한 context
     * @param webview Bridge가 이용될 Webview
     */
    public CustomBridge(Context context, WebView webview){
        this.mContext = context;     // 대상 Context (Activity또는 Service 등등)
        this.mWebView = webview;     // Bridge생성시 대상 Webview를 저장

        mHandler = new Handler();
    }

    /**
     * 기능1
     */
    @JavascriptInterface
    public void callMessage(){
        Toast.makeText(mContext, "Web에서 호출된 메시지입니다.", Toast.LENGTH_SHORT).show();

        // Web으로 호출을 반환시, 동일 Activity로는 수행이 불가능하기때문에 스레드를 하나 생성해 호출해주어야합니다.
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                try{
                    mWebView.loadUrl("javascript:callback('콜백메시지입니다.');");
                }catch (Exception e){
                    e.printStackTrace();
                }
            }
        });
    }
}

 

2. Bridge를 WebView에 연결해주기

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;

public class TestActivity extends AppCompatActivity {
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = findViewById(R.id.webview);

        CustomBridge bridge = new CustomBridge(this, mWebView);
        mWebView.addJavascriptInterface(bridge, "MyApp");
    }
}

MyApp이라는 이름으로 연결을 해주었기 때문에 web에서는 다음과 같이 활용할 수 있습니다.

function doMessage(){
    if(window.MyApp && window.MyApp.callMessage){
        // 해당 브라우저에 MyApp이라는 브릿지가 있고 그 브릿지에 callMessage라는 함수가 있는 경우 호출
        window.MyApp.callMessage();
    }else{
        alert("해당 기능은 어플에서만 이용 가능합니다.");
    }
}

WebView로 제작한 어플의 web에서 doMessage라는 함수를 호출하면 브릿지를 통해 어플에서 구현한 callMeesage라는 메서드가 실행될 것이고, 다른 크롬 브라우저 등에서 호출하는 경우 "해당 기능은 어플에서만 이용 가능합니다."라는 경고문구가 뜨게 됩니다.

 

그리고 callMessage에서 callback으로 callback라는 함수를 호출해 주었기때문에

function callback(message){
    alert(message);
}

아래와 같이 제작해두면 어플을 통해 "콜백메시지입니다."라는 경고창이 뜨게 될 것입니다.