TIL35 fcm 서비스워커 사용, 구독/구독 취소 및 기능함수 접근방법

 

fcm 서비스워커 등록, 설치

fcm 과 서비스워커 글이 중복되듯이 계속 쓰는거 같다. 수정사항이 생기고 추가될게 생기다보니 이렇게 중복되는 이름으로 쓰게 되는데 오늘은 그전에 썼던 fcm을 구독을 하고 취소하는 방법 그렇게 하기위해선 어떤 코드를 써야하는지 써보도록 한다.

먼저 메인화면에서 fcm 정보를 가지고 초기화를 해주는 코드를 썼다. 이렇게 하면 자동으로 fcm의 서비스워커 또한 생기게 되는데 아래스크샷을 참고하면

fcm 공식문서에서 fcm 서비스워커는 firebase-messaging-sw.js 로 정의 되어야한다고 한다. 이를 위해

참고주소: 

Messaging | JavaScript SDK  |  Firebase

 

 

 

 

public 폴더안에 firebase-messaging-sw.js 파일을 추가하였다. 이렇게 추가하면

이렇게 자동으로 default 위치로 register 이 된다.

그리고 그안에서는 각각의 서비스워커 이벤트가 발생할때 실행되는 함수를 입력해놓았다. 우리가 일단 필수적으로 쓰고있는건 push 와 notificationlick 부분이다.

이렇게 설정을 마추게 되면 메인화면에서 firebse 초기화부분 아래에 다음과 같이 작성했다.

 

fcm 푸쉬알림 구현

이는 fcm 을 이용하기위해선 firebase cloude service에 등록된 정보들을 getToken 1번째 인자에 넣어주고 그 fcm 이용하는 고유의 vapideKey(public key) 를 2번째 인자에 객체 형식으로 넣어주었다. 그렇게 하면 각 유저에게 고유의 token 값을 가지게 되는데 어느 위치에서건 새로고침해도 필요하기때문에 localstorage에 담아두었다.

이렇게 세팅후 서버쪽 api 를 통해 token을 보내주고 그 token을 가진 사람에게 서버쪽에서 fcm에 요청하여 푸시알림을 가게 해주었다.

node.js 서버쪽 api 코드

위와 같이 백엔드 node.js 서버에서 받아온 token을 가지고 보내줄 메세지를 message 변수에 객체로 담아주고, 서버쪽에서 사용할 firebase sdk를 설치하여 admin.messaging().send()를 통해 보내주고 싶은 내용을 요청한다. 이때 서버는 해당 유저가 설정한 시간에 푸시알림을 줘야하기때문에 schedule 라이브러리를 사용하여 시간을 기억하고 그 시간에 마춰서 보내주게 하였다.

 

이렇게하면 서버+클라이언트 fcm 푸쉬알림 구축은 끝났다.

 

subscribe , unsubsribe 방법

마지막으로 해당유저가 푸쉬알림을 받고 받고싶지않을때 적용한 on off 에 따라 subscribe 하거나 unsubsribe 하게 만들어줘야했다.

 

subscribe

구독과 구독취소를 위해선 그에 해당하는 함수가 필요한데 만약 getToken을 통해 토큰을 받아오게된다면 firebase를 초기화 했기때문에 서비스워커가 등록되어있다 그래서 messaging.swRegistration 로 접근하면 pushManager를 쓸수 있는데 일단 너무 길기 때문에 위의 사진처럼 swRegist 라는 전역 변수에 담아두었고, 두번째 빨간박스처럼 swRegist에서 pushMagager에 접근하고 그안에 subsribe()함수를 이용하여 on 일때는 해당 푸쉬알림을 구독하게 했다. 

 

unsubscribe

반대로 Off 했을때 끄기위해서는 먼저 구독이 되어있는지를 확인하기위해서 pushManager안에 getSubscription()으로 접근하여 구독정보가 있다면 반환되는 response 값안에서 unsubscribe()를 이용하여 구독취소를 할수있다. 이렇게 되면 기존의 fcm 서비스워커 등록과 토큰은 그대로 남아있지만 구독을 취소했기때문에 푸쉬알림을 받지않게된다. 

 

 

공식사이트 참고 : https://firebase.google.com/docs/reference/js/messaging_

@firebase/messaging  |  Firebase