회원가입아이디/비번찾기
홈으로

Android - iOS UserAgent 구분 및 모바일웹페이지에서 앱 설치 여부 확인
7년 전
아래 본문 내용으로는 안드로이드에서 네이버, 크롬 등 몇몇 브라우저와 최신 기기에서 정상 작동하지 않습니다.

https://github.com/koreaparks/CustomSchemeManager

위 Github에 업데이트하였으니 확인하시고, 아래 본문은 참고용으로 봐주셨으면 합니다.



모바일 웹페이지에서 커스텀 스킴을 활용하여 애플리케이션의 설치 유무를 확인하고, 설치가 안되어있을 때는 플레이스토어, 앱스토어로 각각 이동하는 방법을 알아보겠습니다.


Android와 iOS의 구현상 차이점

(1) Android
div를 미리 만들어놓고 스타일 속성 display:none 으로 숨겨둡니다.
재생버튼 클릭 시 div에 iframe을 생성하여 커스텀스킴을 불러오도록 하고,
실패하면 자동으로 goMarket 함수를 불러와 마켓으로 이동합니다.

(2) iOS
iOS는 iframe이 동작하지 않는다 합니다.
그래서 타이머를 설정하고, 커스텀스킴을 불러온 후 지정한 시간(소스에서는 1초)이 지날동안 스킴처리가 안되면
마찬가지로 goMarket 함수를 타도록 하였습니다.
단, iOS는 앱 설치가 되어있지 않을 때 오류팝업이 잠깐 뜨는데 이부분은 어쩔 수 없는 것 같습니다.



script - userAgent를 얻어오기

UserAgent는 navigator.userAgent를 통해 얻어올 수 있습니다.
.toLowerCase를 통해 얻어온 스트링을 소문자로 변환하고, android와 iOS를 구분합니다.
이 과정에서 BlackBerry 등 다른 OS를 특정지을 수도 있습니다.

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

if (mobile) {
        // 유저에이전트를 불러와서 OS를 구분합니다.
        var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.search("android") > -1)
                currentOS = "android";
        else if ((userAgent.search("iphone") > -1) || (userAgent.search("ipod") > -1)
                                || (userAgent.search("ipad") > -1))
                currentOS = "ios";
        else
                currentOS = "else";
} else {
        // 모바일이 아닐 때
        currentOS = "nomobile";
}




script - 커스텀 스킴을 통한 앱 설치 유무 확인

앱설치 확인 후 Android는 iframe생성으로 스킴처리가 되었는지 판단하고, iOS는 타임아웃을 통해 스킴 처리를 확인합니다.
각각 정상 처리가 되지 않았을 때 goMarket 함수로 넘어가도록 하였는데, 함수를 따로 만드셔도 상관없습니다.

// 바로재생, 다운로드 버튼 클릭
function checkAppInstall() {
        // 앱에 설정해놓은 커스텀 스킴. 여기선 "customScheme"
        var url = "customScheme://blahblah~";
        
        if(currentOS == "android") {
                // 안드로이드는 미리 만들어둔 iframe에
                var invisible_div = document.getElementById("invisible_div");
                invisible_div.innerHTML = "<iframe src=" + url + " onload="goMarket()"></iframe>";
        } else if(currentOS == "ios") {
                setTimeout( function() {
                        goMarket();
                }, 1000);

                location.href = url;
        } else {
                alert("안드로이드와 아이폰에서만 사용 가능");
        }

        return false;
}

// 마켓 이동
function goMarket() {
        if(currentOS == "android") {
                location.href=market_a;
        } else if(currentOS == "ios") {
                location.href=market_i;
        } else {
                /* 기타 OS일 때 */
        }
}



body

확인 버튼클릭 시 앱 인스톨 체크 함수를 실행합니다.
div를 미리 만들어서 숨겨놓는 것이 핵심입니다. 숨기지 않으면 이후 iframe이 생성되면서 페이지에 노출됩니다.

<button class="big" onclick="return checkAppInstall()">확인</button><br>

<!-- display 속성을 두어 숨어있는 div를 미리 만들어 놓습니다. 이 div에 iframe이 생성됩니다. -->
<div id="invisible_div" style="display:none;"></div>



지금까지 앱 설치를 판별하는 방법에 대해 알아보았습니다.
추천추천 : 861 추천 목록
번호 제목
1,346
윈도우 서버 2019 취약점 점검 보안
1,345
윈도우 서버 2019 취약점 점검 보안 (windows server 2019)
1,344
Windows 취약점진단 보안가이드라인
1,343
Windows Admin Center를 통한 서버 관리
1,342
윈도우 서버에서 실행되는 서비스 확인
1,341
Chrome NET::ERR CERT REVOKED 해결방법
1,340
cmd 명령어 (명령 프롬프트 명령어) 모음
1,339
Windows10 특정 프로그램(OCS 2007 R2)에서 첨부파일 드래그앤드롭이 안 되는 현상
1,338
윈도우 로그, 관리 이벤트 삭제
1,337
클린 부팅
1,336
Windows 구성 요소 저장소에서 파일 손상 검사
1,335
Windows Defender 검사 기록 삭제하기
1,334
간단한 윈도우 10 정품 인증 (크랙프로그램 필요없음)
1,333
오류난 폴더 강제삭제 방법
1,332
크롬에서 플래시 항상 허용하도록 설정하기 (레지스트리) reg 파일 만들기
1,331
GPT 디스크를 MBR 디스크로 변환
1,330
MBR 디스크를 GPT 디스크로 변환
1,329
구글 검색을 200% 활용하게 해주는 검색 명령어 총정리
1,328
[Jquery] jQuery로 우클릭 방지, 드래그 방지, 선택 방지 (IE10, 파이어폭스, 크롬 확인)
1,327
php 사용자 접속IP, 브라우저정보, os정보, http, https 접속프로토콜 알아오기
1,326
[PHP] IE 브라우저 접속 검출하기
1,325
윈도우10 시스템 예약 파티션 확인 및 삭제
1,324
윈도우10 복구 파티션 삭제 방법
1,323
윈도우10 부팅지연 검은화면에서 몇분간 머무는 현상 해결방법
1,322
삼성노트북 바이오스 진입이 불가능한 경우 바이오스 재설치와 NVRAM 초기화
1,321
익스플로러(IE)의 구글 검색공급자 한글로 변경 방법
1,320
윈도우 10 기본 앱 삭제 및 복구
1,319
meta 태그 http-equiv 설정방법과 차이점
1,318
구글(Google)검색에서 고급연산자를 이용하여 많은 정보를 얻는 방법
1,317
프로그램 없이 하드디스크 복사 및 백업하기
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.