Vue.js 기반 웹뷰와 네이티브간 통신하기
Vue.js 기반 웹뷰와 네이티브와 통신하는 방법
이번에 진행하고 있는 프로젝트에서는 Vue.js 를 이용해 웹뷰를 만들고 이를 네이티브와 통신해야하는 일이 생겼다. 생각보다 검색했을 때 깔끔하게 정리되어 있는 한국어 자료가 많지 않고 대부분 리액트 네이티브 통신 방법에 대한 글이 많았다. 그래서 내가 구현한 내용을 토대로 정리하여 다른 사람들에게 도움이 되고자 이 브런치를 작성하려 한다.
일단 전체적인 과정은 아래 미디엄 블로그를 참고해 구현하였고, 이를 그대로 사용해도 무방하다.
단, 여기에 한 가지 문제점이라면 문제점일 수 있는 문제점이 있는데, 네이티브에서 Vue.js 의 컴포넌트에 있는 메소드를 호출할 수 없다는 것이다. 네이티브에서 Vue.js의 함수들을 호출하기 위해서는 글로벌로 선언을 해주어야한다.
1. 웹뷰에서 네이티브로 메시지를 전달하는 경우
1) 웹뷰 (Vue.js)
우선 웹뷰에서 네이티브로 메시지를 전달하기 위해 Vue.js 에서 제공하는 플러그인을 사용해 네이티브로 메시지를 보내는 함수를 글로벌로 등록한다.
위의 message.js 파일을 보면 안드로이드, ios 일 경우 메시지를 전달하는 방법이 다르다. 안드로이드와 통신하기 위해서는 addJavascriptInderface Class 명과 Method 명을 개발자간 정의해야한다. 반면 iOS 의 경우 메시지 핸들러 명만 정하면 된다. 정리를 해보면 다음과 같다.
(1) 안드로이드
addJavascriptInterface Class명 : WebViewBridge
함수명 : showMessage
(2) iOS
messageHandlers명 : webViewMessageHandler
웹뷰에서 전달하는 데이터를 받으려면 안드로이드와 iOS 에서는 위에 정한 클래스 및 메소드 명으로 인터페이스를 구축해주어야 하는데 이와 관련된 내용은 맨 위에서 언급했던 미디엄 블로그에 잘 나와있으니 참고하면 된다.
(3) 웹
웹의 경우 보통은 새 창으로 띄우거나 iframe을 embbed 해서 사용할텐데, 나같은 경우 웹 서비스에서 내가 만든 웹뷰를 open해서 사용하는 형태였다. 그렇기 때문에 내가 만든 웹뷰가 불려진 자식의 위치이므로 window.opener.postMessage를 이용해 메시지를 전달하였다.
이 때, 두 번째 인자로 targetOrigin을 정할 수 있는데 targetOrigin는 보안을 위해 꼭 정하고 사용하는 것을 권장한다. 자세한 내용은 아래 mdn 문서에 나와있다.
2. 네이티브에서 웹뷰로 메시지를 전달하는 경우
네이티브에서 웹뷰로 메시지를 전달하는 경우, 안드로이드, iOS 그리고 웹 각각 방법이 다르다. 안드로이드와 iOS 는 webView API 에서 제공하는 evaluateJavascript 를 이용해 자바스크립트 쪽 함수를 호출해 메시지를 전달한다. 자세한 내용은 맨 위에 언급한 미디엄 블로그에 나와있다.
반면, 웹에서 vue.js 로 된 웹뷰로 메시지를 전달하려면 vue.js 로 된 웹뷰에서 window 객체에 이벤트를 등록해 메시지를 전달받아야 한다. 메시지를 전달받을 vue 컴포넌트의 라이프사이클 mounted, beforeDestory 단계에서 이벤트를 등록하고 해제한다.
