Translate

[Android] Web 에서 Application 설치여부 체크 및 Custom URL로 이동시키기

날짜:



Android Chrome version 25 이상부터는 Chrome의 변경된 정책(Link)으로 인해
기존에 사용하던 아래와 같은 방법(iframe 형식)을 사용할 수 없게 되었다. 

<script>
 function checkApplicationInstall() {
  document.checkframe.location = "myapp://check_install";
  setTimeout("checkApplicationInstall_callback()", 1000);
 }
 
 function checkApplicationInstall_callback() {
  try {
   var s = document.checkframe.document.body.innerHTML;
   // 어플리케이션 설치되어있음
  } catch (e) {
   // 어플리케이션 설치 안 되어있음
  }
 }
</script>


<input type="button" value="check app install" onclick="checkApplicationInstall()"/><br/>
<iframe id="checkframe" name="checkframe" src="check.html" width="1" height="1"></iframe>



안드로이드에서 사용하라는 아래의 방법은 다음과 같은 문제가 있다.
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"> Take a QR code </a>
Application 이 설치되어 있지 않은경우 무조건 Google Play Store 로 이동하게 된다.
1004lucifer
위와 같은 문제로 인해 아래와 같은 불편함이 따른다.
1004lucifer
1. Google Play Store 에 올라와 있지 않고 다른 스토어에 있는 Application 을 다운로드 안내 할 수 없다. (Custom URL)
2. Store 에 올리지 않은 프로그램을 APK 형식으로 배포를 할 수 없다.
   (어쩔 수 없이 APK로 배포를 해야 하는 경우가 있을 수 있다.)








1004lucifer
며칠의 고난끝에 다음과 같은 방법을 생각해냈다.

index.html 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        var schemeUrl = 'kakaolink://';
        var redirectUrl = 'http://www.kakao.com/';

        window.closeWindow = (function(){
            var isWindowRef = null;
            setInterval(function() {
                // 새로열린 창이 닫혔을 때 다시 버튼 클릭 시 동작이 실행이 되어야 하므로 해당 객체를 삭제
                isWindowRef = (isWindowRef && isWindowRef.window) ? isWindowRef : null;
            }, 1000);

            return function (windowRef, time) {
                //  새로열린 Window에서 백버튼 누를 시 해당 함수가 계속 호출되는 무한루프 방지
                if (isWindowRef == null) {
                    isWindowRef = windowRef;

                    setTimeout(function() {
                        try {
                            // Custom Scheme 이 실행되지 않고 잘못된 페이지가 노출된 상태에서
                            // 아래의 코드 실행 시 Security Error 발생
                            windowRef.location == 'undefind';

                            // Custom Scheme 이 실행되었다면 앱 종료 후 해당 tab 을 닫는다.
                            windowRef.close();

                        } catch (e) {
                            windowRef.location.href = redirectUrl;
                        }
                    }, time);
                    return true;
                }
            }
        })();

        function runApp() {

//            Check Chrome for Android Version is V25
//            https://developer.chrome.com/multidevice/android/intents - Android Chrome Version
//            http://en.wikipedia.org/wiki/Google_Chrome_for_Android - Chrome WebKit Version
            if (parseFloat(navigator.userAgent.match(/WebKit\/[^\ ]*/)[0].toLowerCase().substr(7)) > 537.22){
                var openWindow = window.open('./openWindow.html#' + schemeUrl);

            } else {
                $('<iframe></iframe>', {
                    src: schemeUrl,
                    width: 0,
                    height: 0,
                    id: 'checkframe'
                }).css('border', '0').appendTo('body');

                setTimeout(function() {
                    if($("#checkframe").contents().find("body").html() == undefined){
                        window.location.href = redirectUrl;
                    }
                }, 1000);
            }
        }
    </script>
</head>
<body>

<a href="javascript:runApp();">앱 실행하기</a>

</body>
</html>


openWindow.html 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <title></title>
    <script type="text/javascript">
        var valid = parent.window.opener.closeWindow(this, 50);
        if (valid) {
            window.location.href = document.location.href.split('#')[1];
        }
    </script>
</head>
<body>
</body>
</html>



다른 방법이나 의견 환영합니다. ^^




댓글

댓글 쓰기