PWA에서 아이폰과 안드로이드 비교

생각보다 다른 점이 많다. 약간 아이폰 유저로서의 의견이 첨가된.

설치 방법

가장 큰 차이가 아닌가 싶다. 안드로이드에서는 PWA 설치 프롬프트를 띄울 수 있다. 거기서 설치 버튼을 누르면 설치가 되는데 설치하는 데 시간이 약간 걸린다. 아마 설치할 때 리소스를 미리 다 다운받아주는거 같다. 진짜 앱처럼. 그리고 설치 창에 manifest에 추가한 screenshots 이미지를 보여줄 수 있다.

아이폰에서는 설치 창을 띄워줄 수가 없다.. 오직 사용자가 직접 공유 버튼을 눌러서 홈 화면에 추가하기를 하는 방법 뿐. 설치는 즉각적이지만 앱을 눌러서 실행할 때 리소스를 불러오는 듯 하다. 그래서 최초 실행 및 앱 종료 후 실행에는 로딩 시간이 걸린다.

그리고 iOS 17버전 부터는 manifest가 없는 사이트(PWA작업을 하지 않은)에서도 같은 방법으로 홈 화면에 웹앱 추가를 할 수 있게 되었다.

스토리지 공유

아이폰은 PWA를 설치하면 사파리와 스토리지가 공유되지 않고 별개로 취급된다. 그래서 같은 사이트의 PWA를 여러개 설치할 수 있고 모두 각각 독립적으로 실행된다. 아이폰만 써서 그런가 이게 너무 기본 같은데..

안드로이드에서는 설치한 브라우저와 설치한 앱이 거의 하나같은 느낌이다. 모든걸 공유하는데 들어가는 문만 다른 것 같다. 크롬에서 a 사이트에 접속하고 로컬스토리지에 뭔가를 저장했다면, 다운 받은 PWA의 로컬 스토리지 보면 크롬 브라우저에서 저장한 게 있다. (아이폰 유저로서 너무 이해 안되는 부분..) 아무튼 그래서 같은 사이트의 앱은 한 번만 다운이 가능하다.

푸시 알림, 메세지 토큰

스토리지 공유 여부와 연결되는 내용인데, 안드로이드에서 웹과 앱이 한 몸(..)이기 때문에, 앱에서 푸시 토큰 발급 받고 푸시 메세지를 보내면 웹으로 온다. (푸시 클릭하면 앱이 아닌 웹이 열린다) 웹을 종료하면 앱으로 가지만.. 주도권이 왔다갔다 하는 듯. 웹스토리지도 공유한다.

더 심각한 문제는 삼성 브라우저인데, 삼성 브라우저로 앱 설치를 하면… 앱을 지워도 캐시를 지울 때까지는 푸시 알림이 (웹으로) 온다. (충격!!)

=> PWA에서 삼성 브라우저 절대 못쓰는 이유 feat.Push

아이폰은 웹과 다운받은 앱들간에 공유되는게 없어서 여러앱이 있고 웹에서 보고 있는 상태여도, 알림을 누르면 해당 토큰이 발급된 앱으로 이동한다. 하지만 앱을 지워도 푸시 알림이 성공적으로 간다는 문제가 있다.. 앱을 지웠기 때문에 휴대폰에서 알림을 받아볼 수 있는 것은 아니지만 보내는 서버 입장에서는 얘가 앱을 안지웠다고 생각할 수 밖에 없다. 사파리의 캐시를 날려도 소용이 없었고.. 그냥 며칠 지나니까 그제서야 실패 뜬다. 어딘가에서 살아서 메세지를 받아주는 서비스워커. 이 부분은 따로 주기적인 체크 등을 해서 우회적으로 확인해 보기로 했다.

=> fcm 토큰 언제까지 살아 있어? 문의해 보았다.

반면 안드로이드 크롬으로 앱 설치를 하면 앱 삭제시 바로 깔끔하게 메세지 보내기 실패! 가장 깔끔. 다만 기기의 기본 브라우저가 삼성 브라우저기 때문에 크롬 브라우저에서 시도해 달라는 안내가 필요하다. (브라우저 체크해서 삼성 브라우저는 막아버리는 방법도.)

푸시 내용, 알림 클릭

푸시에 보이는 내용. 아이폰은 제목, 아이콘, 내용 이렇게 딱 세 개만 보인다. 이미지, 액션, 진동 패턴 등은 안드로이드에서만 가능하다.

