[Javascript]웹 브라우저에서 프로그램 설치 여부 확인(웹에서 앱 설치 여부 확인)

은행 사이트들의 경우 보안 프로그램을 설치 안하였을 경우, 아래와 같이 계속 설치하라는 페이지가 뜬다. 

그림 1-1. 신한은행 보안프로그램 설치 페이지

 

위 항목을 어떻게 구현 하였을까?

 

웹 브라우저로 내 PC의 OS 설치 여부를 알수 있다는 것이 의아해서 찾아 보았다. 

 

인터넷을 찾아보면

 

아래 내용 처럼 나오고 소스 코드가 나온다.

자세한 소스코드 설명이 없어서 주석을 추가하였다.

 

1. 내용

• 인터벌 함수를 이용해서 hidden 을 계속 확인한다.
• 타임아웃 함수를 이용해서 특정시간이 되면 앱이 설치 안되어있다고 판단한다.

2. 문제

• 단순참고용 정도로 사용하면 좋을거 같습니다.
• 많이 테스트 안해보았습니다.
• document.webkitHidden || document.hidden 를 이용해서 설치 여부를 확인 하는 방법 입니다.
• 크롬에서 지원하는 intent 방식을 사용하면 항상 마켓이 실행되서 체크하기 어려우니 꼭 커스텀 스킴으로 테스트 해야 합니다.

#앱스키마 
#프로그램 설치시, 프로그램에서 자동적으로 설정해둔 앱스키마 이다.
var appSchem = 'mayapp://launch?Data=abcdefg';

isMyApp();
location.href = appSchem;

function isMyApp(){
  function clearTimers(){
        clearInterval(heartbeat);
        clearTimeout(timer);
    }

    function intervalHeartbeat(){
        if(document.webkitHidden || document.hidden){
            clearTimers();
            console.log('앱이 설치 되어 있습니다.');
        }
    }
    heartbeat = setInterval(intervalHeartbeat, 200);
    var deLay = 1000;
    timer = setTimeout(function() {
        console.log('앱이 없습니다.');
    }, deLay);
}

 

 

그림 1-2. PC 레지스트리 편집기에 설정되어 있는 앱스키마

 

위 주석에서 보듯이, PC 및 다양한 환경에서 설치한 프로그램에는 레지스트리 편집기로 보면, 앱 스키마가 지정되어있다.

 

웹을 생성시 js에 프로그램마다 있는 고유한 앱스키마를 호출하여, 앱 설치 여부를 확인하면 된다.