[iphone] iPhone의 웹 페이지에서 앱이 설치되어 있는지 확인하는 방법

iPhone에 응용 프로그램이 설치되어 있지 않은 경우 iPhone을 앱 스토어로 리디렉션하는 웹 페이지, 웹 페이지를 만들고 싶습니다.하지만 iPhone에 응용 프로그램이 설치되어 있으면 응용 프로그램을 열고 싶습니다.

iPhone 응용 프로그램에서 이미 사용자 정의 URL을 구현 했으므로 다음과 같은 응용 프로그램의 URL이 있습니다.

myapp://

이 URL이 유효하지 않으면 페이지를 앱 스토어로 리디렉션하고 싶습니다. 이것이 가능합니까?

전화에 응용 프로그램이 설치되어 있지 않고 myapp : // url을 safari에 쓰면 오류 메시지 만 표시됩니다.

자바 스크립트로 추악한 해킹이 존재하더라도 실제로 알고 싶습니다.



답변

내가 아는 한 브라우저에서 앱이 설치되어 있는지 확인하십시오.

그러나 휴대 전화를 앱으로 리디렉션 할 수 있으며, 아무 일도 발생하지 않으면 다음과 같이 지정된 페이지로 휴대 전화를 리디렉션합니다.

setTimeout(function () { window.location = "https://itunes.apple.com/appdir"; }, 25);
window.location = "appname://";

두 번째 코드 행이 결과를 제공하면 첫 번째 행은 절대 실행되지 않습니다.

도움이 되었기를 바랍니다!

비슷한 질문 :


답변

허용되는 답변을 더 높이기 위해 앱을 시작한 후 브라우저를 다시 방문하는 사람들이 처리 할 수 ​​있도록 추가 코드를 추가해야 할 때가 있습니다. 그래서 나는 다음과 같이합니다 :

var now = new Date().valueOf();
setTimeout(function () {
    if (new Date().valueOf() - now > 100) return;
    window.location = "https://itunes.apple.com/appdir";
}, 25);
window.location = "appname://";

그렇게하면 코드 실행이 중단 된 경우 (예 : 앱 전환) 실행되지 않습니다.


답변

iOS Safari에는 “스마트”배너를 웹 페이지에 추가 할 수있는 기능이 있습니다.이 배너는 앱, 설치된 경우 또는 App Store에 연결됩니다.

당신은 이것을 추가 하여이 작업을 수행 meta페이지에 태그를 하면됩니다. 앱이로드 될 때 특별한 작업을 수행하려는 경우 자세한 앱 URL을 지정할 수도 있습니다.

자세한 내용은 스마트 앱 배너 가있는 Apple의 프로모션 앱에 있습니다. 페이지에 있습니다.

이 메커니즘은 쉽고 표준화 된 배너를 제시 할 수 있다는 장점이 있습니다. 단점은 모양이나 위치를 많이 제어 할 수 없다는 것입니다. 또한 Safari 이외의 브라우저에서 페이지를 볼 경우 모든 베팅이 해제됩니다.


답변

2017 년 현재 앱이 설치되어 있는지 감지 할 수있는 신뢰할 수있는 방법이없는 것 같으며 리디렉션 트릭이 모든 곳에서 작동하지 않습니다.

전자 메일에서 직접 딥 링크를해야하는 사람들 (공통)은 다음 사항에 주목할 가치가 있습니다.

  • Gmail에서 링크가 필터링되므로 appScheme : //로 이메일을 보내면 제대로 작동하지 않습니다.

  • Chrome에서 appScheme : //로 자동 리디렉션이 차단됨 : Chrome에서 리디렉션과 같은 클릭이 사용자 상호 작용과 동기화되어야한다고 생각합니다.

  • appScheme : //없이 딥 링크를 사용할 수 있으며 더 낫지 만 최신 플랫폼과 추가 설정이 필요합니다. 안드로이드 iOS


다른 사람들이 이미 이것에 대해 깊이 생각했다는 점은 주목할 가치가 있습니다. Slack이 “매직 링크”기능을 구현하는 방법을 살펴보면 다음을 알 수 있습니다.

  • 정기적 인 http 링크가 포함 된 이메일을 보냅니다 (Gmail 사용)
  • 웹 페이지에는 appScheme : // (Chrome과 연동)로 연결되는 큰 버튼이 있습니다.

답변

문제를 해결하려고 시도하는이 플러그인을 확인할 수 있습니다. missemisa 및 Alastair 등에서 설명한 것과 동일한 접근 방식을 기반으로하지만 숨겨진 iframe을 대신 사용합니다.

https://github.com/hampusohlsson/browser-deeplink


답변

이 답변 에서 @Alistair가 지적했습니다. 에서 때로는 사용자가 앱을 연 후 브라우저로 돌아갈 . 이 답변에 대한 의견자는 iOS 버전에 따라 사용되는 시간 값을 변경해야한다고 지적했습니다. 우리 팀이이 문제를 해결해야 할 때, 우리는 초기 타임 아웃 시간과 브라우저로 돌아 왔는지 여부를 알려주는 시간 값을 조정해야하며 모든 사용자와 장치에서 작동하지 않는 경우가 있음을 알게되었습니다.

브라우저로 돌아 왔는지 여부를 확인하기 위해 임의의 시차 임계 값을 사용하는 대신 “pagehide”및 “pageshow”이벤트를 감지하는 것이 좋습니다.

