PWA install prompt 적용하기

pwa 홈페이지를 운영하다보면 문득 이런 생각이 들 때가 있다. 과연 일반 유저들이 pwa 사이트가 무엇인지 알까? 내 pwa 사이트를 앱으로 사용하는 방법을 알까? 사실은 대부분의 유저들은 모를것이다. 모바일에서 앱을 다운받으려면 해당 페이지에서 홈 화면으로 책갈피를 만들어주어야 하고, 웹에서 앱을 다운 받으려면 주소창 우측 칸에서 + 버튼을 눌러서 바탕화면에 앱을 설치해주어야 한다.

그렇다면 일반 유저들에게 내 사이트가 pwa 로 만든 사이트이고, 다운 받아서 사용하길 권유하고 싶다면 어떻게 해야할까?

우선 chrome 브라우저에서 발생시키는 beforeinstallprompt event를 참조해야한다. beforeinstallprompt event란 유저에게 당신의 웹 페이지가 다운로드 가능하다고 알려줄수 있고, 다운받을수 있게끔 도와주는 event이다.

window.addEventListener('beforeinstallprompt', function (event) {
      event.preventDefault();
      //@ts-ignore
      window.promptEvent = event;
});

우선 event가 발동되면 event 를 window.promptEvent 객체를 이용해서 참조하고 유저에게 앱 다운로드를 권장하는 interface를 화면에 띄워준다. 참고로 beforeinstallprompt는 해당 웹 페이지가 이미 다운로드 되어져 있으면 발동되지 않는다.

window.addEventListener('beforeinstallprompt', function(event) {
    event.preventDefault();
    //@ts-ignore
    window.promptEvent = event;
setVisible(true)
});

그리고 이미 앱을 다운로드 받아서 앱으로 이용하고 있는 유저에게도 다운로드 인터페이스를 띄워주면 안되기 때문에 해당 작업을 추가해준다.

window.addEventListener('beforeinstallprompt', function (event) {
      event.preventDefault();
      //@ts-ignore
      window.promptEvent = event;
if (window.matchMedia('(display-mode: standalone)').matches) {
        console.log('display-mode is standalone');
} else {
        setVisible(true)
}
});

그러면 해당 유저가 앱을 이전에 다운받지 않고 웹 플랫폼에서 웹 서비스에 접근 할때에만 다운로드를 받으라는 인터페이스를 띄워줄 수 있다.

그러면 이제 유저에게 앱을 다운받으라는 prompt를 띄워주는 함수를 만들어주도록 하자.

function addToHomeScreen() {
    //@ts-ignore
    window.promptEvent.prompt();
    //@ts-ignore
    window.promptEvent.userChoice.then((choiceResult: any) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt')
      } else {
        console.log('User dismissed the A2HS prompt')
      }
    })
}

이전에 window.promptEvent 속성에 event 객체를 넣어주었기 때문에 해당 객체에는 prompt 라는 함수가 존재한다. 해당 함수를 발동시키면 유저에게 다운받으시겠습니까? 와 같은 알림이 뜨게된다. 유저가 승낙을 했는지 거절을 했는지 또한 콜백함수로 알아낼 수 있다.