ios에서 pwa로 접속시 css 변경 / pwa로 시작되는지 감지 하는 방법

pwa 설치가 가능하다는 것은 명시적으로 보여주기 위해 배너에 pwa 다운로드 버튼을 넣어서 노출시켰다. 이 배너는 pwa를 다운로드 받았을 시에 노출이 되지 않기는 원했다.

 

안드로이드에서는 beforeinstallpropmt 이벤트를 통해 pwa로 시작되는지 웹페이지로 시작되는지 감지가 가능하지만 ios에서는 불가능하다.

window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault();
  deferredPrompt.current = e;
});

 

ios는 media쿼리를 사용하여 감지할 수 있다.

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

standalone은 manifest.json에서 설정한 값이다.