상황을 진단하는 데 도움이되도록 다음 웹 페이지를 개발했습니다. 주로 콘솔 로깅, 경고 또는 Web Inspector, jsfiddle.net 등의 기술을 사용하면이 작업 흐름에서 단점이 있었기 때문에 이벤트가 전개 될 때 HTML 진단이 추가됩니다. Javascript는 시간 임계 값을 사용하는 대신 “pagehide”및 “pageshow”이벤트 수를 계산하여 이벤트 발생 여부를 확인합니다. 그리고 가장 강력한 전략은 다른 사람들이보고 / 제안한 25, 50 또는 100이 아닌 1000의 초기 시간 제한을 사용하는 것이 었습니다.

이것은 로컬 서버에서 제공 될 수 있습니다 (예 : python -m SimpleHTTPServeriOS Safari에서 볼 수 있음).

이를 사용하려면 “설치된 앱 열기”또는 “앱이 설치되지 않았습니다”링크를 누르십시오. 이러한 링크로 인해지도 앱 또는 앱 스토어가 각각 열립니다. 그런 다음 Safari로 돌아가서 이벤트의 순서와 타이밍을 볼 수 있습니다.

(참고 :이 기능은 Safari에서만 작동합니다. Chrome과 같은 다른 브라우저의 경우 페이지 숨기기 / 표시 등가 이벤트에 대한 핸들러를 설치해야합니다).

업데이트 : @Mikko가 주석에서 지적했듯이 우리가 사용하는 pageshow / pagehide 이벤트는 iOS8에서 더 이상 지원되지 않습니다.

<html>
<head>
</head>
<body>
<a href="maps://" onclick="clickHandler()">Open an installed app</a>
<br/><br/>
<a href="xmapsx://" onclick="clickHandler()">App not installed</a>
<br/>

<script>

var hideShowCount = 0 ;
window.addEventListener("pagehide", function() {
    hideShowCount++ ;
    showEventTime('pagehide') ;
});

window.addEventListener("pageshow", function() {
    hideShowCount++ ;
    showEventTime('pageshow') ;
});

function clickHandler(){
    var hideShowCountAtClick = hideShowCount ;
    showEventTime('click') ;
    setTimeout(function () {
               showEventTime('timeout function '+(hideShowCount-hideShowCountAtClick)+' hide/show events') ;
               if (hideShowCount == hideShowCountAtClick){
                    // app is not installed, go to App Store
                    window.location = 'http://itunes.apple.com/app' ;
               }
            }, 1000);
}

function currentTime()
{
    return Date.now()/1000 ;
}

function showEventTime(event){
    var time = currentTime() ;
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(document.createTextNode(time+' '+event));
}
</script>
</body>
</html>


답변

나는 이와 같은 일을해야하는데 나는 다음 해결책으로 끝났다.

두 개의 버튼으로 페이지를 여는 특정 웹 사이트 URL이 있습니다

1) 버튼 하나는 웹 사이트로 이동

2) 버튼 2 응용 프로그램 (iphone / android phone / tablet)으로 이동하면 앱이 설치되어 있지 않은 경우 여기에서 기본 위치로 돌아갈 수 있습니다 (다른 URL 또는 앱 스토어와 같은)

3) 쿠키는 사용자 선택을 기억합니다

<head>
<title>Mobile Router Example </title>


<script type="text/javascript">
    function set_cookie(name,value)
    {
       // js code to write cookie
    }
    function read_cookie(name) {
       // jsCode to read cookie
    }

    function goToApp(appLocation) {
        setTimeout(function() {
            window.location = appLocation;
              //this is a fallback if the app is not installed. Could direct to an app store or a website telling user how to get app


        }, 25);
        window.location = "custom-uri://AppShouldListenForThis";
    }

    function goToWeb(webLocation) {
        window.location = webLocation;
    }

    if (readCookie('appLinkIgnoreWeb') == 'true' ) {
        goToWeb('http://somewebsite');

    }
    else if (readCookie('appLinkIgnoreApp') == 'true') {
        goToApp('http://fallbackLocation');
    }



</script>
</head>
<body>


<div class="iphone_table_padding">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <!-- INTRO -->
            <span class="iphone_copy_intro">Check out our new app or go to website</span>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_btn_padding">

                <!-- GET IPHONE APP BTN -->
                <table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreApp',document.getElementById('chkDontShow').checked);goToApp('http://getappfallback')">
                    <tr>
                        <td class="iphone_btn_on_left">&nbsp;</td>
                        <td class="iphone_btn_on_mid">
                            <span class="iphone_copy_btn">
                                Get The Mobile Applications
                            </span>
                        </td>
                        <td class="iphone_btn_on_right">&nbsp;</td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_btn_padding">

                <table border="0" cellspacing="0" cellpadding="0" class="iphone_btn"  onclick="set_cookie('appLinkIgnoreWeb',document.getElementById('chkDontShow').checked);goToWeb('http://www.website.com')">
                    <tr>
                        <td class="iphone_btn_left">&nbsp;</td>
                        <td class="iphone_btn_mid">
                            <span class="iphone_copy_btn">
                                Visit Website.com
                            </span>
                        </td>
                        <td class="iphone_btn_right">&nbsp;</td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_chk_padding">

                <!-- CHECK BOX -->
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><input type="checkbox" id="chkDontShow" /></td>
                        <td>
                            <span class="iphone_copy_chk">
                                <label for="chkDontShow">&nbsp;Don&rsquo;t show this screen again.</label>
                            </span>
                        </td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
</table>

</div>

</body>
</html>