React Native) local push notification 셋팅하기 (feat: notifee)

Notifee

firebase messaging 문서를 따라서 fcm 연동을 마쳤다면 (ios는 추가 작업이 필요하겠지만) push message를 수신하는 것 자체는 문제가 없을 것이다. 하지만 그것을 사용자에게 노출하는 것은 별개의 문제다.
백그라운드 환경에서는 push message를 수신했을 때 자동으로 알림센터에 푸시메시지를 표시해준다. 하지만 포그라운드 환경에서는 push message가 수신되었더라도 알림센터에 표시해주지 않기 때문에 사용자에게 메시지를 노출하기 위해서는 별도의 핸들링을 설정해줄 필요가 있다.

이때 사용하는 것이 바로 local notification library이다. push message를 수신하면 이 정보를 기반으로 알림을 직접 생성해서 사용자에게 보여주는 방식으로 활용할 수 있다. RN 생태계에는 대표적으로 react-native-push-notification과 notifee가 있다. 이 중에서 react native firebase messaging 문서에서 추천하고 있는 notifee를 사용해보려고 한다. 해당 글에서 다루는 내용들은 모두 notifee 문서를 참고했다.

Installation

yarn add @notifee/react-native
cd ios && pod install && cd ..

react native cli를 사용중이라면 별도의 추가 설정없이 위 커맨드를 입력하는 것만으로 모든 셋팅이 완료된다. 다만 추가적으로 react-native run-ios / react-native run-android 커맨드를 통해 앱을 다시 빌드하는 과정이 필요할 수 있다.

Request permission

android의 경우 기본적으로 notification permission이 허가되어 있기 때문에 불필요한 과정이지만, ios의 경우 별도로 push notification permission을 요청해야한다. 이 과정은 notifee에서도 함수를 제공하고 있지만, fcm에서도 제공하기 때문에 이번에는 fcm에서 제공하는 코드로 구현해보려고 한다.

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;
	//android의 경우 기본값이 authorizaed

    if (enabled) {
      await messaging()
        .getToken()
        .then(fcmToken => {
          console.log(fcmToken); //fcm token을 활용해 특정 device에 push를 보낼 수 있다.
        })
        .catch(e => console.log('error: ', e));
    }
  }

Display notification

notifee에서 제공해주는 displayNotification 메서드를 이용해서 title, body를 받아 알림을 표시해주는 onDisplayNotification 함수를 만들었다. 아래 코드에서 channelId는 android에서 필요한 부분으로, 필수값으로 포함해주어야한다.

  const onDisplayNotification = async ({
    title = '',
    body = '',
  }: {
    title?: string;
    body?: string;
  }) => {
    const channelId = await notifee.createChannel({
      id: 'channelId',
      name: 'channelName',
    });

    await notifee.displayNotification({
      title,
      body,
      android: {
        channelId,
      },
    });
  };

Detect Message

notifee에서는 포그라운드에서 push message를 감지할 수 있는 onMessage 메서드를 제공한다. onMessage는 일종의 리스너로, push message가 수신되면 안쪽의 콜백함수가 실행된다.
여기서 아까 설정해둔 onDisplayNotification 함수가 실행되며 사용자에게 푸시 메시지가 노출되는 방식으로 구성되어 있다. 일반적으로 아래와같이 App.tsx 파일에서 useEffect로 감싸 사용한다.

const App = ()=>{

  ...
.
  useEffect(() => {
    //push notification permission 요청
    requestUserPermission();

    // 포그라운드에서 푸시메시지 수신
    return messaging().onMessage(async remoteMessage => {
      const title = remoteMessage?.notification?.title;
      const body = remoteMessage?.notification?.body;
      await onDisplayNotification({title, body});
    });
  }, []);
  
  ...
  
  return ...;
  
}
export default App