투케이2K

567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행 본문

JavaScript

567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행

투케이2K 2026. 7. 6. 20:02
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / Deep Link / Scheme


- 사전) 👉 document.visibilityState 간략 설명 : 

  >> document.visibilityState 는 현재 웹 페이지가 사용자에게 보이는 상태인지 여부를 알려주는 Document API 입니다.

  >> document.visibilityState 가 주로 사용 되는 경우

    - 사용자가 다른 탭으로 이동했는지 감지
    - 브라우저가 백그라운드 상태인지 감지
    - 동영상 자동 일시정지
    - 실시간 데이터 조회 중지
    - 성능 최적화 및 배터리 절약

  >> document.visibilityState 상태 값
  
    - "visible" : 페이지가 사용자에게 보이는 상태
    - "hidden" : 탭이 백그라운드에 있거나 최소화된 상태


- 사전) 👉 딥링크 (Deep Link) 간략 설명 : 

  >> 딥링크 (Deep Link) 는 앱이나 웹사이트의 특정 화면 또는 특정 콘텐츠로 직접 이동시키는 링크를 의미합니다.

  >> 일반 링크가 서비스의 메인 페이지로 이동하는 것이라면, 딥링크는 사용자가 원하는 화면까지 바로 이동시켜 줍니다.

  >> 웹 딥링크 : 웹에서는 특정 URL 자체가 딥링크입니다.

    - https://github.com/microsoft/typescript 접속 즉시 특정 저장소 페이지로 이동합니다.

  >> 모바일 앱 딥링크 : 앱에서는 보통 Custom Scheme 또는 Universal Link(App Link)를 사용합니다.

    - Custom Scheme : myapp://product/12345
    - Universal Link (iOS) : https://abc.com/product/12345
    - Android App Link : https://abc.com/product/12345

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [jquery : CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>







    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


    // -----------------------------------------------------------------
    // ✅ [Window.onload 웹 브라우저 로드 완료]
    // -----------------------------------------------------------------
    window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

            // ------------------------------------------------
            // 🟦 기능 구현 간단 로직 설명
            // ------------------------------------------------ 
            /*
            1. UserAgent 값을 체크해 AOS , IOS 인 경우 해당 로직 처리 수행
            2. [특정 앱] 실행을 위한 AOS , IOS 스키마 호출 수행
            3. [특정 앱] 앱이 설치 되지 않거나, 문제가 발생해 앱 실행이 안된 경우 -> [마켓 이동] 스키마 호출 수행
            4. [마켓 앱] 앱이 설치 되지 않거나, 문제가 발생해 앱 실행이 안된 경우 -> [HTTP] URL 주소 호출을 통해서 마켓 브라우저 열기 수행
            */
            // ------------------------------------------------ 


            // ------------------------------------------------
            // 🟦 Android 및 IOS 스키마 명칭 지정
            // ------------------------------------------------ 
            const aos_Scheme = `googlechrome://`; // 앱 실행 위함
            const aos_Store_Package_Name = `com.android.chrome`; // 마켓 이동 처리 위함
            const aos_Store_Scheme = `market://details?id=${aos_Store_Package_Name}`; // 마켓 앱 실행 스키마
            const aos_Store_Url = `https://play.google.com/store/apps/details?id=${aos_Store_Package_Name}&hl=ko`; // 마켓 이동 http 주소

            const ios_Scheme = `googlechrome://`; // 앱 실행 위함
            const ios_AppId = `id535886823`; // 마켓 이동 처리 위함
            const ios_Store_Scheme = `itms-apps://itunes.apple.com/app/${ios_AppId}`; // 마켓 앱 실행 스키마
            const ios_Store_Url = `https://apps.apple.com/kr/app/${ios_AppId}?l=ko&ls=1`; // 마켓 이동 http 주소


            // ------------------------------------------------
            // 🟦 Android 및 IOS 접속 환경 확인 및 앱 구동 코드
            // ------------------------------------------------
            const appRunStart = function (){
                
                try {

                    console.log("[WEB] 현재 웹 페이지가 사용자에게 보이는 상태 체크 : ", document.visibilityState);

                    var userAgentLower = navigator.userAgent.toLocaleLowerCase();

                    if (userAgentLower.search( "android" ) > -1){ // Android
                        location.href = aos_Scheme; // 앱 링크 스키마 이동

                        setTimeout(() => {
                            const visibilityStateCheck_Scheme = document.visibilityState;

                            console.log("[AOS] 현재 웹 페이지가 사용자에게 보이는 상태 체크 : ", visibilityStateCheck_Scheme, " / App Run Store Scheme : ", aos_Store_Scheme);

                            if(visibilityStateCheck_Scheme === "visible") { // 👉 [마켓-스키마 실행] 앱 실행 문제 발생 및 실패 시 마켓으로 페이지 이동 처리 대응
                                location.href = aos_Store_Scheme; // 마켓 스키마 열기

                                setTimeout(() => { // 👉 앱 실행 문제 발생 및 실패 시 마켓으로 페이지 이동 처리 대응
                                    const visibilityStateCheck_Url = document.visibilityState;

                                    console.log("[AOS] 현재 웹 페이지가 사용자에게 보이는 상태 체크 : ", visibilityStateCheck_Url, " / App Run Store Url : ", aos_Store_Url);

                                    if(visibilityStateCheck_Url === "visible") { // 👉 앱 실행 문제 발생 및 실패 시 마켓으로 페이지 이동 처리 대응
                                        location.href = aos_Store_Url; // 마켓 URL 열기
                                    }

                                }, 1500);

                            }

                        }, 1500);
                    }
                    else if (userAgentLower.search( "ios" ) > -1){ // Ios
                        location.href = aos_Scheme; // 앱 링크 스키마 이동

                        setTimeout(() => {
                            const visibilityStateCheck_Scheme = document.visibilityState;

                            console.log("[IOS] 현재 웹 페이지가 사용자에게 보이는 상태 체크 : ", visibilityStateCheck_Scheme, " / App Run Store Scheme : ", ios_Store_Scheme);

                            if(visibilityStateCheck_Scheme === "visible") { // 👉 [마켓-스키마 실행] 앱 실행 문제 발생 및 실패 시 마켓으로 페이지 이동 처리 대응
                                location.href = ios_Store_Scheme; // 마켓 스키마 열기

                                setTimeout(() => { // 👉 앱 실행 문제 발생 및 실패 시 마켓으로 페이지 이동 처리 대응
                                    const visibilityStateCheck_Url = document.visibilityState;

                                    console.log("[IOS] 현재 웹 페이지가 사용자에게 보이는 상태 체크 : ", visibilityStateCheck_Url, " / App Run Store Url : ", ios_Store_Url);

                                    if(visibilityStateCheck_Url === "visible") { // 👉 앱 실행 문제 발생 및 실패 시 마켓으로 페이지 이동 처리 대응
                                        location.href = ios_Store_Url; // 마켓 URL 열기
                                    }

                                }, 1500);

                            }

                        }, 1500);
                    }
                    else { // Else
                        console.error("[ELSE] PC 환경에서는 앱 실행을 할 수 없습니다 ..");
                    }

                }
                catch(exception){
                    console.error('appRunStart : ', exception);
                }

            };



            // ------------------------------------------------
            // 🟦 버튼 클릭 시 앱 이동 수행 호출
            // ------------------------------------------------
            const btn = document.getElementById('appLinkRun');

            btn.addEventListener('click', async() => {

                appRunStart(); // 👉 앱 실행 및 마켓 이동 처리

            });
            
        }
        catch (exception) {
            console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
        }

    }; 
      
    </script>


