[iOS] WKWebView User Agent 설정 (웹뷰와 웹브라우저 구분하기)

 

 

앱 접속에 대해서만 구현하고 싶은 기능이 있을 때, 

웹브라우저로 접속하는 것을 막고 싶을 때, 

… 

등등 웹뷰로 접속했는지 웹브라우저로 접속했는지 구분이 필요한 경우가 있습니다.

이 때 사용할 수 있는 것이 User Agent 값입니다.

 

---

 

우선 웹뷰와 웹브라우저 각각의 User Agent 기본값을 출력해보겠습니다.

 

📌 웹뷰

// Swift
self.webView.evaluateJavaScript("navigator.userAgent") { (result, error) in
    let defaultUserAgent: String = result as! String
    print("defaultUserAgent : \(defaultUserAgent)")
}

 

📌 웹브라우저

// JavaScript
alert(navigator.userAgent);

 

📌 User Agent값

- iphone, webview
mozilla/5.0 (iphone; cpu iphone os 15_0_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148
 
- iphone, safari
mozilla/5.0 (iphone; cpu iphone os 15_0_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/15.0 mobile/15e148 safari/604.1
 
- iphone, chrome
mozilla/5.0 (iphone; cpu iphone os 15_0 like mac os x) applewebkit/605.1.15 (khtml, like gecko) crios/94.0.4606.52 mobile/15e148 safari/604.1
 
- android, webview
mozilla/5.0 (linux; android 11; sm-a908n build/rp1a.200720.012; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/94.0.4606.80 mobile safari/537.36
 
- android, chrome
mozilla/5.0 (linux; android 11; sm-a908n) applewebkit/537.36 (khtml, like gecko) chrome/94.0.4606.71 mobile safari/537.36

 

 

먼저 iOS만 확인해보면

웹뷰에서는 'safari'값이 출력되지 않지만, 웹브라우저에서는 이 두 값이 출력되는 모습입니다.

따라서 User Agent 값에 'safari'가 들어가면 웹브라우저라고 판단하면 될 것 같지만

 

웹뷰가 장착된 앱이라면 Android OS로도 배포가 되었을 확률이 99.9%이므로 Android 웹뷰에서도 확인해보면

여기는 웹뷰인데도 'safari'가 들어갑니다 (...)

 

따라서 iOS/Andriod OS 네이티브 소스에 User Agent 값을 커스텀해주어야 웹뷰와 웹브라우저를 구분할 수 있겠습니다.

 

 

// Swift
self.webView.evaluateJavaScript("navigator.userAgent") { (result, error) in
    let defaultUserAgent: String = result as! String
    let customUserAgent: String = defaultUserAgent + " MyApp iOS"
    self.webView.customUserAgent = customUserAgent
}

 

 

요렇게요!

저는 기존 User Agent값은 유지하되 앱에서 접속했음을 판별하기 위해 커스텀문자열을 덧붙여주었습니다.

카카오톡 웹뷰의 경우에도 기존 User Agent 값을 유지하고 맨 뒤에 커스텀문자열 " KakaoTalk 9.5.1(버전정보)"을 덧붙였네요!

 

기존 User Agent 값을 사용하고 싶지 않다면 customUserAgent에 다이렉트로 원하는 문자열을 넣어주면 됩니다.

 

그러면 이제 웹에서는 사용자가 웹뷰로 접속했는지 웹브라우저로 접속했는지 다음과 같이 판별할 수 있습니다👍

 

 

// JavaScript
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('myapp') > -1) {
    alert('웹뷰 접속');
} else {
    alert('웹브라우저 접속');
}

 

 

---

참고

https://kakao-tam.tistory.com/110