모바일 기기의 여부 체크 오류

갤럭시폴드2 앱 다운 가능 여부 체크 오류

지난번 모바일 기기를 벗어나 맥이고 싶어했던 아이패드에 이어 새로운 유형의 문제가 나타났다. userAgent로 구분 짓는 것은 좋지 않은걸 알지만, 모든 기기에서 제대로 된 동작을 할 수 없어서 어쩔 수 없이 사용하다보니 이런 일도 있다.

navigator.userAgent를 확인해서 모바일 여부, 안드로이드 아이폰 여부, 접속 브라우저 등을 판별해서 PWA 다운로드 가능한 지 체크하고 있다. 안드로이드인 경우 다운로드 버튼을 만들 수 있어서, 다운로드가 가능한 경우에만 버튼이 활성화 된다. 현재 다운로드 가능한 조건은 아이폰 아이패드인 경우 가능, 안드로이드는 크롬브라우저 접속시 가능, window mac 등의 모바일기기 아닌건 불가능이다.

갤럭시폴드2 라는 접는 스마트폰인데 펼치면 폭이 왠만한 태블릿처럼 크다. 그래서 그런지 펼쳤을 때 이 아이는 탈모바일을 하여 더 큰 무언가로 나아가려고 했던 것 같다. userAgent에서 사라진 ‘mobile’ 자아를 찾아줘야했다. 해당 기기를 가까이 본 적도 없고 그래서 너무 생소했지만 찾아보니 오래전부터 있었던 문제였다.

급하게 해결은 일단 폰을 접어서 브라우저를 종료후 재시작 해보시라고 했다. 브라우저를 접은 상태에서는 ‘mobile’이 있다고 했다. 그리고 접거나 펼치는 과정이 있으면 바뀌기 전 userAgent가 유지되는 듯 했다. 다행히 응급처치로 해결됐다.

이렇게 급한 것은 넘어가고 기존에 브라우저 체크하던 부분을 살펴봤다.

‘mobile’이 있을 때 true를 반환하고 여기서 안걸리면 다 false를 뱉는다. 그래서 가능한 조건을 하나 더 추가했다. ‘mobile’이 없어도 ‘Android’가 있으면 일단 ok.

else if (
  navigator.userAgent.match(/chrome/i) &&
  navigator.userAgent.match(/Android/i)
) {
  return true
}

애플 기기인 경우 아이패드와 맥을 구분하는게 문제였다. userAgent의 문자열로는 구분할 수가 없었기 때문이다. 하지만 ‘Android’ 문자열은 윈도우pc에는 나타날 거 같지 않아서, 해당 문자열이 있는 경우 안드로이드 폰이거나 갤러시 탭 일 것이라 판단했다.

참고했던 링크
웹뷰 링크 공유하기 웹페이지로 이동 문제
겔럭시 폴드 2 · Issue #46 · naver/egjs-agent