푸시 데이터에 특정 url을 넣어서, 푸시 클릭하면 이동하게 하고 싶다. 그러면 일단 푸시를 받는 거는 서비스 워커니까 서비스워커의 알림 클릭 이벤트에서 푸시데이터에 있는 url 정보를 앱으로 메세지를 보낸다. 그러면 이제 앱에서 메세지 받아서 그 url로 이동! 하면 되는데…

결론: 안드로이드는 잘 되는데 아이폰은 앱을 종료하지 않은 상태에서만 잘 된다.

앱을 완전히 종료하지 않고 홈 화면으로 간 상태에서는 푸시 클릭 했을 때 지정된 페이지로 잘 이동한다. 하지만 앱을 종료한 상태에서 푸시를 클릭하면 앱이 열리고.. 이동하지 않는다. 열심히 서치해본 결과, 비슷한 현상을 겪은 사람이 많았고.. 아직 해결된 거 같지 않다.

그리고 iOS 푸시 관련해서는 검색하다보면 거의 swift로 앱 만드는 내용만 많이 나온다.. 그래서 최근 몇 달로 기간을 제한해서 검색하긴 하는데 그래도 도움되는 게 딱히 없다. 계속 보다보면 약간 앱 개발 하고있는 착각이 들게 한다.

디버깅 과정

안드로이드는 크롬에서 시원시원하게 디버깅 하는데 아이폰은 사파리로 떠듬떠듬 답답하게 해야된다. 사파리 개발자 도구는 더 나아질 수 있을까?.. 웹킷 개발자들은 지금 PWA 관련 이슈들을 iOS17버전이 나오기 전에 해결해 줄 수 있을까..?.. 많은 의문이 드는 iOS 디버깅 과정이었다.

=> 서비스 워커 디버깅 방법

삼성 브라우저의 독보적 행보

얘는 진짜 특이한 게 있었는데, 일단 앱 설치가 manifest만 있어서는 안되고 서비스 워커까지 있어야 되는데 최근 버전이 그런거라서 다운그레이드 하면 또 안그런다. 고객센터 문의의 답변에 따르면 의도된 것인 듯 하고, 바꿀 생각은 없는것 같다.

일반적으로 pwa를 감지하는 게 display-mode: standalone인 지를 확인하는데 삼성 브라우저의 어떤 버전에서는 웹에서 보고 있는데도 standalone이라고 떴었다. 이건 다음 버전에서 고쳐진 것으로 보이는데, 여러모로 충격적이었다.

사파리의 랜덤민감한 유저 제스처 요구

Notification prompting can only be done from a user gesture.

앱에 첫 접속시 알림 허용 창을 띄우려고 하니 유저 제스처를 요구하는 오류가 뜬다. 이것조차 랜덤인게 사파리답다. 잘 될 때도 있고, 안 될 때도 있는데 무슨 차이인지 알기 어렵다.

그 외 다른 부분에서 있었던 유저 제스처 오류 => iOS에서 WebAuthn 유저 제스처 오류

안드로이드의 푸시가 실시간으로 오지 않음

삼성 브라우저를 제하고 크롬에서만 설치할 수 있게 했는데 여전히 문제가 있다. 우리의 PWA이 전적으로 크롬에 종속적이다. 그렇기 때문에

1. 크롬 설정이 배터리 최적화 중이라면,
2. 안드로이드 기기 설정이 배터리 최적화 중이라면,
3. 설치한 PWA 앱에 오랫동안 접속하지 않았다면..

푸시가 실시간으로 오지 않는다. 휴대폰을 잠금 해제 하거나 앱에 접속할 때 쌓여있던 푸시가 그제서야 온다. 앱의 프로그래밍적인 단계에서 어떻게 설정할 방법이 없고 사용자가 직접 어떤 행동을 취해 줘야 하기 때문에 굉장히 통제할 수 없는 문제이다.

보안적 측면에서는 충분히 이해하지만, 크롬 브라우저의 설정 화면으로 이동하는 버튼조차 만들 수 없는 것을 조금 답답했다.

정리

각각 어떤 부분에서 PWA 개발에 있어 걸림돌이 되었는가. 다 적고 보니 비교가 아니라 단점 배틀이 되어버렸다.

안드로이드

• 크롬 배터리 최적화, 기기 자체 배터리 최적화.. 자동으로 밀리는 우선순위 문제
• 삼성 브라우저의 존재
• 삼성 브라우저가 기본 브라우저라는 것

아이폰

• 아이패드에서 iPad 로 표시 안됨 => 맥이고 싶어하는 아이패드 판별법
• 앱 삭제 감지가 어려움
• 서비스워커 불안정 (클릭 이벤트도 랜덤으로 작동함)
• 설치 버튼 못 만듦