[PWA] Android App URL 삭제

안녕하세요🙋🏻 개발자 재민콩입니다.

 

이번 포스팅에서는 PWA 앱 URL 바 삭제하는 방법에 대해 알아보겠습니다.

 

PWA를 앱으로 빌드 혹은 웹에서 다운로드를 하였을 때,

웹앱을 Native App처럼 보여주기 위해 주소창을 삭제하는데, 이를 가능하게 하는 설정들이 있습니다.

 

1. meta 태그 추가

// Apple
<meta name="apple-mobile-web-app-capable" content="yes" />
// Android
<meta name="mobile-web-app-capable" content="yes" />

 

2. manifest.json display

{
  "lang": ...
  "dir": ...
  "name": ...
  "short_name": ...
  "display": "standalone", // (fullscreen, standalone, minimal-ui, browser)
  "categories": ...
  "description": ...
  "start_url": ...
  "theme_color": ...
  "background_color": ...
  "icons": ...
}

좌측부터 순서대로 broswer, standalone, fullscreen입니다.

하지만 이렇게 모든 세팅을 완료하여도 앱을 다운로드하여 들어가 보면 상단에 주소창이 존재하는 것 을 확인할 수 있습니다.

 

앱에서 WebView를 통해 브라우저를 보여주는 형식이기 때문에 개발 후 따로 빌드를 하여 스토어에 재출시를 하지 않아도 앱에서 변경된 사항이 보이지만, manifest를 수정했을 경우 PWABulider을 통하여 빌드 후 재배포가 필요합니다. 만약 그래도 해결이 안 될 경우 아래 방법을 참고해 주세요!

 

해당 페이지에서 안내해주는 방법으로 진행하면 주소창이 사라진 걸 확인할 수 있습니다.

https://docs.pwabuilder.com/#/hidden/asset-links-faq

PWABuilder Suite Documentation

 

또 혹시 다른 문제가 있을 경우, PWABulider에서 Discord를 통해 지원을 해주고 있는데

들어가서 다른 사람들이 이전에 요청한 내용들을 확인할 수 있고, 도움을 요청할 수 있기 때문에 참고하면 좋을 것 같습니다!