[Flutter] webview_flutter JS 자바스크립트 통신 구현

안녕하세요. 웹뷰 앱을 만들면서 js 통신 작업을 진행했는 데

검색해도 별다른 팁이나 방법이 안내된게 많지 않다보니

정석은 아니지만 어떻게든 구현했던 방법을 공유하고자 합니다.

 

아래 사진과 같이 javascriptChannels를 작성해줍니다.

이때, _webToAppChange(context)는 아래에서 말씀해드리겠습니다.

WebView javascriptChannels

 

저는 html 파일에서 아래와 같이 WebToApp이라는 자바스크립트 함수를 만들었습니다.

내용을 요약하자면 WebToApp이라는 함수를 호출할 때

json 데이터를 만들어 commandType 등의

전달한 명령어가 어떤 수행을 할 것인지에 대한 구분자를 작성해줍니다.

여기서 중요한 것은 webToAppChange.postMessage(jsonData); 입니다.

webToAppChange를 호출되면 이걸 웹뷰에서 캐치한다고 생각하시면 됩니다.

 

이제 다시 dart파일로 돌아와서

아래와 같이 JavascriptChannel를 작성해줍니다.

방금 html에서 작성했었던 webToAppChange를 name에 입력해줍니다.

이 후 onMessageReceived를 아래와 같이 작성해주신 후

전달받은 json을 decode하여 각 항목별로 값을 분리해줍시다.

이제 전달받은 값들에 대해 작동할 내용을 if문 혹은 switch문으로

구분하여 작동시켜주도록 작성하시면 됩니다.

 

저는 예를 들어 commandType의 값이 comm일 경우

http통신과 관련된 기능이 작동되도록 작성하였습니다.

JavascriptChannel Function