YouTube 및지도와 같은 iPhone 앱에 http + 도메인 기반 URL 체계를 등록 할 수 있습니까?

223

iOS에 앱이 휴대 전화에 설치 될 때마다 내 앱의 URL (예 : http://martijnthe.nl )을 내 앱 에서 열고 , 그렇지 않은 경우에는 모바일 사파리를 사용하고 싶습니다.

이것에 대한 고유 한 프로토콜 접미사를 만들어 Info.plist에 등록하는 것이 가능하지만 앱이 설치되지 않은 경우 Mobile Safari에서 오류가 발생합니다.

해결 방법은 무엇입니까?

한 가지 아이디어 :

1) 데스크탑 브라우저에서 열리는 http : // URL을 사용하고 브라우저를 통해 서비스를 렌더링하십시오.

2) User-Agent를 확인하고 Mobile Safari 인 경우 myprotocol : // URL을 열어 (시도) iPhone 앱을 열고 시도가 실패 할 경우 앱 다운로드를 위해 Mobile iTunes를 엽니 다.

이것이 작동하는지 확실하지 않습니다 ... 제안? 감사!

iphone ios url

— 마틴 테
소스

4

NYC 지하철에는 Boingo의 Wi-Fi가 있으며, 추천 응용 프로그램을 다운로드하면 Wi-Fi에 무료로 액세스 할 수 있습니다. 다운로드하면 Safari로 돌아가 브라우저가 설치되었는지 감지 한 다음 액세스 권한을 부여합니다. 어떻게되는지 아세요?

— TommyG

2

범용 링크는 이제 오류 메시지없이이 사용 사례를 지원합니다. 도메인 및 앱을 구성하는 방법은 다음과 같습니다. blog.branch.io/…

— Alex Austin

243

이 작업을 수행하는 가장 방해가 적은 방법은 다음과 같습니다.

사용자 에이전트가 iPhone / iPod Touch의 에이전트인지 확인하십시오
appInstalled쿠키 확인
쿠키가 존재하고 true로 설정된 경우로 설정 window.location하십시오 your-uri://(또는 서버 리디렉션을 수행하십시오).
쿠키가 존재하지 않으면 "사이트 이름에 iPhone 응용 프로그램이 있다는 것을 알고 있습니까?" "예, 이미 알고 있습니다", "아니요, 시도하고 싶습니다", "나를 내버려 두십시오"버튼이있는 모달.
1. "Yep"버튼은 쿠키를 true로 설정하고 your-uri://
2. "Nope"버튼은 " http://itunes.com/apps/yourappname "으로 리디렉션되어 장치에서 App Store가 열립니다.
3. "나를 내버려두기"버튼은 쿠키를 false로 설정하고 모달을 닫습니다.

내가 가지고 놀았지만 약간 어색한 것을 발견 한 다른 옵션은 Javascript에서 다음을 수행하는 것입니다.

setTimeout(function() {
  window.location = "http://itunes.com/apps/yourappname";
}, 25);

// If "custom-uri://" is registered the app will launch immediately and your
// timer won't fire. If it's not set, you'll get an ugly "Cannot Open Page"
// dialogue prior to the App Store application launching
window.location = "custom-uri://";

— 나단 데 브리스
소스

16

훌륭한 솔루션. 대체가 다른 응용 프로그램 인 경우 오류를 표시하지 않고 즉시 로드됩니다 . 따라서 itunes.com으로 돌아 가지 않고 팝업 오류를 피하기 위해 itms : //phobos.apple.com / ...을 사용하십시오!

— jb.

47

문제점 : window.location="custom-uri://성공하면 폴백 제한 시간이 종료되지 않습니다. 사용자가 앱에서 브라우저로 돌아 왔을 때 타이머는 여전히 존재하며 앱 스토어 링크를 시작합니다. 이것은 나쁜 사용자 경험입니다.

— JoJo

5

쿠키는 # ios6에 샌드 박스로 표시되어 있으므로 다른 쿠키에서 응용 프로그램에서 설정 한 쿠키에 액세스 할 수 없습니다. (예 : App WebUI 및 Safari Mobile)

— Olivier Amblet 2018 년

2

