WebView Interface(안드로이드)

1. 웹뷰(WebView)란?

웹뷰란 쉽게 말해서 앱 안에 HTML iframe을 넣어놓은 것이다. 다시 말해, 웹뷰는 앱 내에 웹 브라우저를 넣는 것이다.

웹뷰는 HTML 기반인 만큼 앱보다 반응성이 약하고, 애니메이션 등의 다양한 UI 효과를 넣기 어렵다. 

https://gradler.tistory.com/m/32

2. 안드로이드 -> 자바스크립트 호출

case1)

React.js Vue.js같은 컴포넌트 기반의 SPA 방식으로 개발 된 웹 프론트에서 컴포넌트 라이프 사이클에 맞춰 이벤트 리스너를 추가, 삭제 하는 방식

 

1. Front side( 자바스크립트 영역 ) 네이티브에서 호출하기 위한 함수를 CustomEvent로 만들고 window.함수명으로 할당

useEffect(() => {
    window.sayHello = new CustomEvent("NativeEvent");
    const nativeEventCallback = (event) => {
      alert(`event receive from Native`);
    };
    
    window.addEventListener("NativeEvent", nativeEventCallback);

    // event listener clean up
    return () => {
      window.removeEventListener("NativeEvent", nativeEventCallback);
    };
 }, []);

2. Native 네이티브에서는 webView가 제공하는 evaluateJavascript 함수로 window.dispatchEvent로 웹에 생성한 함수 호출

webView.evaulateJavascript("window.dispatchEvent(sayHello)")

case2)

전역 scope로 생성된 함수 호출

1.  Front side( 자바스크립트 영역 ) 네이티브에서 호출하기 위한 모듈을 정의하고, 전역 scope에 해당하는 모듈 또는 파일에 import 시킨다.

window.NativeInterface = {
  helloWorld: () => {
    // your javascript code
  },
  ...
}

2. (native side) 네이티브에서는 webView가 제공하는 evaluateJavascript 또는 loadUrl을 이용하여 웹에 생성된 함수를 호출할 수 있다. 

webView.evaluateJavascript("window.NativeInterface.helloWorld()")
// or
webView.loadUrl("javascript:window.NativeInterface.helloWorld()")

 

참고 : https://gradler.tistory.com/m/32

하이브리드앱(Android-Javascript) 간 인터페이스 방법

https://brunch.co.kr/@devapril/40

Vue.js 기반 웹뷰와 네이티브간 통신하기

https://gradler.tistory.com/33

하이브리드앱(iOS-Javascript) 간 인터페이스 방법