티스토리 뷰

아래 본문 내용으로는 안드로이드에서 네이버, 크롬 등 몇몇 브라우저와 최신 기기에서 정상 작동하지 않습니다.


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~";

 

if(currentOS == "android") {

// 안드로이드는 미리 만들어둔 iframe에 

var invisible_div = document.getElementById("invisible_div");

invisible_div.innerHTML = "<iframe src=" + url + " onload="goMarket()"></iframe>";

} else if(currentOS == "ios") {

setTimeout( function() {

goMarket();

}, 1000);

 

location.href = url;

} else {

alert("안드로이드와 아이폰에서만 사용 가능");

}

 

return false;

}

 

// 마켓 이동

function goMarket() {

if(currentOS == "android") {

location.href=market_a;

} else if(currentOS == "ios") {

location.href=market_i;

} else {

/* 기타 OS일 때 */

}

}




body


 확인 버튼클릭 시 앱 인스톨 체크 함수를 실행합니다.

 div를 미리 만들어서 숨겨놓는 것이 핵심입니다. 숨기지 않으면 이후 iframe이 생성되면서 페이지에 노출됩니다.


<button class="big" onclick="return checkAppInstall()">확인</button><br>


<!-- display 속성을 두어 숨어있는 div를 미리 만들어 놓습니다. 이 div에 iframe이 생성됩니다. -->

<div id="invisible_div" style="display:none;"></div>




지금까지 앱 설치를 판별하는 방법에 대해 알아보았습니다.

마지막으로 전체 소스를 첨부합니다. 감사합니다.



detect_app_install.html




아래 페이지를 참고하여 작성하였습니다.

- http://developer.naver.com/wiki/pages/UrlScheme

- http://stackoverflow.com/questions/1005153/auto-detect-mobile-browser-via-user-agent

- http://stackoverflow.com/questions/1108693/is-it-possible-to-register-a-httpdomain-based-url-scheme-for-iphone-apps-like/1109200#1109200



댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday