Modernizr로 웹 워커 지원 여부 감지하기
HTML5의 웹 워커(Web Worker) 기능은 모든 브라우저에서 동일하게 지원되지 않습니다. 따라서 실제 코드를 작성하기 전에, 사용자의 브라우저가 해당 기능을 지원하는지 먼저 확인하는 것이 좋습니다. 이때 가장 널리 활용되는 도구가 바로 Modernizr 라이브러리입니다.
아래 예제 코드를 실행하면 현재 브라우저가 웹 워커 기능을 지원하는지 손쉽게 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script src = "/js/modernizr-1.5.min.js"></script>
<script>
function myFunction(){
if (Modernizr.webworkers) {
alert("Congratulations!! You have web workers support." );
} else{
alert("Sorry!! You do not have web workers support." );
}
}
</script>
</head>
<body>
<button onclick = "myFunction()">Click me</button>
</body>
</html>코드 동작 원리
- Modernizr 라이브러리 로드:
<head>태그 안에서modernizr-1.5.min.js파일을 불러와 HTML5 기능 감지 환경을 준비합니다. - 기능 확인:
Modernizr.webworkers속성은 브라우저가 웹 워커를 지원하면true, 지원하지 않으면false를 반환합니다. - 결과 알림: 버튼을 클릭하면
myFunction()이 실행되어, 지원 여부에 따라 서로 다른 경고창(alert)이 표시됩니다.
다음은 위 코드를 실행한 결과 화면입니다.
이처럼 Modernizr를 활용하면 복잡한 브라우저별 분기 처리 없이도, 한 줄의 조건문으로 HTML5 신규 기능의 지원 여부를 깔끔하게 판별할 수 있습니다.