[JavaScript+SCSS] 브라우저 타입 확인, 사파리에서만 적용되는 SCSS

들어가며

진행했던 미니 프로젝트인 가위바위보 게임에서 게임시작 페이지로 넘어가면 3초 카운트가 시작된다.
그런데 사파리 브라우저와 iOS 디바이스들에서는 Audio.play 함수가 동작하지 않는 것을 알게 되었다. 😱
크롬과 비슷하게 브라우저 정책상 사운드 자동재생이 바로 되지 않도록 막혀있는 것!...

 

그렇다면 천상 인트로페이지에서 버튼을 눌렀을 때 배경음악이 나오도록 했던 것처럼,
여기서도 무언가 눌렀을 때 게임이 시작될 수 있도록 해야하는데... (setTimout 메서드도 정상적으로 동작하지 않았다.)
사용성 부분에서는 조금 떨어질 수 있지만, iOS와 사파리 전용으로 게임 시작을 알리는 레이어를 깔아주기로 했다.

 

그럼 먼저 현재 접속하고 있는 브라우저가 무엇인지를 알아보는 것이 우선!

 

 

navigator 객체

navigator 객체는 브라우저에 대한 다양한 정보를 저장하는 객체이다. (브라우저 공급자, 버전 정보 외..)
브라우저의 기본 언어, 실행되고 있는 운영체제 등 여러 가지를 알 수 있다!

platform 속성으로 현재 브라우저의 운영체제 확인

 

 

 

브라우저 타입 확인

이 navigator 객체의 속성 중 하나인 userAgent를 통해서 현재 접속하고 있는 브라우저의 종류를 알 수 있다.
하지만 막상 브라우저별로 출력해보면 결과가 비슷비슷한 것을 알 수 있는데..

 

• 크롬

 

• 사파리
  

  

이는 대부분의 브라우저들이 mozlia 렌더링을 따르기 때문에, 브라우저 렌더링 엔진 기술을 공유하고 있기 때문이라고 한다.

 

 

그래서 좀 더 세부적으로 아래와 같이 함수를 작성하면 좀 더 명확하게 브라우저 타입을 리턴할 수 있다.

function checkBrowser() {
  const agent = navigator.userAgent.toLowerCase();
  if (agent.indexOf('chrome') != -1) return 'Chrome';
  if (agent.indexOf('opera') != -1) return 'Opera';
  if (agent.indexOf('firefox') != -1) return 'Firefox';
  if (agent.indexOf('safari') != -1) return 'Safari';
  if (agent.indexOf('mozilla/5.0') != -1) return 'Mozilla';
}

 

 

적용한 코드를 보면, 가져온 브라우저 타입에서 사파리일 경우에만 별도의 이벤트리스너를 추가해주었다.

const browser = checkBrowser();

function startGameOnSafari() {
  playing();
  startTimerLayer.classList.toggle('is-active');
}

function startGame() {
  if (browser === 'Safari') {
    startTimerLayer.addEventListener('click', startGameOnSafari);
  } else {
    playing();
  }
}

window.addEventListener('load', startGame);

 

 

사파리에서만 적용되는 SCSS 코드

사파리에서만 적용되는 SCSS를 위해서는 약간의 꼼수가 필요하다.
브라우저에서 -webkit-appearance: none 을 지원할 때 적용되는 코드.

    @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
            @content;
        }
    }

 

 

나의 경우는 is-safari 라는 클래스를 통해 사파리에서만 보여질 수 있도록 했다.

 @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      &.safari-only {
        display: block;
      }

      &.safari-only.is-active {
        display: none;
        opacity: 0;
      }
    }
  }

 

 

그럼 이렇게, 사파리 브라우저에서만 LET'S GO! 라는 텍스트 영역이 먼저 나오고 이를 눌렀을 때 카운트가 시작된다!