최근 회사에서 ios와 android 단말환경에서의 웹뷰 접속에 필요한 브릿지 리소스 파일을 개발하는 일을 하게 되었다. 웹뷰(webView)에 대한 지식이 없는 상태에서 작업을 진행하려다보니 검토하고 개발과정에서 좀 어려움이 있었는데 내가 이해한 내용을 간단히 정리해보기로..
그래서 웹뷰란 무엇인가?
웹뷰(webView)란 사전적 정의로 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 앱에 임베딩하는 것을 말한다.
간단하게 말하자면 ios또는 android 등의 모바일환경으로 특정 App에 접속하였을때 웹브라우저를 이용해 화면을 보여주는 방식을 뜻한다.
APP에서 특정 웹 브라우저를 화면으로 보여주는 경우 ▶️ 웹뷰(webview)
APP말고 그냥 모바일 환경에서 웹브라우저에 접속한 경우 ▶️ 모바일뷰(mobileView)
웹뷰 환경인지 구분하는방법
브릿지 파일을 개발할때 클라이언트의 접속 환경이 웹뷰인지 모바일뷰인지 pc환경인지 ios인지 andriod인지..(많음) 를 알아야 각 환경에 맞는 설정 로직을 작성할 수가 있게되는데 이를 구분하기위해 자바스크립트에는 navigator.userAgent 라는 내장객체가 있다.
예로 모바일 android에서 접속했다면 결과는🔽
alert(navigator.userAgent)
"Mozilla/5.0 (Linux; Android 8.0.0; SM-G930K Build/R16NW; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/75.0.3770.101 Mobile Safari/537.36"이런 문구가 보여지게 되는데 이를 통해 각 환경을 구분할 수가 있다.
그렇지만 단순히 해당 내용만으로는 웹뷰 또는 모바일뷰인지 구분하기가 쉽지 않다.. 왜나면 navigator.userAgent로 비교해도 같은 값이 나오기 때문.. (웹뷰 접속시 위의 wv라는 값으로 구분할 수도 있긴 함)
이러한 경우로 좀 일이 복잡해지게 되는데 나의 경우는 android기준으로 우리 회사에서 사용하는 android환경의 웹뷰 객체가 존재하는지를 비교하여 웹뷰인지 또는 다른 환경인지를 구분하였다.
class WebView{
/** 웹뷰 모드: webview_ios | web_ios | webview_and | web_and | web_pc */
os = null;
/** 웹뷰 여부 */
isWebview = false;
/** 안드로이드 여부 */
isAndroid = false;
/** 초기값 */
init(){
this.os = null;
this.isWebview = false;
this.isAndroid = false;
const getUA = window.navigator.userAgent;
// JSReceiver여부 체크
if (window.JSReceiver && window.JSReceiver.pageMove) {
this.os = "webview_and";
this.isWebview = true;
this.isAndroid = true;
return;
}
// ios 체크
if(getUA.match(/iPhone|iPad|iPod/i) && navigator.maxTouchPoints > 1){ // ios13 부터는 iPad를 Mac으로 인식함, 따라서 동시 터치수가 1보다 많을 경우도 함께 비교
this.isWebview = true;
this.os = this.isWebview ? "webview_ios" : "web_ios";
return;
}
// android 체크
if(getUA.match(/Android/) || getUA.match(/Dalvik/) || getUA.match(/GINGERBREAD/) || getUA.match(/Linux;.*Mobile Safari/) || getUA.match(/Linux 1\..*AppleWebKit/)){
this.os = "web_and";
this.isAndroid = true;
return;
}
this.os = "web_pc";
}위 로직으로 클라이언트의 접속환경을 비교한 뒤 해당 값에 따라 필요한 처리를 해주면 마무리
