javascript로 웹뷰에서 실행 되는지 감지하기 flutter - react

서론

회원가입 페이지를 프론트에서 리액트로 제작했다. 사실상 우리 프로덕트 시나리오에 따르면 회원가입 페이지는 모바일 앱 내부의 웹뷰로 띄워지는 모바일에 종속된 화면이다. 그렇지만 모바일 앱이 개발되기 이전에 웹페이지에 자체에서도 해당 기능들이 독립적으로 동작할 수 있도록 웹에서의 임시적인 시나리오로 해당 페이지를 만들었다.
그리고 모바일 앱 개발이 완성되고, 내가 만들어놓은 웹페이지를 웹뷰로 올리는 작업을 했다.

 

개발 환경

모바일: flutter, 웹뷰 패키지 flutter inappwebview
웹프론트: react

이제 내가 제작한 웹페이지가 아래와 같이 두 가지 시나리오로 나뉘게 된 것이다.
1. 모바일 웹뷰에서 띄워졌을 때  
2. regular 웹 브라우저에서 동작할 때

따라서 기존 리액트 페이지가 기본 웹브라우저에서 실행되고 있는지 웹뷰에서 실행되는 지를 javascript로 감지해야했다.

 

방법1 - Web API의 기본 userAgent 정보로 나오는 문자열로 감지

구글링을 해서 stackoverflow의 도움으로 브라우저가 가지고있는 userAgent 정보로 웹뷰를 판별하는 리소스를 찾아 적용했다.
이 함수를 리액트 코드 안에서 사용해서 웹뷰이면 처리해야 하는 로직을 작성했다.


웹뷰인지 감지하는 함수 

export function isWebView() {
  const navigator = window.navigator;
  const userAgent = navigator.userAgent;
  const normalizedUserAgent = userAgent.toLowerCase();

  const isIos =
    /ip(ad|hone|od)/.test(normalizedUserAgent) ||
    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
  const isAndroid = normalizedUserAgent.includes('android');
  const isSafari = normalizedUserAgent.includes('safari');
  const isWebview =
    (isAndroid && normalizedUserAgent.includes('; wv)')) ||
    (isIos && !('standalone' in navigator) && !isSafari);

  return isWebview;
}

 

결론적으로 이 코드의 문제 - ios에서는 먹히지 않는다.  (안드로이드 앱만 사용한다면 위 코드로만 웹뷰를 판별할 수 있다.)

브라우저 자체가 가지고있는 userAgent 정보로 웹뷰를 판별하는 코드이다.

그런데 관련 코드가 보통 10년 전 코드가 많고, ios 코드의 경우에는 왜 safari 브라우저를 제외하는건지 이해할 수 없어 찝찝했지만 우선 안드로이드 에뮬레이터를 돌려서 테스트했을때 잘 작동되었다.

그리고 시간이 흘러…모바일 개발자 선배가 ios 모바일 환경에서 돌려보고는...  ios에서 안되는데??? 했다 

그래서 다른 해결 방법을 찾아야했다.

 

ios device 크기를 감지해서 디바이스 마다 고유한 너비, 높이값으로 웹뷰로 판별하는 코드, safari가 있는지 파악하는 코드 등등이 있었지만  그닥 좋은 방법이 아닌 것 같았다.

리서치를 해보니 네이티브 모바일 앱에서 userAgent 속성을 바꿔주어 안드로이드 ios 둘 다 웹과 웹뷰를 구별할 수 있는 방법이 있었다. 이걸 보고 흠..? 모바일에서 userAgent 속성을 바꿔주면 될 것도 같은데? 라는 생각이 들었다. 

 

그래서 모바일 개발자 선배한테 제안을 해보는데... 

 

방법2 - 모바일에서 설정한 userAgent 값으로 감지

 

 

오!! 우리 모바일은 flutter inappwebview 패키지를 사용해서 웹뷰 통신을 하는데, 여기에서 userAgent를 따로 설정할 수 있다는 굿뉴스가 왔다. 

 

그래서 서로 합의해서 정한 새로운 이름으로 userAgent 값으로 쓰겠다고 약속하고, 모바일에서 해당 userAgent 정보를 설정하도록 했다.

우리는 `우리앱이름_APP_WEBVIEW`라는 문자열로 정했다. (코드엔 편의상 `APP_WEBVIEW` 라고 표현)

 
모바일 개발자한테 코드 보여달라고 쫄라서 받아낸 플러터 코드

InAppWebViewSettings _configureWebViewSetting() {
  return InAppWebViewSettings(
    userAgent: 'APP_WEBVIEW', //모바일과 합의해서 만든 이름
    verticalScrollBarEnabled: false,
    horizontalScrollBarEnabled: false,
    supportZoom: false,
    overScrollMode: OverScrollMode.NEVER,
    disallowOverScroll: true,
    alwaysBounceVertical: false,
    disableInputAccessoryView: true,
  );
}

 

이제 프론트 js 코드에 웹뷰 판별 함수를 바꿔준다. 

우리가 정해둔 값이 브라우저단의 Web Api의 userAgent 속성에 포함이 되어있는지 확인하는 아주 간단한 함수다.

브라우저의 userAgent 값에 'APP_WEBVIEW' 문자열이 포함되어있으면 true를, 없으면 false를 반환한다. 

 

export function isWebView() {
  const USER_AGENT_NAME = 'APP_WEBVIEW';
  return window.navigator.userAgent.includes(USER_AGENT_NAME);
}

 

로그로 한 번 모바일에서도 잘 찍히는지 userAgent 정보를 확인해보았다. 

  console.log(window.navigator.userAgent, '유저에이전트 정보');

 

1. 웹 브라우저의 경우

웹 브라우저의 userAgent 정보를 확인해보면 아래 캡처 화면처럼 나온다. 웹뷰가 아니기때문에 원래 기존 브라우저가 가지고 있는 정보가 잘 찍힌다. 

 

 

2. 모바일 앱뷰의 경우
코드가 모바일 웹뷰에서 띄워지면?? 아래처럼 로그가 찍힌다. 

WebView ID 1 calling "onConsoleMessage" using {message: APP_WEBVIEW 유저에이전트 정보, messageLevel: 1}

 
 

모바일에서 웹뷰를 띄우면 페이지 로드할 때 헤더값은 아래와 같이 나온다고 했다.  

headers: {Accept-Language: ko-KR,ko;q=0.9, Sec-Fetch-Mode: navigate, Sec-Fetch-Dest: document, Sec-Fetch-Site: none, Accept-Encoding: gzip, deflate, br, Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8, User-Agent: APP_WEBVIEW}, attribution: 0, cachePolicy: 0, body: null...}

 

 모바일에서는 이제 userAgent 브라우저 정보가 아예 설정해둔 값인 `APP_WEBVIEW`로 변경되었음을 확인할 수 있다.!!

 

따라서 모바일에서 설정한 userAgent 속성값이 있으면 웹뷰 화면인 것이고 아니면 일반 브라우저 화면으로 감지해서 구분할 수가 있다!

 
레퍼런스

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
https://stackoverflow.com/questions/75425363/how-to-detect-webview-in-javascript-for-ios-and-android
https://developer111.tistory.com/37

https://inappwebview.dev/docs/webview/in-app-weview-settings/