티스토리 뷰

모바일 웹 브라우저에서, 앱 설치 여부에 따라 마켓 또는 앱으로 이동 시키기.

일종의 브릿지 페이지..



먼저 아이폰의 경우..

간단하다!


var userAgent = navigator.userAgent;

var visitedAt = (new Date()).getTime(); // 방문 시간


if (userAgent.match(/iPhone|iPad|iPod/)) {

   setTimeout(

      function() {

          if ((new Date()).getTime() - visitedAt < 2000) {

               location.href = "{마켓 주소}";

          }

       }, 500);


   setTimeout(function() { 

        location.href = "{커스텀 스킴 주소}";

    }, 0);

}


셋타임아웃을 이용해서 커스텀 스킴을 호출해보고 응답이 없으면

앱이 없다는 뜻이므로, 일정 시간 뒤에 마켓으로 이동시킨다.




안드로이드의 경우..

크롬브라우저와 기본 브라우저들에서의 동작 방식이 다르므로

분기를 해주어야 한다.



var userAgent = navigator.userAgent;


if (userAgent.match(/android/)) {

    if (userAgent.match(/Chrome/)) {

         // 안드로이드의 크롬에서는 intent만 동작하기 때문에 intent로 호출해야함

         setTimeout(function() {

              location.href = "intent://커스텀스킴주소#Intent; scheme=스킴; action=..;category=..; package=com.android.xxx; end;";

         }, 1000);

    } else {

        // 크롬 이외의 브라우저들

        setTimeout(

           function() {

              if ((new Date()).getTime() - visitedAt < 2000) {

                 location.href = "{마켓 주소}";

              }

          }, 500);


          var iframe = document.createElement('iframe');

          iframe.style.visibility = 'hidden';

          iframe.src = '{커스텀 스킴 주소}';

          document.body.appendChild(iframe);

          document.body.removeChild(iframe); // back 호출시 캐싱될 수 있으므로 제거

     }

}



크롬의 경우 인텐트 주소로 호출하면 앱설치 여부를 알아서 처리해준다.


* 참고 : 안드로이드 크롬의 경우 특정 버전부터 

커스텀주소 실행이 '버튼'을 눌러야만 동작하도록 변경되었다.

자동으로 커스텀url로 리다이렉트 시키는 것은 이전 버전에서만 지원한다.


크롬 이외의 브라우저의 경우는 iframe을 사용해서 이동시켜야 한다.

커스텀 스킴을 호출하고 없으면 마켓으로 이동시킨다는 개념은 IOS와 같다.

다만 스킴을 호출하는 것을 iframe을 통해서 해야한다.

보이지 않는 iframe을 이용해서.




작년 11월 중순 쯤 페이스북에 안드로이드의 경우만 

외부링크를 클릭할 때 페이스북의 인앱브라우저를 호출하도록 바뀌었다.


테스트를 해보니까 


안드로이드 OS 킷캣 아래 버전(4.4.2 미만)

앱이 설치된 경우 : 잘 동작함 (커스텀 스킴 호출 O)

앱 미설치 경우 : 에러


안드로이드 OS 킷캣 버전(4.4.2)

앱이 설치된 경우 : 에러 (커스텀 스킴 호출 X)

앱 미설치 경우 : 에러



페이스북이 등록하지 않은 앱인 경우 커스텀 스킴을 함부로 호출하지 않도록 바뀐 것 같다.


이를 해결하는 방법은,


1. Facebook App 에 해당 앱을 등록한다.

설정 페이지에서 안드로이드 등록하고, depp linking을 반드시 On해주어야 한다.




2. 브릿지 페이지의 <head>태그 안에 아래 정보를 추가한다.

<meta property="al:ios:url" content="example://applinks" />
<meta property="al:ios:app_store_id" content="12345" />
<meta property="al:ios:app_name" content="Example App" />

이렇게 했는데도 앱스토어로 잘 안넘어가는 경우는 아래 태그를 추가한다.


<meta property="al:web:should_fallback" content="false"> 



3. 페이스북에 캐시가 걸려있기 때문에 URL debugger를 한번 호출해줘서 캐시를 깨면

정상 작동하는 것을 볼 수 있다.


https://developers.facebook.com/tools/debug/og/object/




아래 문서들 참조

https://developers.facebook.com/docs/applinks/android?locale=ko_KR


https://developers.facebook.com/docs/applinks/add-to-content?locale=ko_KR

댓글
  • 프로필사진 sumomo 감사합니다. 참고해보고 갑니다. 2015.04.03 10:55
  • 프로필사진 QTHoney 혹시 트위터의 내부브라우저의 경우 어떻게 해야하는지 아시나요 2015.04.07 16:15 신고
  • 프로필사진 신매력 트위터 내부브라우저는 고려를 안했었는데 테스트해보니 동작 안하네요;
    브릿지가 브라우저나 디바이스 종류 따라 안되는 경우가 많아서 한번 쫙 리스트 정리해보고 방법 찾으면 글 올려야겠어요.
    2015.04.10 15:42 신고
  • 프로필사진 신매력 찾아보니까 페이스북이랑 비슷하게 App card라는걸 등록하면 되는 것 같습니다.
    https://dev.twitter.com/cards/mobile
    이런 연결을 deep linking이라는 용어로 쓰는데
    https://dev.twitter.com/cards/types/app <- 여기 deep linking 설명이 되어있구요.

    모바일 딥링킹에 대한 위키 문서도 있네요~
    http://en.wikipedia.org/wiki/Mobile_deep_linking
    2015.04.15 14:59 신고
  • 프로필사진 원환경 안녕하세요.
    개발관련업체에 있는데요.
    A라는 앱이실행된 상태에서 웹뷰영역의 버튼을 눌러 마켓의 A 앱 업데이트로 보내고 싶습니다.
    (네이티브단은 수정하지 않고 하고싶습니다.)
    가능할까요?
    2016.11.16 18:52
  • 프로필사진 직딩 안녕하세요.
    모바일 공부중인 직장인입니다.
    한가지 궁금한게 있어서 여쭤보려고 합니다.
    혹시 커스텀스킴이라고 하는게 메니페스트에 적는 호스트를 말씀하시는건가요?
    여기저기 찾아보고있는데 어렵네요 ㅠ
    2016.12.22 16:45
댓글쓰기 폼