안녕하세요, 최근 고객사를 위해 React + Vite를 이용해 만든 사이트가 유독 아이폰 카카오톡 인앱 브라우저에서만 제대로 열리지 않습니다.
특히 아래 링크를 알림톡을 이용해 연결하고 있는데 그냥 흰 화면만 뜰 뿐 아무런 디버그 가능한 정보가 없어서 어떻게 접근해야 할지 모르겠네요.
https://quezone.top/newCustomer
안드로이드에서는 잘 열리고 다수의 아이폰에서 확인했으나 동일합니다.
기타 사이트는 잘 열리는 걸로 봐서 meta data 혹은 제가 쓰는 library의 문제인가 싶은데 왜인지 모르겠네요.
웹 서비스 워커의 문제였고 IOS는 Webkit IAB(In app broswer)를 쓰고 Android 는 Chrome 기반의 IAB를 사용하는데 웹킷에서는 service worker를 지원하지 않아서 Error를 Throw하는게 문제였습니다.
물론 지원 되지 않는게 당연하지만 굉장히 Poor 한 Error handling 이라고 생각되네요…
https://remotejs.com/ 를 통하여 Debugging이 가능 했고 firebase service worker 등록 과정을 모두 try catch에 떄려 넣어서 해결 되었습니다.
혹시나 비슷한 문제가 있으신 분들에게 도움이 되셨으면 좋겠네요.
인앱 브라우저는 정말 개발자 입장에선 최악입니다…