</head>


<body>

    <!-- 이벤트를 동작 시키기 위한 버튼 생성 영역 -->     
    <button id="appLinkRun">앱 링크 스키마 실행</button>


</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 8. (TWOK/UTIL) [Android/Java] C_MoveApp - 외부 앱 실행 , 스키마 실행 , 앱 설치 여부 , 마켓 이동 , 크롬 기반 외부 링크 이동

https://kkh0977.tistory.com/1629

https://blog.naver.com/kkh0977/222678185676?trackingCode=blog_bloghome_searchlist


▶️ 21. (TWOK/UTIL) [Ios/Swift] C_MoveApp - 외부 앱 실행 , 스키마 실행 , 앱 설치 여부 , 마켓 이동 , 사파리 기반 외부 링크 이동

https://kkh0977.tistory.com/1649

https://blog.naver.com/kkh0977/222683056507?trackingCode=blog_bloghome_searchlist


▶️ 190. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀 , 워드 스키마 앱 실행 수행

https://kkh0977.tistory.com/8857

https://blog.naver.com/kkh0977/224297134775?trackingCode=blog_bloghome_searchlist


▶️ 117. (javascript/자바스크립트) 안드로이드 : 카카오 인앱 브라우저에서 크롬 브라우저로 이동 실시

https://kkh0977.tistory.com/1188

https://blog.naver.com/kkh0977/222492295110?trackingCode=blog_bloghome_searchlist


▶️ 254. (AndroidStudio/android/java) 웹뷰 intent scheme 스키마 딥링크 확인 및 외부앱 수행 실시 - shouldOverrideUrlLoading

https://kkh0977.tistory.com/1491

https://blog.naver.com/kkh0977/222629678783?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

569. (javaScript) 자바스크립트 동적 js 파일 추가 및 외부 js 파일 로드 시 타임스탬프 추가해 캐시 초기화 수행 - QueryString 쿼리 스트링 추가  (0) 2026.07.09
568. (javaScript) 자바스크립트 document.addEventListener visibilitychange 이벤트 사용해 실시간 브라우저 표시 및 보이는 상태 확인  (0) 2026.07.07
566. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 Custom Table Style 커스텀 그리드 형식 표 테이블 스타일 지정 및 기본 이벤트 확인  (0) 2026.07.02
565. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 기본 배열 데이터 Grid 그리드 형식 표 그리기 및 페이징 처리 수행  (0) 2026.06.30
564. (javaScript) 자바스크립트 new Function 사용해 동적 string 문자열 소스 코드 작성 후 함수 실행 - 파라미터 첨부  (0) 2026.06.29
'JavaScript' Related Articles more
Comments