누구나 사용자가 브라우저로 돌아올 때 원래 시간 초과가 발생하지 않도록하는 방법을 찾으십니까? (JoJo가 언급 한

— 불쾌한

2

JoJo가 언급 한 문제점을 해결하려면 사용자가 링크를 클릭 한 후 "많은 시간"이 경과하지 않은 경우에만 시간 종료 코드를 실행하십시오. 이 솔루션보기 : stackoverflow.com/a/14751543/533420

— kkara

95

폴 백이 다른 applink 인 한 JavaScript에서이 작업을 수행 할 수 있습니다. 나단의 제안을 바탕으로 :

<html>
  <head>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

    <h2><a id="applink1" href="fb://profile/116201417">open facebook with fallback to appstore</a></h2>
    <h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2>
    <p><i>Only works on iPhone!</i></p>    

  <script type="text/javascript">

// To avoid the "protocol not supported" alert, fail must open another app.
var appstorefail = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";

function applink(fail){
    return function(){
        var clickedAt = +new Date;
        // During tests on 3g/3gs this timeout fires immediately if less than 500ms.
        setTimeout(function(){
            // To avoid failing on return to MobileSafari, ensure freshness!
            if (+new Date - clickedAt < 2000){
                window.location = fail;
            }
        }, 500);    
    };
}

document.getElementById("applink1").onclick = applink(appstorefail);
document.getElementById("applink2").onclick = applink(appstorefail);

</script>
</body>
</html>

여기에서 라이브 데모를 확인하십시오 .

— jb.
소스

7

Lee와 동의하면 더 간단한 솔루션처럼 보입니다.하지만 앱이 존재하지 않고 앱 스토어로 리디렉션되는 경우 여전히 Safari에서 오류 메시지가 표시됩니다.

— Jon

2

나는이 솔루션을 Android와 iOS 모두에 사용했습니다. 시간 초과 값을 500에서 100으로 변경하면 iOS에서 "페이지를 열 수 없음"팝업 대화 상자가 표시되지 않습니다. 또한 Android의 시간 제한이 50이어야한다는 것을 알았습니다.

— Rossini

14

"itms :"대신 "itms-apps :"를 사용하면 1 개의 리디렉션이 저장되고 appstore에서 앱 페이지가 바로 열립니다.

— German Latorre 2016 년

6

@Rossini이는 설정하여 안드로이드에 내장 된 액션에 대한 인 텐트 필터를 그 특정 호스트에 응답

— jwadsack

9

앱이 설치되어 있지 않은 경우와 앱 스토어로 리디렉션하기 전에 사파리에서 "페이지를 열 수 없음"오류 메시지를 피하는 방법을 아는 사람이 있습니까?

— davidk

26

iOS 6 기기의 경우 스마트 앱 배너로 앱 홍보

— 오호
소스

12

슬프게도 Smart App Banner는 MobileWeb에서만 지원되며 UIWebviewComponent에서는 지원되지 않습니다. 따라서 귀하의 사이트가 예를 들어 Twitter 클라이언트 내에 표시되면 표시되지 않습니다.

— Olivier Amblet

24

선택한 답변이 브라우저 앱에서 작동하지만을 구현하는 비 브라우저 앱에서 작동하는 코드에 문제가 있음을 발견했습니다 UIWebView.

문제는 Twitter 앱 사용자가 Twitter 앱을 통해 내 사이트로 연결되는 링크를 클릭한다는 것 UIWebView입니다. 그런 다음 그들이 내 사이트에서 버튼을 클릭했을 때 트위터는 환상적이며 window.location사이트에 도달 할 수 있는 경우 에만 완료하려고합니다 . 따라서 발생하는 UIAlertView팝업은 계속 진행하고 두 번째 팝업없이 즉시 App Store로 리디렉션한다는 것을 나타냅니다.

내 솔루션에는 iframe이 포함됩니다. 이것은 UIAlertView단순하고 우아한 사용자 경험을 허용하는 제시를 피합니다 .

jQuery

var redirect = function (location) {
    $('body').append($('<iframe></iframe>').attr('src', location).css({
        width: 1,
        height: 1,
        position: 'absolute',
        top: 0,
        left: 0
    }));
};

setTimeout(function () {
    redirect('http://itunes.apple.com/app/id');
}, 25);

redirect('custom-uri://');

자바 스크립트

var redirect = function (location) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', location);
    iframe.setAttribute('width', '1px');
    iframe.setAttribute('height', '1px');
    iframe.setAttribute('position', 'absolute');
    iframe.setAttribute('top', '0');
    iframe.setAttribute('left', '0');
    document.documentElement.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
};

