ionic5 + android + vue.js OS 확인 방법 (userAgent)

기존 vue.js 웹페이지를 ionic5 cordova android 환경에서 구동하면, os check가 잘 되지 않더군요. 아래 코드는 기존에 os 확인을 위해 사용하던 vue.js 자바스크립트 코드입니다.

if (navigator.userAgent.toLowerCase().indexOf('android') > -1) {

    this.$store.commit(system.SET_OS_NAME, 'ANDROID');

} else {

    this.$store.commit(system.SET_OS_NAME, 'WINDOWS');

}

console.log(navigator.userAgent);

위 javascript 소스 코드를 윈도우10 64비트 AVD, 크롬, 갤럭시노트10 등 3가지 환경에서 실행하면 아래처럼 2가지 결과가 나옵니다.

1. Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Mobile Safari/537.36

2. Mozilla/5.0 (Linux; Android 10; Android SDK built for x86 Build/QSR1.191030.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.185 Mobile Safari/537.36

제가 원하는 건, 한 벌의 소스 코드가 윈도우10과 안드로이드 2가지 os에서 돌아가는 것인데요. 어찌된 일인지 윈도우에서 소스를 실행하건, 안드로이드 환경에서 실행하건, navigator.userAgent에는 Linux란 값이 들어가 있네요. 내공이 부족해 원인을 100% 정확하게 판단할 수 없는 게 안타깝네요.

그래도 소스 코드가 실행되는 환경이 안드로이드인지, 윈도우인지 확인할 방법은 있습니다.

navigator의 platform을 사용하면 됩니다.

platform: "Linux i686" "win32"

platform 값을 사용하면, 안드로이드 환경에선 Linux xxxx가 담겨있고, 윈도우 환경에선 winXX가 담겨있습니다.

구글링하면 대부분 맨 위 코드처럼 navigator.userAgent 활용 방법이 나오는데, 저는 사용하지 못했습니다. 정확한 원인은 모르겠으나, Linux란 값이 윈도우10에서도 리턴되니 사용할 수 없죠.

결론적으로 제 프로젝트는 이렇습니다.

1. vue.js + 일렉트론 + 윈도우10

2. vue.js + 아이오닉 + 안드로이드10

이 두 환경을 한벌의 소스 코드로 지원할 때, OS 확인은 navigator.platform 값을 이용해야 합니다.