JavaScript 안드로이드 아이폰 구분

WebVIew기반의 앱을 만들다보면 Android 와 IOS를 구분해야하는 일이 생긴다.

 

웹으로 접속했을 때 앱을 다운받을 수 있도록 유도하는 마케팅을 위해

 

원링크, 딥링크 등의 개념이나 Appflyers의 제로플랜 등을 찾아볼 수도 있지만,

 

자바스크립트로 기기를 구분하여 해당 앱스토어로 링크로 연결될 수 있는 로직을 찾아보았다. 

 

 

자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent라는 객체를 사용하여

Android와 IOS를 구분할 수 있다.

 

다음은 User-Agent를 통해 얻어낸 Android, IOS 각 기기의 정보이다.

---

Android
Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Mobile Safari/537.36

 

IOS
Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

---

안드로이드에서는 Android, 애플에서는 iPhone이라는 문자열을 가지고 있는것을 볼 수 있다.

이걸 통해서 아이폰과 안드로이드폰을 구분할 수 있다.

 

checkMobile() {
  const mobileType = navigator.userAgent.toLowerCase();
 
  if (mobileType.indexOf('android') > -1) {
    return window.open("https://play.google.com/store/apps/details?id=가고싶은 앱", "_blank");
  }
  else if (mobileType.indexOf('iphone') > -1 || mobileType.indexOf('ipad') > -1 || mobileType.indexOf('ipod') > -1) {
    return window.open("https://apps.apple.com/kr/app/id가고싶은 앱", "_blank");
  }
  else {
    return // "해당 마켓에서 앱을 검색해주세요!" 나는 예외처리를 하였다..
  }
};

 

userAgent에 android나 iphone/ipad/ipod 문자열에 따라

 

해당 앱스토어 다운링크를 연결해주는 로직을 간단히 구성해보았고 실제 기기에 따라 잘 작동하는 걸 확인 🙂