ServiceWorker 와 FCM 을 이용한 알림구현
오늘 구현한 알람 너무 힘들었다
첫번째로 버전이 바뀐 탓에 기존에있던 모든 예제들이 사용할수 없는 코드가 되었다.
오직 기댈곳은 공식문서 뿐이다.
https://firebase.google.com/docs/cloud-messaging/concept-options
처음에는
POST https://fcm.googleapis.com/fcm/send 와
Authorization: key=AIzaSyZ-1u...0GBYzPu7Udno5aA를 사용해서 구현했지만마이그레이션을 해야만 했다.
POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA위와 같은 방식으로 변했고
데이터를 주고 받는 형식에서도
기존엔
{
"to": "/topics/news",
"notification": {
"title": "Breaking News",
"body": "New news story available."
},
"data": {
"story_id": "story_12345"
}
}으로 전했지만
{
"message": {
"topic": "news",
"notification": {
"title": "Breaking News",
"body": "New news story available."
},
"data": {
"story_id": "story_12345"
}
}
}와 같은 방식으로 변했다.
내가 최종적으로 구현한 코드 이다.
App.tsx에서
useQuery('notify_token', messageApi, {
onSuccess: (test) => {
localStorage.setItem('notification_token', test);
},
});메세지를 보내는 이벤트
const testPostNotify = () => {
const token = localStorage.getItem('notification_token');
if (token) {
const data = {
message: {
token: '<Notification token>',
notification: {
title: '안녕하세요',
body: 'Background message body',
},
},
};
axios.post('https://fcm.googleapis.com/v1/projects/
<project_id>/messages:send', data, {
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer <Server Toekn>',
},
}).then((test) => {
console.log(test);
});
}
};오늘 오랜만에 인간승리를 한 하루 였다.
정말 하루종일 이것저것 찾아보면서 적용 하고 안되서 실망하고
같은 팀원인 은지님과 같이 논의도 하고 서로 알아낸거 공유하고 하면서
결국엔 해냈다 여러 문제점을 만나기도 했다
문제점1.
알림 토큰을 받아오지 못한다.
해결방안1.
vapidKey로 firebase/messaging 라이브러리 내장 함수인 getToken 함수를 사용해서 토큰을 가져온다.
문제점2.
해당 토큰은 서비스워커가 종료되거나 어플이 재설치 또는 다른 디바이스로 접속 할때 마다 바뀐다.해결방안2.
react-query를 사용해서 토큰을 받아와서 사용한다.
문제점3.
이전 파이어베이스 버전 예제가 너무 많고 현재 마이그레이션된 버전이 없다.
해결방안3.
공식문서를 보고 사용해본다.
문제점4.
서버의 키를 알수가 없다.
해결방안4.
사실 이문제가 가장 큰 문제이고 아직 해결되지 않은 문제이다. 현재는 임시방편으로 서버의키를 직접 수동으로 발급받아서 사용하지만 엑세스토큰으로써 유지시간이 짧아서 지속적으로 사용이 불가능 하다 다음엔 해당 문제를 꼭 해결하는 포스팅을 했으면 좋겠다.
