ReactNative 푸시메세지 설정

ReactNative에서 푸시메세지 토큰 수집 및 수신을 위해 필요한 설정 가이드입니다.

푸시알림 권한 확인

사용자의 푸시알림 권한에 대한 확인을 거친 후 사용자의 푸시토큰을 수집 합니다.

아래의 예제는 사용자의 푸시알림 권한을 확인하는 방법으로 안드로이드의 경우 내장된 react-native PermissionAndroid를 사용하였으며, ios의 경우 React Native Firebase iOS permission API를 사용하였습니다.

푸시알림 권한 확인 절차에 대한 예제일 뿐, 앱의 특성이나 상황에 따라 권한을 확인 및 요청하는 위치는 달라질 수 있습니다.

예제에서 사용한 권한 확인 방식은 다음과 같으며, 자세한 내용은 사용된 API의 도큐먼트를 확인 해 주세요.

• android : react-native PermissionAndroid API 사용

• ios의 경우 React Native Firebase iOS permission API 사용

iOS permission 요청시 확인되는 authorizationStatus 값.
-1 = NOT_DETERMINED: 애플리케이션에 대한 권한이 아직 요청되지 않았습니다
0  = DENIED: 사용자가 알림 권한을 거부했습니다
1  = AUTHORIZED: 사용자가 권한을 수락했고 활성화되었습니다.
2  = PROVISIONAL: 임시 권한이 부여되었습니다.
3  = EPHEMERAL: 앱이 제한된 시간 동안 알림을 만들 수 있는 권한이 있습니다. 앱 클립에 사용됩니다.

Notification permission Check 예제

import messaging from '@react-native-firebase/messaging';
import {Platform, NativeModules, PermissionsAndroid} from 'react-native';

const Main = () => {
const firebaseMessaging = messaging();

 useEffect(() => {
    Platform.OS === 'android'
      ? androidRequestPermission()
      : iosRequestPermission();
  }, []);
  
  // ios 사용자에게 알림권한 요청
  const iosRequestPermission = async () => {
    try {
      const authorizationStatus = await messaging().requestPermission();
      // 알림 권한이 허용되면 authorizationStatus 값에 대한 안내는 상단에 작성되어 있습니다.
      // authorizationStatus 값이 AUTHORIZED 일 때, 
      if (authorizationStatus === 1) {
        const apnsToken = await firebaseMessaging.getAPNSToken();
        // APNs 토큰이 등록되어 있지 않으면 getToken() 함수가 실패합니다.
        // FCM토큰을 가져오기 전에 APNs 토큰이 등록되어있는지 먼저 확인합니다.
        if (apnsToken) {
          const fcmToken = await firebaseMessaging.getToken();
          // 와이즈트래커 SDK가 토큰을 수집합니다.
          NativeModules.DotReactBridge.setPushToken(fcmToken);
        }
      } else {
        console.log('알림권한 비 활성화:');
      }
    } catch (error) {
      console.log('ios error::', error);
    }
  };

  // Android 사용자에게 알림권한 요청
  const androidRequestPermission = async () => {
    const authorizationStatus = await messaging().requestPermission();
    console.log('authorizationStatus:', authorizationStatus);
    try {
      const fcmToken = await firebaseMessaging.getToken();
      if (Platform.OS === 'android') {
        console.log('get android FCM Token:', fcmToken);
        if (Platform.Version >= 33) {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
            /*
             * 알림허용이 denied 일때, 알림 허용에 대한 재안내와 
             * 알림수신에 대한 요청을 다시 할 수 있는 내용 작성가능.
             * */
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log('Android 13이상 , 알림권한 허용.');
            if (fcmToken) {
              //토큰 수집
              NativeModules.DotReactBridge.setPushToken(fcmToken);
            }
          }
        }
        // API 레벨 32 이하일 때
        try {
          if (fcmToken) {
            //토큰 수집
            NativeModules.DotReactBridge.setPushToken(fcmToken);
          }
        } catch (e) {
          console.log('android token API level 32 이하 error:', e);
        }
      }
    } catch (error) {
      console.log('Android error:', error);
    }
  };
...
}

Device Token 수집