setTimeout(function () {
    redirect('http://itunes.apple.com/app/id');
}, 25);

redirect('custom-uri://');

편집하다:

iframe에 절대 위치를 추가하여 삽입 할 때 페이지 하단에 임의의 공백이 없도록하십시오.

또한 Android 에서이 접근법에 대한 필요성을 발견하지 못했습니다. 사용하면 window.location.href잘 작동합니다.

— cnotethegr8
소스

1

효과가있다!! 고마워 모든 브라우저에서 작동하는 솔루션을 마침내 찾았습니다.

— 콜레로

2

이것이 발견되면 가장 좋은 해결책입니다. 감사합니다. 더 이상 오류 팝업이 없습니다.

— confile

1

링크를 클릭 할 때이 코드를 실행하려면 링크를 클릭하면 호출되는 함수로이 코드를 래핑하는 것보다 @Tim을 사용하십시오.

— cnotethegr8

1

@ cnotethegr8 기능에 넣고 사용자 정의 URL로 리디렉션하면 훌륭하게 작동하지만 iTunes로 폴백하지는 않습니다. 여기 내 코드가 있습니다. 내가 무엇을 놓치고 있습니까?

— 팀

1

다른 사람은 iOS 9 에서이 문제를 겪었습니다. 더 이상 Safari에서 작동하지 않습니다.

— bgolson

20

iOS9에서 Apple은 마침내 특정 http://URL 을 처리하기 위해 앱을 등록 할 수있는 가능성을 발표했습니다 : Universal Links .

작동 방식에 대한 매우 대략적인 설명 :

http://앱에서 특정 도메인 (웹 URL)의 URL을 여는 데 관심이 있다고 선언 합니다.
지정된 도메인의 서버에서 서버의 도메인에서 URL을 여는 데 관심이 있다고 선언 한 앱에서 열려는 URL을 표시해야합니다.
iOS URL로드 서비스는 http://위에서 설명한대로 설정을 위해 URL 을 열려는 모든 시도를 확인하고 설치된 경우 올바른 앱을 자동으로 엽니 다. 사파리를 먼저 거치지 않고 ...

이것은 iOS에서 딥 링크를 수행하는 가장 깨끗한 방법입니다. 불행히도 iOS9 이상에서만 작동합니다 ...

— 세베린
소스

브라우저 내부에서는 작동하지 않습니다 ... imessage 또는 메모와 같은 외부에서만

— Mihey Mik

9

Nathan과 JB의 답변에 다시 빌드 :

추가 클릭없이 URL에서 앱을 시작하는 방법 링크를 클릭하는 중간 단계가 포함되지 않은 솔루션을 선호하는 경우 다음을 사용할 수 있습니다. 이 자바 스크립트를 사용하면 Django / Python에서 Httpresponse 객체를 반환 할 수있었습니다.이 앱은 설치 된 경우 앱을 성공적으로 시작하거나 시간 초과의 경우 앱 스토어를 시작합니다. 참고 iPhone 4S에서 작동하려면 시간 초과 기간을 500에서 100으로 조정해야했습니다. 상황에 맞게 테스트하고 조정하십시오.

<html>
<head>
   <meta name="viewport" content="width=device-width" />
</head>
<body>

<script type="text/javascript">

// To avoid the "protocol not supported" alert, fail must open another app.
var appstorefail = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";

var loadedAt = +new Date;
setTimeout(
  function(){
    if (+new Date - loadedAt < 2000){
      window.location = appstorefail;
    }
  }
,100);

function LaunchApp(){
  window.open("unknown://nowhere","_self");
};
LaunchApp()
</script>
</body>
</html>

— B 파
소스

9

window.location = appurl;// fb://method/call..
!window.document.webkitHidden && setTimeout(function () {
    setTimeout(function () {
    window.location = weburl; // http://itunes.apple.com/..
    }, 100);
}, 600);

document.webkitHidden 앱이 이미 호출되었고 현재 사파리 탭이 백그라운드로 이동하는지 감지하는 것입니다.이 코드는 www.baidu.com에서 가져온 것입니다.

