[javascript] 브라우저 지원 체크

07 Dec 2023

javascript

웹 개발 시 특정 기능이나 API가 지원되는 브라우저에만 사용하고 싶을 때, 브라우저 지원 체크를 수행해야 합니다. 이를 통해 사용자가 지원되지 않는 브라우저에서는 대체 방안을 제공하거나 경고 메시지를 표시할 수 있습니다.

JavaScript를 사용하여 브라우저 지원 체크를 하는 방법에 대해 알아보겠습니다.

// 현재 브라우저 정보를 가져오는 함수
function getBrowserInfo() {
  const userAgent = navigator.userAgent;
  let browserName, browserVersion;

  if (userAgent.indexOf("Chrome") !== -1) {
    browserName = "Google Chrome";
    browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);
  } else if (userAgent.indexOf("Safari") !== -1) {
    browserName = "Safari";
    browserVersion = userAgent.substring(userAgent.indexOf("Safari") + 7);
  } else if (userAgent.indexOf("Firefox") !== -1) {
    browserName = "Firefox";
    browserVersion = userAgent.substring(userAgent.indexOf("Firefox") + 8);
  } else if (userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1) {
    // IE 11 이전 버전 체크
    browserName = "Internet Explorer";
    if (userAgent.indexOf("MSIE") !== -1) {
      browserVersion = userAgent.substring(userAgent.indexOf("MSIE") + 5);
    } else {
      browserVersion = "11";
    }
  } else {
    browserName = "Unknown";
    browserVersion = "0";
  }

  return {
    name: browserName,
    version: browserVersion,
  };
}

// 브라우저 지원 체크 함수
function checkBrowserSupport() {
  const browserInfo = getBrowserInfo();

  // Google Chrome 80 버전 이상 지원
  if (browserInfo.name === "Google Chrome" && parseInt(browserInfo.version) >= 80) {
    console.log("지원되는 브라우저입니다.");
  } else {
    console.log("지원되지 않는 브라우저입니다.");
  }
}

// 실행 예시
checkBrowserSupport();

위 코드는 현재 브라우저 정보를 가져오는 getBrowserInfo 함수와 checkBrowserSupport 함수를 포함하고 있습니다. checkBrowserSupport 함수에서는 Google Chrome 80 버전 이상을 지원하는지 체크하고 결과를 콘솔에 출력합니다.

사용자의 브라우저 정보를 가져와 해당 브라우저와 버전에 따라 작업을 처리하면 됩니다. 이를 활용하여 웹 애플리케이션에서 지원되는 브라우저에 대한 기능을 제공하고, 그렇지 않은 경우에는 알림 메시지 등을 표시할 수 있습니다.

참고 자료

MDN Web Docs - navigator.userAgent