알림 권한 허용에 대한 확인 여부를 진행했다면, 사용자의 푸시토큰을 수집해야 합니다.

OS 모두 Firebase messaging 서비스를 기반으로 동작하기 때문에, getToken 호출을 통해 Token을 확인할 수 있습니다. 로그를 통해 수집된 token이 확인된다면, setPushToken 호출을 통해 와이즈트래커 SDK가 토큰을 수집할 수 있도록 코드를 추가 해 주세요.

푸시토큰 수집 예제

import messaging from '@react-native-firebase/messaging';
import {Platform, NativeModules, PermissionsAndroid} from 'react-native';

const Main = () => {
const firebaseMessaging = messaging();

if (Platform.OS === 'android') {
  const fcmToken = await firebaseMessaging.getToken();
     // 와이즈트래커 SDK가 토큰을 수집합니다.
     NativeModules.DotReactBridge.setPushToken(fcmToken);
} else {
 // iOS의 경우 APNs 토큰이 등록되어 있지 않으면 getToken() 함수가 실패합니다.
 // FCM토큰을 가져오기 전에 APNs 토큰이 등록되어있는지 먼저 확인합니다.
  const apnsToken = await firebaseMessaging.getAPNSToken();
   if (apnsToken) {
      const fcmToken = await firebaseMessaging.getToken();
      // 와이즈트래커 SDK가 토큰을 수집합니다.
      NativeModules.DotReactBridge.setPushToken(fcmToken);
    }      
};

푸시메시지 클릭 측정

앱의 상태는 총 3가지로 나눌 수 있습니다.

• Foreground 상태 : 앱이 켜져있고, 앱을 사용하고 있는 상태 > 이벤트 핸들러의 onMessage를 이용해 핸들링 할 수 있습니다.

• Background : Background는 앱이 꺼져있거나, 홈버튼을 눌러 앱을 빠져나온 경우입니다 > 이벤트 핸들러의 setBackgroundMessageHandler를 이용할 수 있습니다.

• Quit : Quit는 앱이 종료된 상태를 나타냅니다 > Background와 동일하게 이벤트 핸들러의 setBackgroundMessageHandler를 이용할 수 있습니다.

앱의 상태에 따라, 발송된 푸시메세지가 도착하여 유저가 메세지를 클릭하는 것을 측정하기 위해서 앱에 진입하는 시점에"NativeModules.DotReactBridge.setPushClick" 을 호출하는 로직을 작성해야 합니다.

유의 해 주셔야 할점은 앱이 Foreground 상태일때 알림메시지 수신에 대한 구현 방식에 따라서, 유저가 Foreground 상태에서 알림을 받아 , 해당 알림을 클릭한 시점에 setPushClick을 호출해주셔야 한다는 점 입니다.

만약 Foreground 상태일때 알림메세지에 대한 구현부가 없으나, NativeModules.DotReactBridge.setPushClick 을 호출한다면, 아래의 이미지 처럼 유저가 알림을 클릭하지 않았음에도, 대시보드에서 다이렉트 오픈이 카운팅될 수 있습니다.

와이즈트래커 대시보드에서 푸시메세지 테스트 발송시와 Firebase 콘솔에서 푸시 메세지 테스트 발송시 확인되는 메세지에는 다른점이 있습니다. 와이즈트래커 대시보드에서 메시지 발송시에는'RW_push_payload_WP'객체 확인이 가능하나, Firebase 콘솔에서 메시지 발송 테스트 시에는 RW_push_payload_WP 객체정보는 확인되지 않습니다.

(아래에서 예제 확인 해 주세요)

'RW_push_payload_WP' 객체가 들어있는 정보만 setPushClick을 통해 전달하며, JsonString의 parsing을 통해 Direct오픈 여부등을 체크하기에, 다음과 같이 대시보드에서 발송시에만 setPushClick함수가 호출될 수 있도록 제어 해 주세요.

와이즈트래커 대시보드 발송과 Firebase console 에서 발송되는 메시지 payload 비교

1. 와이즈트래커 대시보드에서 메시지 전송시 수신되는 remoteMessage 원본:  
{
   "data":{
      "RW_push_payload_WP":
      "{\"RW_push_payload_CK\":\"0000\",\"RW_push_payload_SK\":\"00000000\",
         \"RW_push_payload_TT\":\"ios test\",\"RW_push_payload_EXPIRED\":\"1672498800000\",
         \"RW_push_payload_PR\":\"7\",\"RW_push_payload_BD\":\"ios test\"
      }"
   },
   "from":"0000000000000",
   "messageId":"0000000000000000",
   "notification":{
      "body":"ios test",
      "title":"ios test"
   }
}

