[JavaScript] js를 이용한 사용자 브라우저 종류 확인 방법

고병표·2022년 8월 24일
0

JavaScript

목록 보기
9/9
post-thumbnail

개요

아웃룩 익스텐션을 개발하던 도중, 웹 브라우저 안 Add-in 과 데스크톱 앱의 구동 방식이 다른것을 확인하였다.
(이것 때문에 qa를 통과하지 못했다...ㅠ)

때문에 사용자가 웹을 통해 아웃룩을 접속했을 때 이를 감지하는 코드와 새로운 로직을 추가하게 되었다.

window navigator을 사용하는 방법

비교적 최신 방법? 이라고 한다.
window의 navigator을 이용하는 방법인데 주의점은 chrome 기반 웹 브라우저는 모두 chrome으로 나온다. (ex. whale)

switch (true) {
  case agent.indexOf("edge") > -1:
    browserName = "MS Edge";
    break;
  case agent.indexOf("edg/") > -1:
    browserName = "Edge (chromium based)";
    break;
  case agent.indexOf("opr") > -1 && !!window.opr:
    browserName = "Opera";
    break;
  case agent.indexOf("chrome") > -1 && !!window.chrome:
    browserName = "Chrome";
    break;
  case agent.indexOf("firefow") > -1:
    browserName = "Mozilla Firefow";
    break;
  case agent.indexOf("safari") > -1:
    browserName = "Safari";
    break;
  default:
    browserName = "other";
}

explore와 whale은?

사실 내가 맡고 있는 outlook 프로젝트는 5년전 코드들로 이루어져 있다.
그 당시에는 크롬보다 explore를 주로 사용하고 있었으며 프로젝트 또한 explore에 맞춰져 있다.

때문에 기존의 버전이 낮은 explore 설정을 유지하는 방법을 찾았으며, 답은 아래와 같다.

if(BrowserDetect.broser === 'Explorer" && BrowserDetect.version < 11){}
if(BrowserDetect.broser === 'Whale"){}

0개의 댓글