React-Native와 FCM + Push-Notification

슈크림·2023년 2월 2일
1

React-Native와 FCM + Push-Notification

위의 사진처럼 우리가 흔히 보는 카톡이나 쿠팡알림 처럼 위의 모양과 같은 notifiaction을 설정 해주려면 어떻게 해야할까?

강의나 문서에는 React-Natvie + Fcm 에 대한 예시가 많다.
하지만 Fcm만 설정해 주면 위의 알림을 띄울 수 없다.

포그라운드

백그라운드 1 작업표시줄

백그라운드 2

위의 사진은 Fcm만 설정해주었을 때 각각 포그라운드와 백그라운드에서의 알림 화면이다.

fcm만 설정해 주면 포그라운드는 alert창 백그라운드는 작업표시줄 밖에 알림이 오지 않는다.

알림이 오게 하려면 FCM + Push-Notification을 사용해야 한다!

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": "앱 실행하는 알림" 
  }
}

프론트에 이렇게 요청을 보내주면 카톡과 같은 알림이 온다!

profile
프론트엔드 개발자입니다.

0개의 댓글