— yan 루
소스

이 솔루션을 테스트 한 결과 이벤트가 제대로 전달되는 동안 "주소가 유효하지 않기 때문에 Safari에서이 페이지를 열 수 없습니다"라는 오류 대화 상자가 잠시 나타납니다. (순간 후에 자동 종료됩니다).

— michaelhanson

iframe을 사용 하여 문제 를로드 appurl하고 weburl해결할 수 있습니다.

— zyanlu

1

@ zyanlu : iFrame을 사용해 보았습니다. bt still safari는 같은 오류를 보이고 있습니다.

— kunjus

5

앱의 사용자 정의 구성표로 설정된 iframe웹 페이지 를 추가하면 srciOS가 자동으로 앱의 해당 위치로 리디렉션합니다. 앱이 설치되어 있지 않으면 아무 일도 일어나지 않습니다. 이를 통해 앱이 설치되어있는 경우 딥 링크하거나 설치되지 않은 경우 App Store로 리디렉션 할 수 있습니다.

예를 들어 트위터 앱이 설치되어 있고 다음 마크 업이 포함 된 웹 페이지로 이동하면 즉시 앱으로 연결됩니다.

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    </head>
    <body>
        <iframe src="twitter://" width="0" height="0"></iframe>
        <p>Website content.</p>
    </body>
</html>

앱이 설치되지 않은 경우 앱 스토어로 리디렉션되는보다 철저한 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    <script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
    <script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
    <script>
      (function ($, MobileEsp) {
        // On document ready, redirect to the App on the App store.
        $(function () {
          if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
            // Add an iframe to twitter://, and then an iframe for the app store
            // link. If the first fails to redirect to the Twitter app, the
            // second will redirect to the app on the App Store. We use jQuery
            // to add this after the document is fully loaded, so if the user
            // comes back to the browser, they see the content they expect.
            $('body').append('<iframe class="twitter-detect" src="twitter://" />')
              .append('<iframe class="twitter-detect" src="itms-apps://itunes.com/apps/twitter" />');
          }
        });
      })(jQuery, MobileEsp);
    </script>
    <style type="text/css">
      .twitter-detect {
        display: none;
      }
    </style>
    </head>
    <body>
    <p>Website content.</p>
    </body>
</html>

— q0rban
소스

첫 번째 예의 문제점은 Mobile Safari로 돌아 가면 Twitter가 시작된 경우에도 "Twitter 앱이 설치되지 않았습니다"라는 메시지가 표시된다는 것입니다. "웹 사이트 콘텐츠"를 표시하는 두 번째 예와 동일합니다. 앱이 설치된 경우 다른 작업을 수행하거나 (다른 URL을로드하거나 두 메시지 중 하나를 표시하는) 코드가 있어야합니다.

— mahboudz

1

예, @mahboudz, 텍스트를 읽으면 자동으로 앱으로 리디렉션 할 수 있음을 보여주는 간단한 예입니다.

— q0rban

그런 다음 실제 웹 사이트 내용을 보여주는 더 철저한 예를 따릅니다. "Twitter 앱이 설치되어 있지 않습니다"라는 문구가 명확 해지면 삭제할 수 있습니다.

— q0rban

IOS 6은 여전히 페이지가 있기 때문에 잘못된 URL을 열 수 없습니다 수 팝업 디스플레이의

— 안드레이 Shender

@AndreiShender,이 글을 쓰는 시점의 iOS 사용 통계는 다음과 같습니다. monosnap.com/image/8eXUcpEUi8fm94DiMZIdiIp4xUNaln.png iOS 8 : 72 %, iOS 7 : 25 %, 이전 버전 : 3 %

— q0rban

4

해결책이 있습니다.

흐림 및 초점을 사용하여 부울 위치 설정

//see if our window is active
window.isActive = true;
$(window).focus(function() { this.isActive = true; });
$(window).blur(function() { this.isActive = false; });

이와 같은 것을 호출하는 jquery 클릭 핸들러로 링크를 바인딩하십시오.

function startMyApp(){
  document.location = 'fb://';

  setTimeout( function(){
    if (window.isActive) {
        document.location = 'http://facebook.com';
    }
  }, 1000);
}

