[javascript] 딥링크 (Deeplink)

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

모바일 웹에서 서핑을 하다보면 아래와 같이

앱으로 보기, 앱 열기, 앱 이용하기 등등 앱으로 연결하기 위한 버튼을 보신 경우가 많을텐데요 !

레이어 팝업이나 배너, 이벤트 페이지 등등 많은 곳에서 앱을 홍보하기 위해 사용합니다.

딥링크 (Deeplink)

딥링크란 모바일 환경의 웹 또는 다른 앱에서 URL을 클릭했을 때 앱을 실행시키고 특정 페이지로 이동하도록 하는 기능이다. 웹에서 딥링크를 클릭 했을 때 앱이 설치되어 있는 경우 앱을 바로 실행시키거나 웹에서 딥링크를 클릭 했을 때 앱이 설치되어 있지 않은 경우 플레이스토어 혹은 앱스토어의 앱 상세페이지로 연결하기위해 사용한다.

딥링크의 3가지 방식

딥링크는 URI Scheme, App Link, Universal Link의 3가지 표준 기술 유형이 있다. 모두 딥링크 기능을 수행하지만, 딥링크 설정 방식 및 개발 주체에 따라 구분한다.

URI Scheme: 앱에 URI scheme 값을 등록하여 딥링크 사용
App Link: 안드로이드 제공 - 도메인 주소를 이용한 딥링크 사용
유니버셜 링크(Universal Link): iOS 제공 - 도메인 주소를 이용한 딥링크 사용

1. URI Scheme

딥링크의 가장 초기형태로 URI scheme을 앱에 정의하는 방식으로 사용한다. scheme 값은 앱 개발 시 자체적으로 제약없이 설정이 가능하기 때문에, 고유한 딥링크를 점유할 수 있다. 예를 들어 트위터 앱을 오픈하고자 한다면 twitter://라는 scheme값을 이용하게 된다.

URI scheme 방식의 구성

Scheme://Path

Scheme = 앱을 특정
Path = 앱 내 페이지를 특정

앱의 수가 증하가면서 앱의 scheme 값이 중복되는 경우가 발생했다. 앱 개발자가 scheme을 자유롭게 설정할 수 있어 고유한 URI를 점유하기 어려워졌기 때문이다. Schema가 중복되는 경우, 한 개를 제외한 나머지 딥링크는 하이재킹 되어 유실될 수 있다. Schrme 뿐만 아니라 path 까지 동일한 주소를 사용한다면, Android에서는 딥링크로 오픈할 앱 선택창이 노출되고, iOS는 가장 마지막에 설치한 앱이 자동으로 열린다.

2. App Link, Universal Link

App Link는 Android, Universal Link는 iOS에서 제공하는 딥링크로 OS에 앱에 대한 도메인 주소를 등록하여 소유권을 증명한다. 하지만 유니버셜 링크와 앱링크가 모든 앱에서 오픈을 지원하는 것이 아니여서 아직까지는 완전하지 않다고 할 수 있다. 앱링크는 구글에서 만든 앱에서만 동작하고, 유니버셜 링크는 애플에서 만든 앱 이외에는 정상적으로 동작하지 않는다.

Deeplink 구현하기

① 유저가 모바일(android, iOS), 태블릿, pc 중 어떤 기기로 접근했는지 알아야 한다.

② 유저가 pc를 사용 중이라면, 웹 브라우저로 이동한다.

③ 모바일에 앱이 설치되어있다면 앱으로 이동한다.

④ 모바일에 앱이 설치되어있지 않다면 마켓으로 이동한다.

→ 일종의 트릭으로 setTimeout을 걸어 지정한 시간 뒤에 앱이 실행되지 않는다면 마켓으로 이동하는 스크립트가 실행된다.

var launchAppUrl = 'twitter://twitter'; // 앱 스키마
var timer;	// 타이머
var schInterval; 
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.search('android') > -1;
var isIOS = !isAndroid && (/iphone|ipad|ipod/i.test(userAgent));
var os;

function mo_chk(){		
	var mobile = (/iphone|ipad|ipod|android/i.test(navigator.userAgent.toLowerCase()));	 

	if (mobile) {
		var userAgent = navigator.userAgent.toLowerCase();
		if (userAgent.search("android") > -1){
			return os = "android";
		}else if ((userAgent.search("iphone") > -1) || (userAgent.search("ipod") > -1) || (userAgent.search("ipad") > -1)){
			return os = "ios";
		}else{
			return os = "otehr";
		}
	} else {
		return os = "pc";		
	}
}	

mo_chk();

if(os == "pc"){
	location.href = '웹주소 입력';
}

function participate(){
	// 인터벌, 타이머 삭제
	function clearTimer(){
		clearInterval(schInterval);
		clearTimeout(timer);
	}
    
	// 인터벌 마다 동작할 기능
	function intervalSch(){
		// 매 인터벌 마다 웹뷰가 활성화 인지 체크
		if(document.webkitHidden || document.hidden){ // 웹뷰 비활성화
			clearTimer(); // 앱이 설치되어있을 경우 타이머 제거
		}else{	// 웹뷰 활성화
			console.log("타이머 동작");
		}
	}

	// 앱 실행(iOS인 경우)
	location.href = launchAppUrl;

	// 앱이 설치 되어있는지 체크
	schInterval = setInterval(intervalSch, 500);

	timer = setTimeout(function(){
		if(isAndroid){						
			location.href ="https://play.google.com/store/apps/details?id=com.twitter.android&hl=ko";							  						
		}else if(isIOS){							
			location.href ="https://apps.apple.com/kr/app/twitter/id1482454543";	
		}
		clearInterval(schInterval);
	}, 2000);
}