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


142

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

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

myapp://

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

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

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


1
이것은 모든 iOS 버전에서 계속 변경됩니다. iOS9는 모든 것을 다시 깨뜨 렸습니다. 이 문제를 해결 하기 위해 branch.io 와 같은 서비스를 사용하는 것이 좋습니다 . 지점 링크 서비스의 일부를 구축하는 데 도움을 주었으며 현재 6000 가지가 넘는 리디렉션 리디렉션 사례를 처리합니다.
Alex Austin

1
당신의 필요는 이메일에서 앱으로 연결 링크의 경우 2017 년, 당신은 오히려 내 대답을 살펴해야합니다 stackoverflow.com/questions/13044805/...
세바스티앙 Lorber

답변:


198

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

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

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

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

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

비슷한 질문 :


20
현재 iOS 6.1.2에서는 webapp 모드에서만 작동하는 것 같습니다. 브라우저에서 직접 앱을 사용하는 경우 예상대로 외부 앱이 열리지 만 시간 초과가 발생하고 브라우저가 리디렉션됩니다.
Mika Tuupola

4
앱이 설치되지 않은 경우 추악한 '페이지를 찾을 수 없음'경고가 발생합니다. 어쨌든 우리는 그것을 억제 할 수 있습니다
Akshat Agarwal

3
@AkshatAgarwal, '페이지를 찾을 수 없음 경고'를 억제하는 코드 작성 방법에 대해 자세히
설명해 주시겠습니까

2
이제 Android와 iOS에서이를 구현하는 새로운 방법이 있습니다. 에서 봐 안드로이드 앱 링크아이폰 OS 유니버설 링크
maledr53

1
앱을 열고 브라우저를 앱 스토어 / 플레이 스토어로 리디렉션합니다. 이것을 막기위한 방법 / 해킹?
Sujeet Kumar

157

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

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://";

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


2
이 솔루션은 다른 솔루션보다 훨씬 낫습니다. 50시에 시간을 늘려야했습니다
Magico

1
iOS 7에서 실패한 것에 대한 내 의견은 거짓입니다 .100ms를 몇 초로 늘려야했습니다 (실제로 짧을 필요는 없습니다).
devios1

itunes.apple.com/appdir 대신 단계를 저장하고 (http 리디렉션을 기다리지 않음) 앱 스토어 URL 스킴에 직접 연결하십시오. 예 : itms : //itunes.apple.com/kr/app/yelp/id284910350
Justin

ios 앱에서 잘 작동합니다. 동일한 코드가 Android 앱에서 동시에 두 URL로 리디렉션됩니다. 앱을 열고 Play 스토어를 위해 Android를 사용하셨습니까?
Mehul Dudhat

6
이렇게하면 내 앱과 앱 스토어가 모두 50에서 일관되게 열립니다. iOS 12
Josh Wolff

27

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

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

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

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


2
그러나 사용자가 설치하지 않은 경우 앱 배너가 표시되지 않습니다
TomSawyer

유니버설 링크 또는 스마트 배너는 나에게 적합하지 않습니다. 다른 앱에 대한 여러 기본 앱 링크가 필요합니다. 각각 Check IF가 설치되어 있으면이를 실행하십시오. 그렇지 않으면 상점으로 이동하십시오. 또한 범용 링크를 위해 소유권 파일을 업로드 할 도메인을 제어 할 수 없습니다. 따라서 두 가지 옵션이 모두 제외됩니다. 순수한 자바 스크립트 솔루션이 필요합니다.
FranticRock 2016 년

16

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

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

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

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

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


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

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

9

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

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


이것을 추가했지만 앱을 설치 한 후에도 Appstore로 리디렉션됩니다.
Qasim

9

이 답변 에서 @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>

2

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

두 개의 버튼으로 페이지를 여는 특정 웹 사이트 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>

요구 사항에 이러한 유형의 코드가 필요하지만 링크를 배치 할 수 없습니다. 요구 사항 : app1이 설치되어 있으면 링크 1로 이동하고 그렇지 않으면 링크 2로 이동하십시오. 누군가 도와주세요?
SFDC_Learner 7

사용자 1st가 웹을 선택하는 경우 앱을 설치할 때 쿠키를 설정 해제해야합니다.
Charlie Reitzel

1

몇 가지 답변을 컴파일 한 후 다음 코드를 작성했습니다. 나를 놀라게 한 것은 타이머가 PC (Chrome, FF) 또는 Android Chrome에서 고정 되지 않는다는 것입니다 . 트리거는 백그라운드에서 작동했으며 가시성 검사는 신뢰할 수있는 유일한 정보였습니다.

var timestamp             = new Date().getTime();
var timerDelay              = 5000;
var processingBuffer  = 2000;

var redirect = function(url) {
  //window.location = url;
  log('ts: ' + timestamp + '; redirecting to: ' + url);
}
var isPageHidden = function() {
    var browserSpecificProps = {hidden:1, mozHidden:1, msHidden:1, webkitHidden:1};
    for (var p in browserSpecificProps) {
        if(typeof document[p] !== "undefined"){
        return document[p];
      }
    }
    return false; // actually inconclusive, assuming not
}
var elapsedMoreTimeThanTimerSet = function(){
    var elapsed = new Date().getTime() - timestamp;
  log('elapsed: ' + elapsed);
  return timerDelay + processingBuffer < elapsed;
}
var redirectToFallbackIfBrowserStillActive = function() {
  var elapsedMore = elapsedMoreTimeThanTimerSet();
  log('hidden:' + isPageHidden() +'; time: '+ elapsedMore);
  if (isPageHidden() || elapsedMore) {
    log('not redirecting');
  }else{
    redirect('appStoreUrl');
  }
}
var log = function(msg){
    document.getElementById('log').innerHTML += msg + "<br>";
}

setTimeout(redirectToFallbackIfBrowserStillActive, timerDelay);
redirect('nativeApp://');

JS 피들


-2

날짜 솔루션은 다른 솔루션보다 훨씬 낫습니다 .Twitter 예와 같이 시간을 50으로 늘려야했습니다.

//on click or your event handler..
var twMessage = "Your Message to share";
var now = new Date().valueOf();
setTimeout(function () {
   if (new Date().valueOf() - now > 100) return;
   var twitterUrl = "https://twitter.com/share?text="+twMessage;
   window.open(twitterUrl, '_blank');
}, 50);
window.location = "twitter://post?message="+twMessage;

Mobile IOS Safari의 유일한 문제는 기기에 앱을 설치하지 않았을 때이므로 Safari는 새 URL을 열 때 자동 종료하라는 경고를 표시합니다. 어쨌든 좋은 해결책입니다!


1
@AkshatAgarwal 이것은 7 일 후 게시 된 alastair와 동일한 솔루션이기 때문에
albanx

-5

이 내용을 모두 읽지는 않았지만 iframe을 사용하고 "my app : // whatever"에 소스를 추가했을 수 있습니다.

그런 다음 페이지의 설정된 간격이 404 이상인지 정기적으로 확인하십시오.

Ajax 호출을 사용할 수도 있습니다. 404 응답이면 앱이 설치되지 않은 것입니다.


이것은 깨어 난 해결책이 아닙니다.
Andrey M.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.