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 값을 이용해야 합니다.


댓글(0)

Designed by JB FACTORY