[PWA] 웹 브라우저로 접속 시, PWA 앱 설치를 유도하는 알림 추가

[luckylooky2]

• 목표 : 최대한 웹 브라우저가 아닌 PWA 앱에서 서비스를 사용하도록 하자

  • window.matchMedia("(display-mode: standalone)").matches
  • 현재 접속한 곳을 판단하여
    • 웹 브라우저라면 PWA 앱 설치 유도 알림을 보내고
    • PWA 앱이라면 별 다른 알림을 보내지 않음

• BeforeInstallPrompt 이벤트

  • 사용자에게 앱을 설치하라는 프롬프트를 띄워주기 "전에 발생하는" 이벤트 => 렌더링 되자마자 이벤트 실행
  • 사용자가 프롬프트에서 취소를 눌러도 해당 이벤트가 다시 실행
    • 프롬프트를 띄울 수 있는 조건이면 바로 실행되는 이벤트이기 때문에
    • 이 상황에서 useState를 사용하면 불필요한 렌더링 발생
    • 또한, setState 비동기 처리는 상태 업데이트와 동기적으로 이루어지지 않으므로 onClick 이벤트에서 상태 값이 업데이트 되지 않을 수 있는 문제
    • 두 문제를 해결하기 위해 useState 대신 useRef 사용
  • 현재 chrome 등 일부 브라우저에서만 사용할 수 있음
  • safari에서는 이벤트를 탐지할 수 없기 때문에, 다른 방식으로 share 버튼을 통해 앱을 설치하도록 말로 유도
  • chrome 시크릿 모드(Incognito)에서는 이벤트가 실행되지 않음
    • safari와 같이 다른 방식으로 유도해야 하나, chrome 시크릿 모드인지 아닌지 확인할 방법이 없음(방법이 다 막힌 상태)
    • 추가 문구(시크릿 모드에서는 앱 설치가 동작하지 않을 수 있습니다.)를 추가