[Javascript] Web Mobile 에서 App실행 (앱링크)
2019. 5. 10. 17:14ㆍJAVASCRIPT
Web Mobile 에서 APP 을 실행 할수 있다.
이를 앱링크 or 딥링크 라고 한다.
ex) 인스타 그램의 예를 들어
<a href="instagram://media" target="blank">
와 같이 작성을 하면 핸드폰 내에 설치되어져있는 인스타그랩 앱이 실행이 된다.
이슈 1 . Android 의 경우와 IOS 의 경우 앱 실행 경로가 다르다.
[Android 의 경우]
<a href="intent://instagram.com/#Intent;package=com.instagram.android;scheme=https;end" target="blank">
[IOS 의 경우]
<a href="instagram://media" target="blank">
이슈 2. 해당 앱이 나의 핸드폰에 설치가 되어져있지 않는경우
Android 의 경우 위에 적힌 경로를 그대로 사용하면 본인의 핸드폰에 인스타그램이 설치가 되어져있는 경우 인스타 그램이 실행 되어지고 만약 설치가 되어져있지 않다면 레이어 팝업 형태로 구글 앱스토어의 설치 화면이 뜨게 되어서 별다른 이슈가 없다.
IOS 의 경우 위에 적힌 경로를 그대로 사용하면 본인의 핸드폰에 인스타그램이 설치가 되어져있는 경우 인스타 그램이 실행 되지만 만약 설치가 되어져있지 않다면 아무런 일도 발생하지 않아서 사용자들이 이것이 제대로 실행이 되엇는가를 알 방법이 없다. 그래서 IOS 의 경우 별도의 개발이 필요하다.
<script>
function ios_go_url(){
var url = "instagram://media";
setTimeout( function() {
window.open("https://itunes.apple.com/kr/app/instagram/id389801252?mt=8");
}, 1000);
location.href = url;
}
</script>
소스를 살펴보면 셋 타임아웃 1000을 걸어서 1초 이후에 아무일도 발생을 하지 않는다면 ios 앱스토어로 이동하게 소스를 작성하면 된다.
전체 소스를 보면 다음과 같다.
<script>
function mo_chk(){
var os;
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";
}
}
function action_app_instagram(android_url , ios_url , ios_appstore_url){
var result_mo_chk = mo_chk();
if(result_mo_chk!="pc"){
if(result_mo_chk == "ios"){
setTimeout( function() {
window.open(ios_appstore_url);
}, 1500);
location.href = ios_url;
}else{
location.href = android_url;
}
}
}
</script>
<html>
<body>
<span onclick="action_app_instagram('intent://instagram.com/#Intent;package=com.instagram.android;scheme=https;end', 'instagram://media', 'https://itunes.apple.com/kr/app/instagram/id389801252?mt=8')">
Instagram App 실행
</span>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| [Javascript] 이메일 정규식 사용 형식 체크 (1) | 2020.10.05 |
|---|---|
| [Javascript] 파라미터 값 받기 (0) | 2019.05.21 |
| [Javascript] 클립보드 복사 (0) | 2019.05.13 |
| [Javascript] KAKAO 공유하기 기능 (0) | 2019.05.10 |
| [javascript] SELECT 옵션 의 첫번째 INDEX 선택 (0) | 2019.04.04 |