/ FRAGMENTARY-KNOWLEDGE

클라이언트 Browser 확인방법

Introduction

사이트에 접속한 Client Web Browser의 종류를 알아내는 방법입니다.


Client Browser를 확인하기 위한 JavaScript code

제 블로그는 Chrome 전용입니다. IE를 이용하면 화면이 보란듯이 깨지게됩니다. 그래서 접속한 client의 browser를 알아내서 만약 chrome이 아니면 안내를 해 줄 필요가 있습니다.

실제 업무에서는 당연히 cross browsing을 염두에 두고 작업을 해야되겠죠?

다음과 같은 JavaScript 코드를 이용하시면 됩니다.

var agent = navigator.userAgent.toLowerCase();

if (agent.indexOf("chrome") != -1) {    
    alert("Chrome browser");
}

if (agent.indexOf("safari") != -1) {    
    alert("Safari browser");
}

if (agent.indexOf("firefox") != -1) {
    alert("FireFox browser");
}

JavaScript의 navigator객체를 조사하면 browser의 종류를 판별할 수 있습니다. IE 10까지는 저 위의 방법으로 알아낼 수 있으나 Edge와 그 이후 버전은 이름이 또 바뀌어서 다른 식으로 판단해야 합니다. 전 IE는 관심밖이라…


userAgent 객체의 값 확인

위의 방법은 가장 간단한 방법 중 하나입니다. Mobile browser까지 생각한다면 경우의 수가 훨씬 더 많아지겠죠.

특정 사이트와 Chrome 확장 프로그램을 이용하면 간단하게 어떤 browser로 접속했을 때 userAgent객체에 어떤 데이터가 들어가는지 확인해 볼 수 있습니다.

그럼 간단히 한번 해 볼까요?

먼저 크롬 웹 스토어에 접속해서 user-agent switcher로 검색합니다. 확장 프로그램이 검색되는데 다음 그림과 같은 것을 설치합니다. (전 이미 설치되어 있습니다.)

user-agent switcher

확장 프로그램이 설치되면 Chrome browser 우측 상단에 안경 모양의 아이콘이 보이실 겁니다. 그걸 누르면 다른 browser로 switching 할 수 있습니다.

자 이제 링크로 접속해 보시면 userAgent 객체의 값을 보실 수 있습니다. user-agent switcher를 이용하여 다른 browser로 바꾸어서 접속하면 browser마다 userAgent값이 바뀌는 것을 확인할 수 있습니다.

아래 그림은 iPhone6로 browser를 switch한 후 사이트에 접속한 결과 화면입니다.

접속 화면

추가적으로 해당 구현에 대한 소스코드까지 프로그래밍 언어별로 제공하고 있으니 필요하면 다운로드 받아서 사용하면 될 듯 싶습니다.

여하간 제 블로그는 Chrome 전용이기 때문에 제가 사용하는 Jasper2 theme의 head.html에 저 위의 코드를 적당히 수정해서 이용중입니다. 언제까지 이런 cross browsing issue에 시달려야하는지 안타깝습니다. ㅎㅎ

End.