[TWA] 웹으로 구현한 FCM을 앱에서 띄우기

부제:  Trusted Web Activity(TWA) 까지 오는데 너무 많은 시행착오들

 

웹으로 구현한 FCM을 앱으로도 띄우고 싶어요
안드로이드 웹앱 구현하면 WebView? 쓴다던데?.. 웹뷰에서 알림 권한 받고 fcm 띄우고 싶어요..

 

 

결론부터 말하자면, 웹뷰(WebView) 로는 불가능하다. 웹뷰를 쓸거면 네이티브 로직을 따로 구현해야 한다!

 

 

사실 웹뷰를 꼭 써야하는 건 아니다! 어떻게 하는지나 알려달라 --> 유레카: Trusted Web Activity (이하 twa)부터 보기

 

웹뷰에서는 웹으로 구현한 fcm을 진.짜. 살릴 수 없는지 궁금하다 --> 처음부터

 

---

❌ 시도 1: 웹뷰

 

참고로 주인장은 안드로이드에 대한 지식이 없다고봐도 무방할 정도였다.

 

안드로이드 웹앱 구현하면 WebView 를 쓴다는 말을 듣고 웹뷰에서 알림 권한 받아서 fcm 띄우고자 했다.

 

그래서

loadUrl 까지 작성해서 웹뷰 기본틀 구현.

 

그러나

콘솔창에 에러 발생

This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser)

 

---

  🔺 시도 2: 크롬 커스텀 탭(Chrome Custom Tab, 이하 cct)

 

웹 브라우징을 하는 방법으로 웹뷰가 아닌 cct 방식이 있다는 이야기를 봤다.

 

cct를 사용하면 fcm 권한 창도, 알림도 잘 받아와진다. (당연함. 웹.이니까)

 

하지만 문제는 이 망할 URL 바를 절대 없앨 수가 없다.

열심히 찾아봤는데 시간만 날림. 색깔이나 타이틀명 변경까지 가능.

상단 타이틀바, url바

 

내가 제공하는 웹사이트가 아닌 외부 사이트를 연결해서 잠시 사용할 때 cct를 사용한다고 한다.

 

하지만 나는 내 웹사이트 통채로 웹뷰마냥 띄우고 싶은거고? 그래서 url 바가 없었으면 참 좋을 것 같고?

 

---

⭕️ 유레카: Trusted Web Activity (이하 twa)

 

twa는 안드로이드 앱에서 pwa 같은 웹앱을 여는 방법이다.

 

크롬 렌더링 엔진을 사용해서 빠르다, 크롬과 상태를 공유한다.. 라는 말이 있지만 지금 상황에서 알아야하는 것은 크롬을 기반으로 동작한다. 라는 것이다.

 

 

==> 즉, 크롬 브라우저를 사용하는 웹에서 네이티브앱 같은 경험을 제공하게 해준다.

당연히 네이티브앱처럼 url바(혹은 타이틀바)가 띄워지지 않고, 디스플레이모드를 fullscreen 이냐, standalone 이냐 혹은 그외를 지정할 수 있다.

만약 크롬 버전이 72이하이면 twa지원이 되지않고, https://your-website/.well-known/assetlinks.json 이 올바르지 않아 웹사이트의 주인이라는 검증에 실패하면, 두 경우 모두 twa가 아닌 cct로 실행되어 url바가 생긴다.

 

 

아무튼 크롬 브라우저를 사용하는 것이기 때문에 웹으로 구현한 fcm도 잘 실행된다!

 

 

twa 프로젝트 만드는 방법

구글 문서: https://developer.chrome.com/docs/android/trusted-web-activity/integration-guide
노코드 빌더: https://www.pwabuilder.com

 

---