웹에서 url scheme 로 앱 호출시 앱 설치 여부 감지 방법

 

안녕하세요. 루루개발자입니다.

최근 회사에서 진행중인 프로젝트 중에 웹에서 앱을 호출해야 하는 상황이 있었습니다.

 

웹에서 앱을 호출하기 위해서는 앱의 url scheme 를 다음과 같은 예시처럼 웹에서 호출해주어야 합니다.

 

<a href="sampleApp://action?var1=a&var2=b">앱 호출</a>

 

<span onclick="location.href = 'sampleApp://action?var1=a&var2=b'">앱 호출</span>

 

 

앱이 사용자의 휴대폰에 설치되어 있다면 해당하는 앱이 정상적으로 호출되겠지만, 문제는 앱이 설치되어 있지 않을 때의 이벤트를 감지해야 하는데 마땅한 방법이 떠오르지 않았습니다.

 

그러던 도중 문득 event listener 중 focus 와 blur 를 활용해 비슷한(?) 기능을 구현할 수 있을 것 같았고 다음과 같이 코드를 작성하였습니다.

class UrlSchemeCaller {
  windowState = 'focus';
    
  constructor() {
    this.init();
  }
    
  init() {
    window.addEventListener('focus', () => {
      this.windowState = 'focus';
    });
    
    window.addEventListener('blur', () => {
      this.windowState = 'blur';
    });
  }
  
  call(urlScheme, notInstalledCallback) {
    location.href = urlScheme;
      
    setTimeout(() => {
      if (this.windowState === 'focus') {
        // 앱이 설치되어 있지 않은 상태
        notInstalledCallback();
      } 
    }, 300);
  }
}

window.urlSchemeCaller = new UrlSchemeCaller();

 

원리는 다음과 같습니다.

 

만약 앱이 설치되어 있는 상태라면, url scheme 호출시 모바일 웹브라우저가 백그라운드로 이동되고 그 위에 호출한 앱이 표시가 될겁니다. 이 때 브라우저에서 window 에는 blur 이벤트가 발생하게 되고 위의 코드로 인해 urlSchemeCaller 객체의 windowState 에는 'blur' 가 저장될 겁니다.

 

하지만 만약 앱이 설치되어 있지 않은 상태라면 url scheme 호출시 아무런 반응이 없을 것이고 window 의 blur 이벤트도 발생하지 않을 것이기 때문에 urlSchemeCaller 객체의 windowState 는 그대로 'focus' 상태일 것입니다.

 

이점을 이용해 urlScheme 호출 후에 setTimeout 으로 일정 시간 이후에 windowState 값이 어떤 값이냐에 따라 설치가 되었는지 아니면 설치가 되지 않은 상태인지 판단을 하는 것입니다. (windowState 가 blur 이면 앱이 호출되었다 판단하여 앱이 설치되었다고 처리, 그리고 windowState 가 focus 이면 앱이 호출되지 않았다고 판단하여 앱이 설치되지 않았다고 처리)

 

위 javascript class 코드를 파일로 첨부합니다.

 

url-scheme-caller.js

0.00MB

 

위 js 파일을 script 태그로 가져오신 뒤, 아래 처럼 바로 사용하시면 됩니다.

urlSchemeCaller.call('sampleApp://action', () => { 
  console.log('이 함수는 앱이 설치 되어 있지 않을 때 호출되는 함수입니다.');
  // other logic...
});

 

이상입니다.

감사합니다.