PWA 알람 서버 저장 방식

PWA 알람을 구현하는 것까진 했어도 그것을 어떤식으로 서버에 저장하고,

유저마다의 알람 체크를 어떻게 구분할것인가에 대한 고민이 많았다.

PWA 알람을 구현한 사람들은 알겠지만,

알람을 구독하겠다고 하면 JSON 형식의 데이터를 서버에 보내주게 된다.

해당 JSON 데이터는 기기 기반으로 발생하는것 같다. (사실 100% 정확하게는 모르겠는데 실험결과 스마트폰에서 발생한 것과 웹에서 발생한 것과 JSON 내용이 달랐었다.)

그리고 서버에서 해당 JSON 데이터를 webpush 모듈을 통해 서비스워커쪽으로 보내줄수 있게되고,

최종적으로 PWA 알람을 뿌려주게 된다.

서버에 유저 저장없이 조금 허술하게 만든 페이지는 어떠한 사용자가 들어오느냐에 상관없이

기기 단위로 구독을 받고 그냥 뿌려주는 형식이다.

(그러니까 로그인을 안해도 브라우저에서 '너 구독할래? 안 할래?' 뜨는 식이다.)

하지만 유튜브, 슬랙, 알리바바 등 큰 회사의 서비스를 보면,

로그인 했을때 알람 구독버튼이 뜨게 되고,

구독을 하면 해당 유저가 접속하는 기기마다 모두 PWA 알람이 전송되고,

구독을 취소하면 반대로 접속하는 모든 기기마다 PWA 알람이 뜨지 않게 된다.

즉 기기 기반으로 작동하는 PWA 알람을 유저단위로 다시 구분한 셈이다.

구글 문서에 서버 저장 방식까지 솔루션을 제공하지 않았기에 어떠한 방식으로 PWA 알람을 유저단위로 구분하여 서비스해 줄 수 있을지 고민을 하게 되었다.

아래는 내가 생각한 프로세스다.

1. 유저가 웹브라우저에 접속하여 자기 프로필 정보 페이지로 들어간다.

1. 유저가 프로필 페이지에서 버튼을 통해 알람을 구독할지를 선택하게 한다. (만약 PWA JSON 데이터가 이미 존재한다면 버튼은 구독이 이미 활성화 되어있다.)

2. 유저가 알람을 구독한다고 버튼을 누르면 발생한 JSON 데이터를 그 유저의 정보와 함께 DB에 저장한다.

3. 서버에 스케쥴러 함수가 특정 시간에 따라 DB에 PWA JSON 정보를 요청하게 되고, 그 정보를 서버에서 서비스워커로 보내게 된다.

4. PWA 알람이 유저에게 보여진다.

5. 해당 유저가 스마트폰으로 사이트에 접근한다.

6. 사이트 메인페이지가 로딩되면 그 사람이 로그인을 한 상태인지 안 한 상태인지 구분한다.

7. 유저가 로그인을 한 상태라면 PWA 저장 API를 실행시키고 발생한 JSON 정보를 유저 정보와 함께 DB에 저장한다. (이때 PWA 알람 JSON 정보를 중복체크해서 DB에 저장해야 한다.)

8. 결과적으로 DB에서는 해당 유저의 PWA JSON 정보가 두개가 저장되는 셈이다.

9. 서버에 스케쥴러 함수가 특정 시간에 따라 DB에 PWA JSON 정보를 요청하게 되고, 그 정보를 서버에서 서비스워커로 보내게 된다.

10. 결과적으로 이번에는 웹브라우저 그리고 스마트폰 두 기기에서 PWA 알람이 발생하게 된다.

11. 스마트폰 디바이스에서 프로필 영역으로 접근하여 PWA 알람을 끈다.

12. 그 유저에 속해있는 모든 PWA 알람의 JSON 데이터가 사라진다.

13. 그 유저가 접속해서 사용했던 그 어떤기기에도 알람이 뜨지 않게 된다.

정리해서 말하면, 이러한 과정을 통해서 그 사람이 한번 구독을 함으로 그 사람이 접근한 모든 기기에서 PWA 알람을 보내줄수 있게 한것이다.

또 알람을 끌 경우 모든 기기에서 PWA 알람이 가지 않게도 한 것이다.

그리고 나는 메인페이지에 접근했을때 PWA 알람을 저장하게 했는데,

그게 아니고 아예 PWA알람 인터페이스 어떤 페이지에서나 고정시켜서 해당 유저의 PWA 알람 JSON 저장을 어디서나 가능하게하는 방법도 있다. (실제 슬랙이 그렇게 하고 있는거 같다.)

PWA 기능구현 까지도 솔직히 쉽지는 않았는데,

이걸 어떻게 서버에 저장하고 사용할건지에 대한 부분은 더 머리를 써야 하는거 같다.

여튼 앞으로 계속 사용하면서 더 나은 방법을 찾아 적용시며봐야 겠다.