2. firebase console 발송 테스트시 수신되는 remoteMessage 원본 : 
{
   "data":{},
   "from":"0000000000000",
   "messageId":"0000000000000000",
   "mutableContent":true,
   "notification":{
      "body":"fcm test",
      "title":"fcm test"
   },
   "sentTime":"0000000000"
}

앱 진입시점은 앱마다 다를 수 있으며 아래의 예제는 App.js 를 진입시점으로 예제가 작성되었습니다.

App.js(Function component)

import React, {useEffect} from 'react';
import messaging from '@react-native-firebase/messaging';
import {NativeModules} from 'react-native';

const App = () => {
  ...
  // 포그라운드 상태에서 FCM 메시지를 받았을 때
  useEffect(() => {
    const foregroundMessage = messaging().onMessage(async remoteMessage => {
      // 메시지를 처리하는 로직은 필요에따라 별도 구현 해 주세요.
      // 별도 구현 후 대시보드에서 유저가 알림을 클릭하여 캠페인 정보를 
      // 확인하고자 할때 DotReactBridge의 setPushClick함수를 호출합니다.
      if (JSON.stringify(remoteMessage).includes('RW_push_payload_WP')) {
        NativeModules.DotReactBridge.setPushClick(remoteMessage.data["RW_push_payload_WP"]);
      }
    });
    return foregroundMessage;
  }, []);
  
  useEffect(() => {
    //사용자가 FCM을 통해 표시된 알림을 누르면 앱이 백그라운드 상태에서 열린 경우 호출
    const backgroundMessage = messaging().onNotificationOpenedApp(
      remoteMessage => {
        // 메시지를 처리하는 로직은 필요에따라 별도 구현 해 주세요.
        // 와이즈트래커 SDK와 통신하여 푸시메세지 클릭을 처리.
        if (JSON.stringify(remoteMessage).includes('RW_push_payload_WP')) {
          // NativeModules.DotReactBridge.setPushClick(remoteMessage.data.RW_push_payload_WP);
          NativeModules.DotReactBridge.setPushClick(remoteMessage.data["RW_push_payload_WP"]);
        }
      },
    );

    /* Android의 경우 사용자가 FCM을 통해 표시된 알림을 앱이 종료된 상태에서 알림을 클릭한 경우
    앱이 처음 시작될 때 실행됩니다. 메시지가 없으면 null을 반환합니다.*/
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log('앱이 종료 상태에서 알림클릭으로 앱이 오픈되었을때:', remoteMessage);
          // 메시지를 처리하는 로직은 필요에따라 별도 구현 해 주세요.
          // 와이즈트래커 SDK와 통신하여 푸시메세지 클릭을 처리.
          if (JSON.stringify(remoteMessage).includes('RW_push_payload_WP')) {
            NativeModules.DotReactBridge.setPushClick(remoteMessage.data["RW_push_payload_WP"]);
          }
        }
      });
    return backgroundMessage;
  },[]);
  ...
  ...
};

푸시 수신동의

푸시발송은 기본 적용에서는 "수신거부"입니다. 아래 링크를 참조하여 화면에서 수신동의/거부를 진행 후 해당 데이터를 "태깅"작업을 통해 남겨주세요.

Messaging : 푸시/인앱 메시지 | Wisetracker Docs

🎉 축하합니다!

ReactNative 앱의 푸시메세지 발송을 위한 모든 준비가 끝났습니다!

푸시메세지 발송 테스트를 통해 메시지 수신이 잘 이루어지는지 체크 해 주세요!

마케팅 메시지Wisetracker Docs

푸시메세지 테스트 방법