앱이 열리면 창에 포커스가 없어지고 타이머가 종료됩니다. 그렇지 않으면 우리는 아무것도 얻지 못하고 일반적인 페이스 북 URL을로드합니다.

— 데인 맥컬레이
소스

제안 해 주셔서 감사합니다. "외부 응용 프로그램 시작"대화 상자가 흐림 효과로 플래그를 비활성화하기에 충분하다는 문제에 직면하고 있습니다. 앱이 설치되지 않은 경우에도 (예 : 데스크탑에서 iPhone 앱을 시작하는 링크를 클릭 할 때) 발생합니다. 아이디어?

— fluxon

2

내가 아는 한 전체 OS가 http:+ 도메인 URL을 이해하도록 할 수는 없습니다 . 새 구성표 만 등록 할 수 있습니다 ( x-darkslide:내 앱에서 사용 ). 앱이 설치되어 있으면 Mobile Safari가 앱을 올바르게 시작합니다.

그러나 "여전히 여기에서 iTunes를 통해 앱을 다운로드하려면이 링크를 클릭하십시오."로 앱이 설치되지 않은 경우를 처리해야합니다. 귀하의 웹 페이지에서.

— 프레이저 슈 파이어
소스

2

이것은 더 이상 정확하지 : iOS9 최근 안드로이드 버전 당신은 확실히 청취 할 응용 프로그램을 등록 할 수 있습니다 httpURL을

— 세브린

0

User-Agent를 확인하고 Mobile Safari 인 경우 myprotocol : // URL을 열어 (시도)하여 iPhone 앱을 열고 시도가 실패 할 경우 앱 다운로드를 위해 Mobile iTunes를 열도록합니다.

이것은 나에게 합리적인 접근 방식으로 들리지만, 두 번째 수단으로 모바일 아이튠즈를 열 수 있다고 생각하지 않습니다. 앱 또는 iTunes로 리디렉션 중 하나를 선택해야한다고 생각합니다.

즉, myprotocol : //로 리디렉션하고 앱이 휴대 전화에없는 경우 iTunes로 리디렉션 할 수있는 두 번째 기회가 없습니다.

먼저 (iphone에 최적화 된) 랜딩 페이지로 리디렉션하고 사용자에게 앱을 클릭하거나 앱이없는 경우 iTunes를 가져 오는 옵션을 제공 할 수 있습니까? 그러나 올바른 작업을 수행하려면 사용자에게 의존해야합니다. (편집 : 쿠키를 처음으로 설정하도록 설정할 수는 있지만?)

— Frankodwyer
소스

1

그건 틀렸어요. 페이지를 열 수 없다는 오류가 표시되면 (앱이 설치되지 않음) JS가 여전히 실행됩니다. 따라서 다른 대체 솔루션으로 리디렉션 할 수 있습니다.

— Erik

0

팝업 문제를 해결하기 위해 Apple이이 문제를 해결할 방법이 있다는 것을 알게되었습니다.

실제로이 링크 를 클릭 하면 응용 프로그램을 설치 한 경우 해당 응용 프로그램으로 다시 라우팅됩니다. 그렇지 않으면 팝업없이 웹 페이지로 리디렉션됩니다.

— 티티 네스
소스

3

나는 그 링크가 어떻게 작동하는지에 대해 깊이 파고 들었고, 내가 얻을 수있는 최선은 그것이 JavaScript 솔루션이 아니라는 것입니다. Apple은 사용자 정의 프로토콜이 필요하지 않고 대신 URL 문자열과 일치하는 특수 URL 처리기를 앱에 등록한 것으로 보입니다. 귀하가 보내는 링크는 303으로 바로 리디렉션 됩니다 . 이 링크를 이메일로 자신에게 보내면 링크를 클릭하면 AppStore 앱이 설치되어있는 경우 직접 표시됩니다.

— Casey

매우 흥미로운. 당신이 맞습니다 : 클릭하면 AppStore 앱이 설치됩니다. 그러나 "휴일"까지 일부 매개 변수를 삭제하면 Safari 내에 표시됩니다. 애플은 특별한 URL 체계를 등록 할 수 있습니다 ...

— Titignes

@Titignes, 앱이나 웹 페이지를 여는 방법에 대해 자세히 설명해 주시겠습니까? 이러한 URL을 작성하는 패턴은 무엇입니까?

— Andrei Shender 님