[JS] User Agent 브라우저 정보 얻기 (크롬인지 아닌지 체크하기)

< 좌. MacOS / 우. Windows >

크롬 다운로드를 권장하기 위해서 띠배너를 보여주는데, 크롬 브라우저일 경우에는 보이지 않아야 한다. 어떻게 하면 크롬 브라우저 인지 알 수 있을까? userAgent를 통해 확인 할 수 있다.

UserAgent 관련 정보가 정리된 곳

• https://developer.chrome.com/multidevice/user-agent
• https://developers.whatismybrowser.com/useragents/explore/hardware_type_specific/mobile/1

Step1. MacOS Chrome

MacOS

• Chrome : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
• Firefox : Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0
• Safari : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15

Step2. iOS/Android Chrome

iOS 12 (iPhone6) / Android 8.0 (Galaxy S8)

iOS 모바일 크롬 브라우저는 CriOS이 크롬을 뜻한다.

Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/71.0.3578.89 Mobile/15E148 Safari/605.1

안드로이드 삼성 브라우저도 Chromium 기반이어서 UserAgent에 Chrome이 나온다.

Mozilla/5.0 (Linux; Android 8.0.0; SAMSUNG-SM-G950N/KSU3CRJ1 Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/8.2 Chrome/63.0.3239.111 Mobile Safari/537.36

Step3. Windows Chrome

Windows10

• IE11 : Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

• Edge : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

• Chrome : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

• Firefox : Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Microsoft Edge 브라우저도 Chromium 기반이다.

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

Result

userAgent를 통해 Chrome임을 확인한 뒤, 크로미움 기반이어서 Chrome이 포함되는 SamsungBrowser와 Edge는 제외하는 코드를 넣었다.

키워드가 포함되어 있는지 아닌지를 체크하는데 include()를 사용했는데, IE에서 동작하지 않는 이슈가 있어서 indexOf로 변경했다. includes()는 true/fasle를 리턴하고, indexOf()는 포함하면 0 이상의 정수, 포함하지 않으면 -1을 리턴한다.