[Android/ios] 접속한 경로가 WebView인지 Web Browser인지 확인하는 방법

 

1. 문제상황

• 문제 소개: WebView를 사용한 앱을 개발중에 현제 사용자가 접속중인 웹사이트가 WebView를 통한 접속인지 아니면 모바일에서 Web Browser를 접속한것인지 구분하는 방법이 필요했다.

 

2. 해결책 탐색

• User-Agent를 이용한 Android, IOS기기정보 구분 

var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기

if ( varUA.indexOf('android') > -1) {
    //안드로이드
    return "android";
} else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) {
    //IOS
    return "ios";
} else {
    //아이폰, 안드로이드 외
    return "other";
}


하지만 이방법은 Android/Ios는 구분할수 있으나 현제 접속중인게 WebView 인지는 판단하지 못했다.

 

3. 최종 해결책

• 자바스크립트와 네이티브의 통신을 이용해서 WebView인지 확인해볼수 있었다.
• Android/Ios 네이티브 코드에 스크립트 코드를 셋팅해놓고 자바스크립트 내에서 그 코드를 불렀을때 정상적으로 넘어간다면 WebView 예외 처리될경우 Web Browser로 판단할수 있었다.

 

해결 과정에서 사용한 코드

1. Android 앱 셋팅

    webView.addJavascriptInterface(new Object() {
        @JavascriptInterface           // 안드로이드 4.2 이상에서는 이 어노테이션을 붙여야 합니다.
        public void webviewCallback() {
            // 자바스크립트에서 호출할 수 있는 메소드
        }
    }, "Android");


2. Ios앱 셋팅

    extension ViewController: WKScriptMessageHandler {
        func userContentController(_ userContentController: WKUserContentController,
                                 didReceive message: WKScriptMessage) {
            if message.name == "iosCallback" {
                // 콜백 구현
                // 디바이스 정보 반환 등
            }
        }
    }

3. JavaScript 셋팅

    function detectEnvironment() {
        // WebView 체크
        function isWebView() {
            try {
                // iOS WebView 체크
                const isIOSWebView = typeof webkit !== 'undefined' 
                    && webkit?.messageHandlers?.iosCallback !== undefined;

                // Android WebView 체크
                const isAndroidWebView = typeof Android !== 'undefined' 
                    && Android?.webviewCallback !== undefined;

                return isIOSWebView || isAndroidWebView;
            } catch (e) {
                console.warn('WebView 체크 중 에러:', e);
                return false;
            }
        }

        // 디바이스 체크
        const userAgent = navigator.userAgent.toLowerCase();
        let device = 'other';

        if (userAgent.indexOf('android') > -1) {
            device = 'android';
        } else if (
            userAgent.indexOf('iphone') > -1 || 
            userAgent.indexOf('ipad') > -1 || 
            userAgent.indexOf('ipod') > -1
        ) {
            device = 'ios';
        }

        return {
            isWebView: isWebView(),
            device: device
        };
    }

    // 사용 예시
    const result = detectEnvironment();
    console.log('디바이스:', result.device);
    console.log('WebView 여부:', result.isWebView ? 'WebView' : '일반 브라우저')

참고 자료

• chat GPT
• https://justbobby.tistory.com/20