[Android] 웹 뷰 - 앱 간 통신

 

WebView Communication

Device Token

FirebaseMessagingService 클래스의 onNewToken(String token) 메소드를 override 하여 DeviceToken값을 얻을 수 있다.

 

FirebaseMessagingService

 

 

Communication between WebView and Native

 

• 안드로이드에서 자바스크립트 코드 실행

  • webView.evaluateJavascript(script, resultCallback) 사용

  • 예제1. 웹뷰의 배경색 변경 (1-way communication) 
  • webView.evaluateJavascript("document.body.style.background = 'blue';", null)

  • 예제2. 네이티브 쪽으로 데이터 리턴받기
    • 익명함수를 생성할 수 도 있다.
    • 반환값은 JSON value, JSON object, JSON array등으로 오기 때문에, unwrap하는 과정이 필요하다.

    webView.evaluateJavascript(
    		"(function() { return document.getElementById('toastMessage').value; })();"
    ) { returnValue ->
    		Toast.makeText(requireContext(), returnValue, Toast.LENGTH_SHORT).show()
    }

  • 그 외에, 자바스크립트 함수를 호출하거나, 파라미터로 값을 넘길 수 있다.

    webView.evaluateJavascript("getToastMessage();") { returnValue ->
        Toast.makeText(requireContext(), returnValue, Toast.LENGTH_SHORT).show()
    }

    webView.evaluateJavascript("concatenateStrings('${arg1}', '${arg2}');") { returnValue ->
        Toast.makeText(requireContext(), returnValue, Toast.LENGTH_SHORT).show()
    }

   

  Communication with WebView Using JavaScript in Android

  
  

• 자바스크립트에서 안드로이드 메소드 호출

  In Android

  1. 자바스크립트 사용 설정

     val myWebView: WebView = findViewById(R.id.webview)
     myWebView.settings.javaScriptEnabled = true

  2. 자바스크립트 코드를 Android 코드에 결합
     • 자바스크립트 코드와 안드로이드 코드 간에 인터페이스를 만들 수 있다.
     • 자바 스크립트에서 Android 코드의 메소드를 호출 가능하게 해준다.
       • 아래 예제에서는 Toast를 띄운다.

     class WebAppInterface(private val mContext: Context) {
     		@JavascriptInterface
     		fun showToast(toast: String) {
     				Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
     		}
     }

     • 웹뷰에서 실행되는 자바 스크립트에 이 클래스를 결합하고, 인터페이스의 이름을 지정할 수 있다.
       • 아래 예제에서 인터페이스의 이름을 Android로 설정하였다.

     myWebView.addJavaScriptInterface(WebAppInterface(this), "Android")

  In Web

  1. 인터페이스 사용
     • 위와 같이 자바스크립트 인터페이스를 만들었다면, WebView에서 실행되는 자바스크립트를 위한 Android라는 인터페이스가 만들어진다.
     • 자바 스크립트에서 Android라는 인터페이스를 초기화할 필요 없이 WebView가 자동으로 설정해준다.

     <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
     
     <script type="text/javascript">
         function showAndroidToast(toast) {
             Android.showToast(toast);
         }
     </script>

     • 버튼을 클릭하면, WebAppInterface.showToast()를 호출한다.
     • 인자에 원하는 값을 담아 전달할 수 있다.

   

  WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers