웹, 앱 체크 navigator.userAgent

navigator.userAgent

user agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다.

 

지금 사용하고 있는 브라우저의 navigator.userAgent를 콘솔에 찍어보면 아래와 같이 나온다.

사용하고 있는 OS의 종류, 브라우저의 정보를 담고있다.

'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36'

하이브리드 앱을 제작할때 web view의 RRL이 로드되기 전에 userAgent를 수정하여 특정 문자열을 삽입하는 방법으로 웹인지 앱인지 구분할때도 사용한다.

 

 

navigator에는 대표적으로 다음과 같은 프로퍼티가 있다.

navigator.appName	브라우저의 간단한 이름
navigator.appVersion	버전 또는 버전과 관련된 정보. 브라우저 내부적으로 사용되는 버전에 대한 숫자이므로 사용자에게 표시되는 버전 숫자와 항상 일치하지는 않다.
navigator.userAgent	브라우저가 User-Agent HTTP 헤더에 넣어 전송하는 문자열로 appName과 appVersion의 모든 정보를 포함하여 더 자세한 정보를 추가로 담고 있다. 이 정보에 대해서는 표준화된 서식이 존재하지 않기 때문에 각 브라우저 특성에 따라 파싱해야 한다.
navigator.appCodeName	브라우저의 코드 네임. Netscape에서는 "Mozilla"라는 코드 네임을 사용한다. 호환성을 위해 IE도 역시 같은 코드 네임을 사용한다.
navigator.platform	브라우저가 실행되는 하드웨어 플랫폼으로 javascript 1.2 버전부터 지원한다.

 

사용 예:)

const elem = $("body");
const userAgent = navigator.userAgent;
const mobile = /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i;
const ios = /iPhone|iPad|iPod/i;
const iosApp = /sample_ios/i;
const aos = /Android/i;
const aosApp = /sample_android/i;

( mobile.test(userAgent) ) ? elem.addClass("mobile") : null;
( ios.test(userAgent) ) ? elem.addClass("ios") : null;
( iosApp.test(userAgent) ) ? elem.addClass("ios_app") : null;
( aos.test(userAgent) ) ? elem.addClass("aos") : null;
( aosApp.test(userAgent) ) ? elem.addClass("aos_app") : null;

 

 

 

 

참고:)

https://ohgyun.com/292

User Agent 파헤치기 (navigator.userAgent)