위의 사진처럼 우리가 흔히 보는 카톡이나 쿠팡알림 처럼 위의 모양과 같은 notifiaction을 설정 해주려면 어떻게 해야할까?
강의나 문서에는 React-Natvie + Fcm 에 대한 예시가 많다.
하지만 Fcm만 설정해 주면 위의 알림을 띄울 수 없다.
포그라운드
백그라운드 1 작업표시줄
백그라운드 2
위의 사진은 Fcm만 설정해주었을 때 각각 포그라운드와 백그라운드에서의 알림 화면이다.
fcm만 설정해 주면 포그라운드는 alert창 백그라운드는 작업표시줄 밖에 알림이 오지 않는다.
push알림이 오게 하려면 Push-Notification에서 채널 ID를 설정 해주어야 한다.
나는 react-native-push-notification라이브러릴 사용해서 채널 ID를 설정해주었다
https://github.com/zo0r/react-native-push-notification
또한 매니페스트에 권한 요청도 설정해주는 것을 잊지말자!
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
안드로이드 api 13 이상부터는 권한 요청이 필수다.
참고 https://developer.android.com/about/versions/13/changes/notification-permission
{
"to":"cufwSzrRQLmkfsyl94ULWT:APA91bHuZ4ksqQcRC7toSBZOeIiHPt-iwJEOMS58luq0QMLASGHA7und97_jRW6N3Rh624P-FekAK8BhbqDxpccfzLFsyoAFZ_Ih-GrrdS6MYCCZr2f-2nT1DUBzn6QqNiLOjuxJbQii",
"priority" : "high",
"notification" : {
"title" : "Postman",
"priority" : "high",
"body" : "Hello, World!",
"channelId": "riders",
"channelName": "앱 전반",
"importance": "high",
"channelDescription": "앱 실행하는 알림",
"android_channel_id": "riders"
},
"data":{
"title":"Postman",
"body":"asdffsd",
"channelId": "riders",
"channelName": "앱 전반",
"channelDescription": "앱 실행하는 알림"
}
}
프론트에 이렇게 요청을 보내주면 카톡과 같은 알림이 온다!