Javascript - IOS 앱 설치 여부 확인 후 마켓 이동

 현재 모바일의 백앤드로 재직하고 있는 와 중에 순수 웹 페이지에서 intent를 통해 앱으로 이동시키고 앱으로 이동하지 않을 경우 마켓으로 이동시켜 달라는 일을 받았습니다. 안드로이드는 그냥 intent를 통해 앱이 없으면 바로 마켓으로 가게 되는데 IOS는 그냥 에러만 띡 나오고 이동하질 않았습니다. 그래서 이것 저것 검색하면서 다 따라해 봤는데 이렇게 딱 맞다한 걸 못 찾아서 여러번 실험한 결과 이 방법이 그나마 제일 정확하여 여기에 남겨 둡니다.

 일단 userAgent를 통해 접속한 유저가 사용하는 기종이 IOS인지 안드로이드인지 판별한 후에 IOS일 경우에는 사파리가 아니면 움직임이 없을 경우 앱스토어로 보냈고, 사파리일 경우에는 해당 방법이 먹지 않아 따로 3초 정도 기다린 이후에 blur를 통해 페이지를 떠나지 않았을 경우에는 앱이 없는 것으로 판단하여 앱스토어로 보내게 했습니다.

 해보니 IOS는 제약이 참 많은 거 같습니다. 좀 더 javascript에 지원을 많이 해주면 좋을텐데, 폐쇄적인 IOS 정책이 한 몫하고 있지 않나 싶습니다.

 

<script>
var isPage = true;
 
function getMobileInfo() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }
 
    if (/android|Android/.test(userAgent)) {
        return "Android";
    }
 
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }
 
    return "";
}
 
function goApp() {
    var device = getMobileInfo();
    var url = "";
 
    if (device == "iOS") {
        url = "appname://gate?";
    } else {
        url = "intent://gete?#Intent;scheme=grow;package=kr.co.hunet.mobile.grow;end";
    }
 
    var now = new Date().valueOf();
 
    var userAgent = navigator.userAgent.toLowerCase();
    if (device == "iOS" && userAgent.indexOf("safari") == -1) {
        setTimeout(function() {
            if (new Date().valueOf() - now > 100) return;
            if (device == "iOS") {
                window.location.href = "https://itunes.apple.com/kr/app/appid";
            }
        }, 50);
    }
 
    window.location.href = url;
 
    if (device == "iOS" && userAgent.indexOf("safari") > -1 && isPage) {
        /* 사파리일 경우 3초 기다렸다가 이동 시킴, 너무 빠르면 onblur가 안 먹힘 */
        setTimeout(function(){
            if (isPage) window.location.href = "https://itunes.apple.com/kr/app/appid";
        }, 3000);
    }
}
 
window.onblur = function() {
    isPage = false;
};
 
window.onfocus = function() {
    isPage = true;
};
</script>