모바일 웹 브라우저에서, 앱 설치 여부에 따라 마켓 또는 앱으로 이동 시키기.
일종의 브릿지 페이지..
먼저 아이폰의 경우..
간단하다!
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
'개발 > Javascript' 카테고리의 다른 글
| input type 엔터키 서브밋 되는 현상 (0) | 2017.02.14 |
|---|---|
| [jquery] Ajax로 배열 파라미터 넘길 때 인코딩 깨지는 현상 (1) | 2014.06.18 |
| [jQuery] Ajax의 흐름과 예제 (10) | 2013.06.14 |
| Flash 위에 게시판 올리는 법 (0) | 2013.04.30 |
| jqGrid] 동적으로 그리드 나타내기 (6) | 2013.04.30 |