티스토리 뷰
iOS: 유니버셜 링크 적용하기 에서 계속...
발생일: 2016.06.15
키워드: 유니버셜 링크, universal link, smart banner, 스마트 배너, apple-app-site-association
문제:
웹페이지에서 '앱에서 보기' 버튼을 클릭했을 때, 유니버셜 링크로 앱을 띄우려고 한다.
해결책:
웹페이지에서 '앱에서 보기'를 구현하려고 한다면,
가장 명확한 방법은 iOS에서 제공하는 스마트 앱 배너를 제공하는 것이다.
하지만, 스마트 앱 배너는 디자인 변경이 어려워서, 우리 팀에서는 별도의 버튼을 만들어 구현했다.
참고로, 동일 도메인에서는 유니버셜 링크가 동작하지 않는다.
예를 들어, 유니버셜 링크로 등록되어 있는 경로가 https://example.com/app 라고 가정하면,
해당 웹사이트(주소가 https://example.com 인 웹사이트)에서는 https://example.com/app 인 링크를 클릭해도 유니버셜 링크가 동작하지 않는다.
이런 경우엔 유니버셜 링크 용도로 별도의 도메인을 마련하는 방법으로 우회할 수 있다.
예를 들어, https://ul-example.com 같이 유니버셜 링크용으로 별도로 도메인을 가져가도록 말이다.
도메인을 별도로 준비했다면, 아래처럼 앵커 태그에 유니버셜 링크를 할당하면 앱을 열 수 있다.
<a href="https://ul-example.com">앱에서 보기</a>
논의:
- 유니버셜 링크는 iOS 9부터 제공한다.
구 버전에 대한 분기 처리가 필요하다면, UserAgent 에 OS 버전이 포함되어 있으므로 이 값을 활용하면 된다.
- 버튼 클릭 시, 비동기 작업을 수행 후 location.href 값을 변경해 앱을 여는 경우에 유니버셜 링크가 올바르게 동작하지 않을 수 있다.
내가 직접 테스트하진 않았지만, 건너자리 S가 테스트해본 내용은 아래와 같다.
- 이벤트가 발생한 이벤트 룹에서 동기로 실행하는 경우 올바르게 동작함
- timeout 을 사용하는 경우, 1초가 초과되는 경우 앱으로 전환되지 않음
- timeout을 중첩으로 정의하는 경우 앱으로 전환되지 않음
- interval인 경우 두 번째 콜부터는 앱으로 전환되지 않음
아무래도 브라우저와 OS의 구현에 따른 것 같은데, 이 기준에 대해 명확히 정리된 문서는 찾지 못했다.
- 이후에 나도 동일한 내용을 테스트해봤다.
테스트 코드는 아래와 같고, iOS 9.3.1, 크롬/사파리에서 테스트해봤는데, 결과는 거의 동일했다.
function move() {
location.href = UNIVERSAL_LINK_URL; // 유니버셜 링크 URL은 302로 마켓 주소를 응답
}
$('.sync').on('click', function () {
move();
}); // 정상 이동
$('.async').on('click', function () {
setTimeout(function () {
move();
}, 0);
}); // 정상 이동
$('.async_after_1sec').on('click', function () {
setTimeout(function () {
move();
}, 1000);
}); // 정상 이동
$('.async_after_1_5sec').on('click', function () {
setTimeout(function () {
move();
}, 1500);
}); // 정상 이동
$('.async_after_2sec').on('click', function () {
setTimeout(function () {
move();
}, 2000);
}); // 마켓으로 이동
$('.async_nested_timeout').on('click', function () {
setTimeout(function () {
setTimeout(function () {
move();
}, 0);
}, 0);
}); // 마켓으로 이동
가능하면 1.5초 이내에서 이동하도록 처리하는 게 좋겠다.
반응형
댓글
공지사항