[Swift] WKWebView, ios 웹뷰와 모바일 웹 구분

 

안녕하세요. 

 

오늘은, 웹서버에 접속할때 내가 웹뷰로 접속했는지 그냥 모바일 웹으로 접속했는지 구분하는 방법에 대해

알아보겠습니다. 

 

만약 웹뷰를 배포하고 있는 웹프로젝트에서 웹뷰 접속자들에게만 구현되게 하고 싶은 기능이 있다면 웹뷰로 접속했는지 모바일 웹으로 접속했는지 구분할수 있어야 합니다.

 

 

보통 웹뷰와 같은 하이브리드 앱에서는 네이티브앱에 비해 앱의 속도가 느려 개발자가 프로그레스바와 같은 애니메이션 효과를 주기 위해서 사용하는 경우가 있습니다. 

 

더 다양한 경우도 있겠죠. 

 

이처럼 하이브리드앱을 배포하는 개발자들은 웹뷰에서만 작동하게 하는 기능을 구현하기 위해서 모바일 웹과 웹뷰를 구별할 필요가 있습니다.

 

 

웹서버의 자바스크립트에서 우리는 navigator.userAgent 코드를 통해 내가 어디에서 접속했는지 알수 있습니다.

 

 

만약 모바일 안드로이드 웹에서 접속했다면, 웹서버의 자바스크립트로 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"

 

위처럼 Mozilla/5.0 어쩌고 저쩌고가 나올 것입니다.

 

하지만 불행하게도 안드로이드 웹뷰에서도 똑같은 결과가 나옵니다. 

 

그래서 우리는 navigator.userAgent 값만으로는 웹과 웹뷰를 구별할수가 없죠.

 

ios에서도 모바일 웹과 웹뷰는 navigator.userAgent값으로 구별할수는 없습니다.

 

"Mozilla/5.0 (iPhone CPU iPhone OS 13_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML like Gecko)"

 

Moizlla/5.0 (iPhone 어쩌고 저쩌고가 나오네요. 안드로이드와는 당연히 다르게 나오겠죠.

 

안드로이드와는 구별이 되지만, ios내에서 모바일 웹으로 접속했는지 웹앱으로 접속했는지는 구별할 수 없습니다.

 

 

안드로이드와  ios 둘다 단순히 userAgent 값만으로는 구별을 할수 없습니다.

 

 

그렇기 때문에 제가 안드로이드와 ios에서 navigator.userAgent에 특정한 단어를 추가하여

 

웹과 웹뷰를 구별할 수 있도록 해보겠습니다.

 

- For Android

 

In Android Project

 String userAgent = mWebSettings.getUserAgentString();
        mWebSettings.setUserAgentString(userAgent+" APP_WISHROOM_Android");

안드로이드 프로젝트에서 위의 코드를 추가시켜줍니다. 

 

이 코드를 살펴보면 javaScript의 navigator.userAgent값을 가져와 기존의 값에 " APP_WISHROOM_Android" 를 

추가시켜준 것입니다.

 

 

그러면 우리는 이 문자를 통해 웹에서 접속했는지 웹뷰에서 접속했는지 구별할 수 있습니다.

 

 

이제 한번 테스트를 해봅시다.

In Web Project

 		var browserInfo = navigator.userAgent;
		if(broswerInfo.indexOf("APP_WISHROOM_Android")>-1){
				alert(browserInfo)
		}else{
        		alert(browserInfo)
        }

 

 

웹프로젝트에 위의 코드를 추가시켜주세요. 

 

이제 안드로이드에서 모바일 웹과 웹뷰로 접속해보겠습니다.

 

안드로이드 모바일로 접속하면 아래와 같이 navigator.userAgent값이 나옵니다.

 

 

 

 

 

 

안드로이드 웹뷰로 접속하면 밑에와 같은 결과가 나옵니다.

 

 

 

 

 

웹뷰에서는 웹과는 다르게 "APP_WISHROOM_Android"  가 추가되어 있죠. 

 

이런식으로 구별을 할 수 있습니다.

 

 

 

- For IOS

 

ios에서도 구별을 해보겠습니다.

 

In Swift Project

webView.evaluateJavaScript("navigator.userAgent"){(result, error) in 
	let originUserAgent = result as! String
    let agent = originUserAgent + " APP_WISHROOM_IOS"
    self.webView.customUserAgent = agent
}

 

스위프트 프로젝트에 위의 코드를 추가시켜주세요. 

 

웹뷰를 로드하는 객체인 webView객체에서 evaluateJavaScript메서드를 사용하면 됩니다.

 

 

In Web Project

 		var browserInfo = navigator.userAgent;
		if(broswerInfo.indexOf("APP_WISHROOM_IOS")>-1){
				alert(browserInfo)
		}else{
        		alert(browserInfo)
        }

 

 

 

마찬가지로 웹프로젝트에서 위의 코드를 실행시켜주세요. 

 

안드로이드와 달리 "APP_WISHROOM_IOS"라고 적혀 있으니 주의하셔야합니다.

 

 

 

자 이제 결과를 보면

 

 

 

모바일 IOS 웹에서는 

 

 

 

 

 

 

ios웹뷰에서는

 

 

 

 

 

 

 

 

이러한 결과가 나옵니다. APP_WISHROOM_IOS가 웹뷰에는 추가되어 있죠.

 

이런식으로 우리는 안드로이드와 ios에서 각각 웹과 웹뷰를 구별할 수 있습니다.