모바일 웹에서 앱 띄우기(deepLink)

hansol yoo·2022년 12월 6일
0

What is deepLink ??

  • 모바일 웹에서 앱을 여는 기능
  • 모바일에서 특정 앱 접근 시 흔하게 볼 수 있는 기능

앱으로 보기

  • 앱이 기기에 다운로드 되어있는 경우 앱을 열어 해당 페이지를 연다.
  • 앱이 기기에 다운로드 되어있지 않은 경우 스토어 페이지로 이동한다
    • (안드로이드 → 구글플레이스토어 / 아이폰 → 앱스토어 등)

1. 딥링크(deepLink)

특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 특정 화면으로 이동시키는 기술을 딥링크라고 한다.

  • URI 스킴 방식 : 앱에 uri 스킴(scheme) 값을 등록하여 딥링크 사용
  • 앱링크(appLink) : Android 제공 - 도메인 주소를 이용한 딥링크 사용
  • 유니버셜 링크(universalLink) : Ios 제공 - 도메인 주소를 이용한 딥링크 사용

2. URI 스킴 방식

스킴(scheme)은 앱마다 등록할 수 있는 값으로 이 값으로 앱을 구분할 수 있다. 특정 스킴값을 호출하여 특정 앱을 열 수 있다.

  • Scheme://Path 요소로 구성
  • 예시) naver://main
    • Schemd : 앱을 특정
    • Path : 앱 내 페이지를 특정

사용방법

  • 안드로이드 / ios에 스킴 값을 설정한다.
  • JavaScript에서 window.location.href = (URI 스킴) 구문을 통해 이동할 수 있다.

한계(?)

  • 스킴이 중복될 수 있다. 특정앱으로 바로 이동하지 못하고 사용자가 선택을 해야 한다.
  • market:// 은 구글플레이스토어, oneStore, 삼성앱스토어 등 여러 스토어에서 함께 사용한다.

3. Android 에서 구현

iFrame 사용

A common and old technique to solve this problem is using iframe to load the deep link URL and having a delayed JavaScript to redirect to store

URI 스킴 이동과 앱스토어 이동이 모두 일어나지만 시간차를 이용해 한가지만 일어나는것처럼 보이게 하는 일종의 트릭.

  • 예시 : naver://main 으로 이동한다고 가정했을 때
    • 앱이 설치되어있는 경우 앱이 실행되어 이동하고 이후 자바스크립트는 실행되지않음
    • 앱이 설치되어있지 않은 경우 스킴을 호출하여도 아무 작업이 수행되지 않음. setTimeOut() 으로 인해 일정시간 뒤 마켓 주소로 이동하는 자바스크립트가 실행되어 앱을 설치할 수 있다.
  • 구현방법
    setTimeOut(
    	var visitedAt = (new Date()).getTime(); // 방문시간
    	
    	function(){
    		if((new Date()).getTime() - visitedAt < 2000) {
    			location.href = "{마켓 주소}"
    		}
    }, 500);
    
    var iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden'; // 보이지 않는 iframe으로 스킴을 호출
    iframe.src = '{커스텀 스킴 주소}';
    document.body.appendChild(iframe);
    document.body.removeChild(iframe);
    • 보이지 않는 iframe으로 커스텀 스킴 주소를 호출
    • 응답이 없으면 0.5초 뒤 마켓으로 이동

Chrome Intent

Since Chrome for Android version 25 and later, the above code stopped working according to Chrome documentation Fortunately, Google provides the Intent URL for a better solution

Chrome의 경우 intent URL 방식을 도입하면서부터 iframe방식을 사용할 수 없게되었다. intent URL은 앱의 설치 여부에 따른 처리를 자동으로 해주기 때문에 유용하다.

  • intent URL 동작방식
    • 앱이 설치된 경우 앱 실행
    • 앱이 설치되지 않은 경우 앱스토어 이동
  • 형식
    • intent://path/#Intent;scheme=yourapp;package=com.yourapp.example;
  • 구현방법
    setTimeout(function() {
                  location.href = 
    							"intent://커스텀스킴주소#Intent; scheme=스킴; action=..;category=..; package=com.android.xxx; end;";
             }, 1000);

4. Ios 에서 구현

Ios에서는 안드로이드에서 iframe 방식과 동일한 트릭을 사용하여 구현 가능

  • 구현방법
    setTimeout(
          function() {
              if ((new Date()).getTime() - visitedAt < 2000) {
                   location.href = "{마켓 주소}";
              }
           }, 500);
    
    setTimeout(function() { 
            location.href = "{커스텀 스킴 주소}";
        }, 0);

0개의 댓글