TIL 33 fcm, 서비스워커 푸쉬알림 완료

트러블

푸시서비스를 해주는 firebase를 통해 푸시메세지(알림)를 진행하기로했다. 푸쉬알림을 거의 1~2주는 계속해서 씨름했던거같다, public폴더에 서비스워커를 등록해야한다는점, 그럴때 import를 할수없던점, src폴더에서 서비스워커를 등록시 scope때문에 등록이 안된다는 에러, 만약 등록하더래도 public폴더가 아니라면 event가 발생하지 않는다는점 등이 많았다.

보는바와 같이 public폴더에 서비스워커.js 를 만들어 self 를 쓰면 빨간색으로 밑줄이 그어진다(하지만 잘 실행된다.)

이제는 fcm을 통해서 테스트를 하고 원하는시간, 그리고 따로 암호화를 한다거나 서비스워커 구독코드를 직접 써야한다거나(register) 하는 단점을 없애고 좀더 편리하게 이용할수있고, 웹과 앱 안드로이드, ios까지 호환이 가능하다고한다(하지만 아직 ios는 확인불가상태다).

먼저 firebase를 이용한 함수들을 사용하기 위해서 import 를 해온다. 이때 9버전을 사용하기때문에 기존 8버전으로 import하는것과는 다르다.

firebase에서 fcm프로젝트를 등록하면 주는 정보들을 등록하고, firebase.initializeApp(config)로 초기화해준다.

그런다음 변수 messaging에 getMessaging함수를 담아서 메세지에 대한 정보를 넣어준다. 

해당 사용자가 토큰을 가지기위해 getToken()을 사용하게하여 해당 이용하려는 서비스정보와 vapidKey를 넣어준다. 그럼 token을 반환해주고 그것을 fcm/send 주소로 json형식으로 줘야할 data들을 보내준다. 이때 headers의 authorization에 "key=서버키"를 넣어준다.

서버 키는 프로젝트 개요 옆 톱니바퀴를 클릭하고 클라우드 메세징 탭에서 서버 키를 복사하여 넣어주면된다. 이렇게 잘 보내주면 

응답 response이 잘 오고 해당 data를 출력해보았다.

이제 보내는게 갔으니 내가 다시 받아야한다. 이때 필요한게 서비스워커의 event 들이다.

 

공식문서에서는 위와같이 적용 하라고했지만, 8,9 버전이 다른것과 public 폴더에서의 서비스워커.js에서는 import가 실행되지 않는다. 

따라서 이것을 통한 event는 발생하지않는다. 이때 어떻게 해야 이벤트가 발생할수있을까 생각하다가 결국 서비스워커는 push, message 등 푸쉬알림기능의 event가 발생하면 반응 하기때문에 firebase함수를 쓰지않고 서비스워커 이벤트를 addEventListener를 사용하여 해당 푸쉬알림에 받을 정보들을 넣어주었다.



이렇게 하면 push 이벤트가 생길때 event에 그 정보가 담겨져 오는데 그것을 event.data.text에 있는데 그것을 넣어주고 showNotification을 사용하여 보여주기로했다. 그결과 다음과 같이 뜬다.

그렇다면 이제 우리가 원하는 메세지 값들을 axios를 통해 잘 보내주었고, 그것을 fcm 서비스을 이용하여 바로 푸시 알림을 받게 되었다.

이제 남은건 localhost:3000에서가 아닌 http 와 https 에서 fcm 서비스를 이용 할수있는지 이다. 테스트를 위해  s3에 http로 배포를 하였고  firebase를 통해 https 로 배포를 하였다. 먼저 http 에서는 firebase 를 사용 할수없다고 에러가 뜨고, 구글링해본결과 http에서는 fcm을 사용 할수없다고 한다.

https에서만 가능하다

 

따라서 firebase에 배포한 https를 이용하여 실험한 결과 잘되는걸 볼수있었고 이제 웹에선 확인을 하였으니 모바일에서도 푸쉬알림이 오는지 확인하였다. 결과는 성공적이다.(이때 안드로이드로 실험하였다. ios 경우 권한허용 창이 뜨지않는다. 나중에 테스트하기로했다.)

이때 api를 통해 해당 메세지를 보내주는것이아니라  사이트에서 직접 되는지 확인하기 위해서는 아래와 같이 messaging 에 있는 클라우드 메시징 알림 작성을 하여  기기 테스트 메시지 전송을 눌러 토큰을 넣어준다

이렇게 추가한 token은 좀전에 getToken()을 이용하여 얻어온 값이다. 그렇게 하면 위에처럼 푸쉬알림이 뜬다.

 

이렇게해서 fcm이용한 서비스워커 푸쉬알림 구현을 완성하였다. 이제 남은건 백엔드가 수행해야할것을 찾고 그것을 구현하면 완성이다.