아래 본문 내용으로는 안드로이드에서 네이버, 크롬 등 몇몇 브라우저와 최신 기기에서 정상 작동하지 않습니다.
https://github.com/koreaparks/CustomSchemeManager
위 Github에 업데이트하였으니 확인하시고, 아래 본문은 참고용으로 봐주셨으면 합니다.
모바일 웹페이지에서 커스텀 스킴을 활용하여 애플리케이션의 설치 유무를 확인하고, 설치가 안되어있을 때는 플레이스토어, 앱스토어로 각각 이동하는 방법을 알아보겠습니다.
Android와 iOS의 구현상 차이점
(1) Android
div를 미리 만들어놓고 스타일 속성 display:none 으로 숨겨둡니다.
재생버튼 클릭 시 div에 iframe을 생성하여 커스텀스킴을 불러오도록 하고,
실패하면 자동으로 goMarket 함수를 불러와 마켓으로 이동합니다.
(2) iOS
iOS는 iframe이 동작하지 않는다 합니다.
그래서 타이머를 설정하고, 커스텀스킴을 불러온 후 지정한 시간(소스에서는 1초)이 지날동안 스킴처리가 안되면
마찬가지로 goMarket 함수를 타도록 하였습니다.
단, iOS는 앱 설치가 되어있지 않을 때 오류팝업이 잠깐 뜨는데 이부분은 어쩔 수 없는 것 같습니다.
script - userAgent를 얻어오기
UserAgent는 navigator.userAgent를 통해 얻어올 수 있습니다.
.toLowerCase를 통해 얻어온 스트링을 소문자로 변환하고, android와 iOS를 구분합니다.
이 과정에서 BlackBerry 등 다른 OS를 특정지을 수도 있습니다.
var currentOS;
var mobile = (/iphone|ipad|ipod|android/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
// 유저에이전트를 불러와서 OS를 구분합니다.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.search("android") > -1)
currentOS = "android";
else if ((userAgent.search("iphone") > -1) || (userAgent.search("ipod") > -1)
|| (userAgent.search("ipad") > -1))
currentOS = "ios";
else
currentOS = "else";
} else {
// 모바일이 아닐 때
currentOS = "nomobile";
}
script - 커스텀 스킴을 통한 앱 설치 유무 확인
앱설치 확인 후 Android는 iframe생성으로 스킴처리가 되었는지 판단하고, iOS는 타임아웃을 통해 스킴 처리를 확인합니다.
각각 정상 처리가 되지 않았을 때 goMarket 함수로 넘어가도록 하였는데, 함수를 따로 만드셔도 상관없습니다.
// 바로재생, 다운로드 버튼 클릭
function checkAppInstall() {
// 앱에 설정해놓은 커스텀 스킴. 여기선 "customScheme"
var url = "customScheme://blahblah~";
추천 : 