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초 이내에서 이동하도록 처리하는 게 좋겠다.


저작자 표시 비영리 변경 금지
신고

카테고리

분류 전체보기 (659)
About me. (6)
Daylogs (624)
비공개 (0)
영어공부 (0)
My works - 추억 (29)