WebView와 Android 네이티브 코드 통합하기

 

WebView와 Android 네이티브 코드 간의 통합은 매우 유용한 기능입니다. 이 통합을 통해 WebView 내에서 로드된 웹 페이지와 네이티브 Android 앱 간에 데이터를 전달하거나 상호작용을 할 수 있습니다. 이번 글에서는 WebView와 Android 네이티브 코드 간의 통합 방법을 설명하겠습니다.

1. JavaScript Interface 사용하기

Android에서 WebView와 상호작용하려면 JavaScript Interface를 사용해야 합니다. JavaScript Interface를 사용하면 JavaScript에서 네이티브 Android 메서드를 호출할 수 있으며, 이를 통해 네이티브 코드와 웹 페이지 간의 상호작용을 가능하게 합니다.

먼저, Android 네이티브 코드에서 JavaScript Interface를 설정합니다. 아래와 같이 addJavascriptInterface() 메서드를 사용하여 JavaScript와 연결할 네이티브 객체를 정의할 수 있습니다.

webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }
}, "AndroidInterface");

이제 웹 페이지에서 아래와 같은 JavaScript 코드를 사용하여 네이티브 메서드를 호출할 수 있습니다.

function callAndroidToast() {
    AndroidInterface.showToast('Hello from JavaScript!');
}

이렇게 하면 웹 페이지 내에서 JavaScript가 실행되어 네이티브 Android 메서드를 호출할 수 있습니다.

2. WebViewClient와 네이티브 코드 상호작용

WebViewClient를 사용하여 웹 페이지 로딩 중 발생하는 이벤트를 처리하고, 네이티브 코드에서 웹 페이지의 상태를 제어할 수 있습니다. 예를 들어, 특정 URL로 이동할 때 네이티브 앱에서 사용자 정의 로직을 실행할 수 있습니다.

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("myapp://")) {
            // 특정 URL 스킴을 처리하고 네이티브 로직 실행
            handleCustomUrl(url);
            return true; // WebView에서 URL 로드를 막음
        }
        return false; // WebView에서 URL을 로드하도록 함
    }
});

private void handleCustomUrl(String url) {
    // URL 스킴에 맞는 네이티브 코드 실행
    Toast.makeText(getApplicationContext(), "Custom URL received: " + url, Toast.LENGTH_SHORT).show();
}

위 코드에서는 WebView가 특정 URL 스킴을 감지하고, 그에 맞는 네이티브 로직을 실행합니다. 이를 통해 웹 페이지와 Android 네이티브 코드 간의 유기적인 상호작용을 구현할 수 있습니다.

3. WebChromeClient와 네이티브 코드 상호작용

WebChromeClient를 사용하면 WebView의 동적인 특성(예: JavaScript alert, confirm, prompt 등)에 대한 처리를 할 수 있습니다. WebChromeClient의 메서드를 오버라이드하여 네이티브 코드에서 동적인 콘텐츠를 처리할 수 있습니다.

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onJsAlert(WebView view, String url, String message, JsResult result) {
        // JavaScript alert을 네이티브에서 처리
        Toast.makeText(getApplicationContext(), "Alert from JS: " + message, Toast.LENGTH_SHORT).show();
        result.confirm();
    }
});

이 코드를 사용하면 웹 페이지에서 발생한 JavaScript alert을 네이티브 Android 앱에서 직접 처리할 수 있습니다. 이 외에도 JavaScript confirm이나 prompt 등을 네이티브에서 처리할 수 있습니다.

4. 데이터 전달 및 웹 페이지 로딩

WebView와 네이티브 앱 간에 데이터를 주고받는 방법도 있습니다. 예를 들어, 웹 페이지에 데이터를 전달하거나, 네이티브 앱에서 특정 데이터를 웹 페이지에 로드하는 방식입니다.

String data = "Hello from Android!";
String url = "javascript:receiveDataFromAndroid('" + data + "');";
webView.loadUrl(url);

위 코드에서는 네이티브 코드에서 JavaScript 함수 receiveDataFromAndroid()를 호출하여 데이터를 전달합니다. 웹 페이지 내에서 이 데이터를 받아서 처리할 수 있습니다.

정리

• JavaScript Interface를 사용하여 JavaScript에서 네이티브 메서드 호출
• WebViewClient를 사용하여 특정 URL 스킴을 처리하고 네이티브 로직 실행
• WebChromeClient를 사용하여 JavaScript alert, confirm 등을 네이티브에서 처리
• 네이티브 코드에서 웹 페이지로 데이터 전달 및 로딩

WebView와 네이티브 코드 간의 통합은 강력한 상호작용을 가능하게 합니다. 이를 통해 WebView 내에서 실행되는 웹 앱과 네이티브 Android 앱 간의 원활한 데이터 교환 및 제어가 가능합니다. 다음 글에서는 WebView에서 네비게이션 처리를 다루겠습니다.