모바일 웹에서 앱 호출하기
종종 여러가지 이유로 모바일 웹에서 앱을 호출하고 싶을때가 있습니다.
보통 어떻게 하시나요?
아마도 앱이 있으면 앱을 실행하고 그렇지 않으면 앱스토어로 이동하도록 custom URI-scheme을 사용하시고 있을 것 같은데요. 아이폰과 안드로이드에서 각각 몇가지 문제가 있어서 아마도 사용하실때 곤란함을 느끼실거라고 생각됩니다.
그래서 모바일 웹에서 앱 호출시에 알아두어야 할 사항을 간략히 정리해보았습니다.
아이폰
아이폰에서는 custom URI-scheme에 timeout을 사용하는 방식이 잘 알려져 있습니다.
function web2app_iOS() {
setTimeout(function () {
moveToStore();
}, 25);
launchApp();
}
우선 앱을 실행해보고 앱이 실행되지 않으면 마켓으로 이동하는 방식으로, 앱 실행시에는 스토어 이동이 취소되고, 그렇지 않은 경우에는 스토어로 이동하도록 타이머를 이용하는 방법입니다.
하지만 가끔 스토어로 이동후에도 timer가 취소되지 않고, 앱이 없을때 뜨는 시스템 얼럿이 뜬다는 단점이 있습니다.
그래도 현재, 앱을 실행하고 앱이 없는 경우 스토어로 이동시킬 수 있는 유일한 방법입니다 :D
안드로이드
반면 안드로이드에는 두가지 방법이 있습니다.
1. iframe을 embedding하면서 custom URI-scheme을 사용하는 방식
아이폰과 유사한 방식이지만 custom URI-scheme을 실행할때 iframe을 사용하고, 앱 실행 후 다시 웹으로 돌아왔을때의 시간차를 이용한 방식입니다.
function web2app_android_scheme(launchURI) {
var clickedAt = new Date().getTime();
setTimeout(function () {
var now = new Date().getTime();
if (isPageVisible() && now - clickedAt < 2000) {
moveToStore();
}
}, 1000);
var iframe = createHiddenIframe();
iframe.src = launchURI;
}
보통 위와 같은 방식을 사용하고, 크롬을 제외한 대부분의 브라우저에서 잘 동작합니다.
2. intent-based URI를 사용하는 방식
모바일 크롬 25버전부터는 iframe을 embedding 하는 방식이 동작하지 않습니다.
구글에서는 iframe을 embedding하여 custom URI-scheme을 쓰는 방식 대신 intent-based URI를 사용하도록 하고 있습니다.
킷캣부터는 웹뷰도 크롬기반으로 동작하고, 제조사들도 기본 브라우저를 크롬기반으로 개발하는 추세이니 intent-based URI 방식의 활용도가 점점 더 높아질 것으로 보입니다.
function web2app_android_intent(launchURI) {
top.location.href = launchURI;
}
한가지 단점이 있다면 플레이 마켓 이동시 앱의 최종 타겟 링크가 아닌 중간목록으로 연결된다는 점입니다 -_-;;
* intent-based URI의 syntax는 아래에서 확인할 수 있습니다.
https://developers.google.com/chrome/mobile/docs/intents
현재 안드로이드에서 모바일 파이어폭스와 오페라의 경우는 intent-based URI를 지원하지 않습니다. 크로미움을 기반으로 하는 오페라의 경우도 마찬가지 입니다.
때문에 다소 복잡하더라도 각각의 기기와 브라우저를 고려하여 그에 맞는 방법을 선택해서 사용하도록 주의를 기울여야 할 것 같습니다.