Navigator

모바일웹 개발 시 안드로이드/아이폰을 구분해야하는 경우가 생겨서 방법을 찾아보았다.

사용자가 접속한 에이전트 정보는 Navigator 인터페이스가 제공하고, 우리는 window.navigator로 접근할 수 있다.

Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.
https://developer.mozilla.org/ko/docs/Web/API/Navigator

Navigator의 많은 속성 중에서 우리가 사용할 속성은 Navigator.userAgent이다. MDN 문서에 보면 userAgent 말고 userAgentData도 있는데 둘의 차이는

• Navigator.userAgent: 현재 브라우저의 사용자 에이전트 문자열을 반환합니다.

• Navigator.userAgentData: NavigatorUAData 객체를 반환합니다. 사용자의 브라우저와 운영체제에 대한 정보를 제공합니다.

Navigator.userAgent는 문자열을 반환하고, Navigator.userAgentData는 객체를 반환한다.

만약 pc로 접속 중이라면, 개발자 도구 콘솔을 열어서 navigator.userAgent 혹은 navigator.userAgentData를 입력하면 자신이 접속하고 있는 브라우저와 운영체제 정보를 확인할 수 있을 것이다.

안드로이드/아이폰 구분하기

안드로이드/아이폰을 구분하기 위해 navigator.userAgent 문자열 값을 얻고, 그 문자열에서 android, iphone 같은 문자들이 있는지 확인하여 구분해볼 것이다.

여기서 toLowerCase()를 하는 이유는 반환되는 문자열에 대소문자가 섞여있기 때문에 소문자로 맞춰주기 위함이다.

const userAgent = navigator.userAgent.toLowerCase(); //userAgent 문자열 값 받아오기

if (userAgent.indexOf("android") > -1) {    
   //안드로이드일 때 실행할 동작
} else if (
  	userAgent.indexOf("iphone") > -1 ||
    userAgent.indexOf("ipad") > -1 || 
    userAgent.indexOf("ipod") > -1 
  ) {   	
  //IOS일 때 실행할 동작
} else {    
  //아이폰, 안드로이드가 아닐 때 실행할 동작
}

userAgent에서 반환된 문자열 안에 구분할 기기들의 문자열이 들어있는지 검사한 후에 각 기기별 실행하고 싶은 동작을 if문 안쪽에 구현하면 되겠다.