PWA를 실제 서비스 하기 위한 난관 그리고 장단점

PWA 서비스를 시작해 보았다

걱정 뿐이었던 설치 방법 안내

가장 큰 어려움은 아무래도 사용자들에게 앱 다운 방법을 알려주는 것이다. 알림 설정도 해야 한다. 왜 앱스토어/플레이스토어에 없어요?라고 물어도 할 말이 없다. 일반 사용자들에게 PWA라는 용어를 사용할 수도 없다. 혼란만 늘어날 것이 분명해 보였기 때문이다. 앱을 앱이라 부르지 못하고…

안드로이드 사용자에게는 가장 많이 쓰고 있을 터인 삼성 브라우저가 아닌 크롬 브라우저로 열게 해야겠고, 아이폰 사용자에게는 설치 버튼같은게 없고 공유 버튼을 눌러 직접 추가하는 절차를 알려줘야 했다.

• 삼성브라우저로 접속한 경우만, 크롬 브라우저로 바로가기 버튼이 보이고, 기존의 설치 버튼은 비활성화 한다.
• 아이폰 설치 과정을 스크린샷과 함께 순차적으로 안내한다.

걱정이 많았던 부분인데 다들 잘 설치해주셨다. 설치 관련해서는 문의 오는 것도 거의 없고. 다행이다!

푸시 알림이 기존의 문자 보내기를 대체할 수 있는지 여부

기존에 문자 혹은 카카오톡으로 사용자에게 보내졌던 중요한 정보를 담은 내용. 예를 들어 ‘~원 입금 되었습니다.’, ‘투자 신청이 완료 되었습니다.’ 같은 내용을 푸시로 대체하기 위해서는 꼭 확인되어야 하는 상태가 있었다.

바로 앱 삭제 여부

왜냐하면, 푸시로 잘 보내다가 앱 삭제가 감지되면 다시 문자로 발송해야 하기 때문이다. 이것 역시 안드로이드 크롬에서는 앱 삭제와 동시에 푸시 전송이 실패가 뜨면서 삭제 되었음을 즉각적으로 알 수 있다. 하지만 아이폰은, 들여다 볼 수 없는 비밀이 많다. 앱을 삭제해도 푸시 전송은 성공을 리턴한다. 몇 주가 지나면 푸시 전송이 결국 실패가 뜨기는 하지만 즉각적으로 반영이 되는 것이 아니라 실제 서비스에 사용할 수 없다고 판단했다.

서비스 워커의 push 이벤트 안에서 fetch를 통해 서비스워커가 푸시를 받았다는 로그를 남기는 것은 잘 작동했지만, 폰이 잠깐 꺼져있는 상태 등 여러 상황이 있을 수 있고 그것을 반드시 앱 삭제와 연결지을 수는 없다.

• 중요한 정보는 보내는 것은 안드로이드만 가능하게 한다. 아이폰은 추후 웹킷이 PWA 관련 지원을 명확이 해주면 가능하게 하기로. 아이폰은 광고성 내용만 푸시로 받을 수 있는 정책으로.
• 앱 내에 알림함을 만들어서 알림을 모아볼 수 있게 하고, notificationclick 이벤트가 잘 작동하지 않는 아이폰에서도 알림함을 통해 타깃 url로 쉽게 이동할 수 있게 한다.

알림함이 열일하고 있다. 아이폰으로는 푸시를 안보내고 있어서 받을 일이 없었고.. (보낼 수는 있지만 안보내고 있음). 안드로이드는 배터리 최적화 등의 문제로 따로 설정이 필요한 것만 빼면 푸시가 잘 오고 있다. 푸시가 가는 만큼 문자 발송 비용을 아끼고 있다.

기기 알림 허용창을 최초 1회만 띄울 수 있움

많이 불안했었는데 의외로 나쁘지 않은 듯 하다. 알림 잘 받고 계시고 문의도 거의 없음으로 미루어 짐작하는 부분. 실수로 거부를 눌렀더라도 휴대폰 설정에서 알림을 켜는 과정은 일반 앱과 똑같기 때문일 수도.

사용자들이 정말 이 이상한 설치 방법을 가진 앱을 사용해 줄 것인가

알림도 잘 받고 있는 듯 하고.. 생각보다 설치도 많이 해주시고..

카페나 블로그에 앱 관련 얘기가 종종 나온다. (나올 때 까지 검색!) PWA가 신기술은 아니지만 생소한 개념이고 대중적으로 쓰이는 방법이 아니다보니 많이들 신기해 하신다.

다시 써보는 장단점

PWA를 도입 할 이유

• 앱스토어를 통한 배포 절차가 없음
  • 앱 스토어 플랫폼에 수수료를 지불하지 않아도 된다.
  • 앱 스토어 심사 절차 없이 웹사이트만 업데이트 하면 된다.
  • 원한다면 앱 스토어에도 배포할 수 있다.
• 비용 절감과 편의성
  • 기존 웹사이트를 사용하기 때문에 추가로 관리해야 하는 코드가 적다.
  • 웹개발자가 만들기 때문에 앱개발자가 없어도 된다..
  • 웹 푸시를 이용해서 문자 발송 비용을 아낄 수 있다.
  • 카카오 친구톡 문자는 내용을 바꾸기 위해서 템플릿 심사가 필요한데, 웹 푸시를 사용하면 원하는 내용을 바로 보낼 수 있다.
• 오프라인 페이지 지원
  • 사이트 데이터를 캐싱해서 오프라인에서도 작동하게 할 수 있다.
  • 오프라인에서만 보여질 페이지를 따로 만들 수도 있다.

PWA 어려운 점

• 브라우저의 제약
  • 브라우저 마다 지원 내용과 방식이 다르다.
  • 브라우저에 종속되어서 돌아가기 때문에 휴대폰 자원 접근에 제한적이다. 보안적인 이유로 JavaScript가 웹사이트에서 할 수 없는 일은 PWA도 할 수 없다. (예: 브라우저의 설정 페이지를 열 수 없다.)
  • 브라우저의 정책이 변경되는 경우도 있다.
• 기술이 시작 단계
  • 기술이 나온지는 조금 되었지만, 애플의 푸시 지원도 늦게 시작되었고. 아직 버그도 많은 듯.
  • 관련 자료를 찾기 힘들다. 웹 푸시 관련해서 자료를 찾으면 간단하게 구현한 경우(도움 안됨)만 나오거나 앱 관련 내용이 주로 나온다.

후기 ♡

PWA는 웹과 앱의 장점을 모두 가진 최고의 짱짱 .. 인 것이지만 왜 잘 안쓰는가, 그것은 아마도 애플 탓일 것이다. 그래서 계기는 애플의 PWA 푸시 허용이었다. 온갓 생소한 이슈를 맞닥뜨리면서 웹 개발 중인건지도 헷갈렸다.

앱 개발은 전혀 알지 못해서.. 앱 개발자들도 이런거 고민하나 싶기도 하고. 아마 PWA의 특수성 때문이겠지.

그럼에도 이건 직접 해보지 않았으면 전혀 알 수 없었던 부분이 많았다. 잠깐 찍먹만 해서 진짜 되는구나~하고 넘어 갔으면 몰랐을 값진(!!!) 사례들. 레거시는 아니지만 메이저도 아닌 기술을 다뤄보는 것, 저는 재밌고 유익했었습니다.