웹뷰에서 안드로이드로 데이터 전달
html 웹뷰에서 안드로이드 앱으로 데이터 전달하기.
회사 어플내 어떠한 기능을 웹뷰로 보여주고 싶다는 신규 요청사항이 있었다.
구현해야할 기능 자체는 어렵지 않았다.
기획팀에서 지정한 차트 라이브러리를 통해 데이터만 받아오면 되었다.
관건은
1. 차트 라이브러리가 클릭이벤트를 지원 하는가?
2. 내가 원하는 정보를 어떻게 앱에 전달할 것인가?
1번.
다행히 차트 라이브러리에서 click event를 제공하고 있었다.
아래 코드를 조금 변형해서 내가 원하는 데이터값을 클릭할 때마다 변수에 넣어주면 된다.
2번.
자바스크립트에서 할 것은 window.andriod객체명.함수명()를 적절한 타이밍에 호출하는 것 뿐이다.
인터넷에서 하라는대로 이리저리 해보았으나 나는 함수가 실행되지 않았다.
아래와 같은 에러메세지만 콘솔에 찍히고 데이터는 안드로이드로 넘어가지 않았다.
index.js:139 Uncaught TypeError: Cannot read properties of undefined (reading 'getInfo')
지피티에게 물어보니 이렇게 말했다.
이 에러는 window.android 객체가 정의되지 않았기 때문에 발생합니다. 이 경우 주로 다음 두 가지 원인이 있을 수 있습니다
webView.addJavascriptInterface(new AndroidBridge(), "android")코드가 webView 객체에 올바르게 추가되었는지 확인하세요. addJavascriptInterface()를 호출하여 AndroidBridge 객체를 "android" 인터페이스 이름과 함께 등록해야 합니다.
webView가 JavaScript를 활용할 수 있도록 설정되어 있는지 확인하세요. webView 객체에서 JavaScript 활성화를 가능하게 하는 코드가 포함되어야 합니다.
예를 들어, webView.getSettings().setJavaScriptEnabled(true);를 호출하여 JavaScript를 활성화할 수 있습니다.
일단, 두가지 원인으로 추측이 되는데 동시에 수정을 해서 무엇이 문제였는지는 추측일 뿐이다.
우선 웹쪽에서 의심했던 것은 브라우저의 실행 순서였다.
안드로이드에서 만든 자바스크립트 함수가 윈도우 객체에 추가되기 전에 호출하는 것을 문제라고 생각했다.
그래서 모든 window.onload()를 사용해서 브라우저의 렌더링이 끝나면 호출할 수 있도록 수정했다.
다음으로, 안드로이드쪽에서 의심했던 것은 객체의 이름이었다.
android를 객체명으로 사용했는데, 서비스명으로 수정해서 호출하였다.
다행히 데이터가 넘어가는 것을 확인했다.
배운점
* 서로 다른 프로젝트여도 웹뷰-안드로이드 데이터 전달이 가능하네?
* HTML에서 <script>태그 안에 작성된 코드와 별도의 js파일을 스크립트 태그로 삽입하는 것의 차이
* JAVA에는 다양한 형(type)이 있었다...
