Notifee 정리

• React Native에서 로컬 알림을 보낼 수 있게 해주는 패키지는 대표적으로 react-native-notifications, react-native-push-notifications, notifee 등이 있다.
• 이중 널리 쓰이는 것으로는 react-native-push-notifications 이 있는데, 깃허브를 살펴보니 현재 패키지가 활발히 관리되고 있는 상태가 아니기 때문에 다른 패키지 사용을 고려해보라는 내용이 적혀있었다.
• 대체안으로써 추천된 것 중 하나가 Notifee인데, 과거엔 유료였으나 얼마 전부터 완전 무료로 풀린 것으로 보인다. 해서 기본적인 사용법을 기록해둔다.

---

설치

npm install --save @notifee/react-native

yarn add @notifee/react-native

 

권한 요청

• 알림을 보내기 위해서는 사용자가 앱의 알림 권한을 허용해야 한다.
• 따라서 알림을 보내기 전, 권한이 허용된 상태인지를 확인한 후 허용된 상태가 아니라면 권한을 요청한다.

import notifee, { AuthorizationStatus } from '@notifee/react-native';

const requestNotificationPermission = async () => {
  // 사용자에게 알림 권한 허용을 요청한다, 설정된 권한 상태를 반환한다
  const settings = await notifee.requestPermission();

  // 권한 상태는 settings.authorizationStatus로 확인할 수 있다
  if (settings.authorizationStatus >= AuthorizationStatus.DENIED) {
    return true;
  } else return false;
};

 

• 권한 요청 없이 현재 권한의 허용 여부를 확인할 수도 있다.

import notifee, { AuthorizationStatus } from '@notifee/react-native';

const checkIsNotificationPermissionGranted = async () => {
  // 현재 권한 상태를 확인한다
  const settings = await notifee.getNotificationSettings();

  if (settings.authorizationStatus >= AuthorizationStatus.DENIED) {
    return true;
  } else return false;
};

 

알림 전송

• 권한이 허용된 상태에서 알림을 띄울 수 있다.
• 안드로이드의 경우, 알림을 띄우기 위해서는 createChannel을 통해 '채널'을 생성해야 한다.
• displayNotification을 사용하여 실제로 알림을 띄울 수 있다. 이 때 알림 제목과 내용이 되는 title과 body는 필수적으로 입력해야 한다. ios나 android 속성을 사용해서 OS별로 다른 옵션을 줄 수도 있다. (참고)

채널은 AOS만의 개념으로, 알림들을 카테고리화 하고 사용자가 기기에서 알림들을 관리할 수 있게 한다. 여기서는 다루지 않지만 알림들을 그룹화하는 것 또한 가능하다.

import notifee from '@notifee/react-native';

const showNotification = async (title: string, body:string) => {
  // ...
  
  // AOS에서 알림을 보내기 위해서 채널을 생성한다
  const channelId = await notifee.createChannel({
    id: NOTIFEE_CHANNEL,
    name: 'default channel',
  });

  // 로컬 알림을 띄운다
  await notifee.displayNotification({
    title,
    body,
    android: {
      channelId,
      badgeCount: 1,
    },
  });
};

 

※ 채널을 생성하는 createChannel은 채널 당 꼭 한 번만 실행될 필요는 없다. 새 채널의 경우는 새로 생성하고 기존에 이미 존재하는 채널이라면 업데이트 하기 때문에 계속해서 호출해도 괜찮다고. (참고)

 

 

Trigger

• Trigger를 사용하면 특정 조건이 충족되었을 때 알림을 전송하는 것이 가능하다.
• Trigger에는 두 가지 종류가 존재하며, 각각 Interval 트리거와 Timestamp 트리거이다.
• 이중 Android 버전이 12 이상인 AOS에서 Timestamp 트리거를 사용하기 위해서는 별도의 권한 요청이 필요하다. (참고)

import notifee, { AndroidNotificationSetting } from '@notifee/react-native';

const requestAndroidPermissionSettings = async () => {
  const settings = await notifee.getNotificationSettings();

  if (settings.android.alarm !== AndroidNotificationSetting.ENABLED) {
    // 안드로이드에서 알람 권한을 설정한다
    await notifee.openAlarmPermissionSettings();
  }
};

 

• Trigger를 사용하기 위해선 TimestampTrigger 타입의 trigger를 정의해야 한다.
• Trigger 정의 시 Trigger의 종류, 시간 등을 설정할 수 있다.
• 정의한 Trigger를 사용하여 createTriggerNotification으로 Trigger를 등록한다.
• Trigger 사용 시에도 AOS에선 채널이 필요하기 때문에, 채널이 생성되어있지 않다면 생성해야 한다.
• 이미 추가한 Trigger를 업데이트하고 싶을 때도 createTriggerNotification을 사용한다. id에 미리 만들어둔 Trigger의 id를 넣기만 하면 된다.

import notifee, { TimestampTrigger, TriggerType } from '@notifee/react-native';

const createScheduledNotification = async (
  id: string,
  title: string,
  body: string,
  alarmTime: Date,
) => {
  // Trigger를 정의한다
  const trigger: TimestampTrigger = {
    type: TriggerType.TIMESTAMP, // Interval과 Timestamp 중 선택
    timestamp: alarmTime.getTime(), // 언제 알림을 띄울 것인지 시간 설정
    alarmManager: true, // AOS에서 알림을 띄우기 위해 추가해야 함
  };
  
  // Trigger Notification을 생성한다
  await notifee.createTriggerNotification(
    {
      id,
      title,
      body,
      android: {
        channelId: NOTIFEE_CHANNEL,
      },
    },
    trigger,
  );
};

 

• 만들어진 Trigger를 삭제하고 싶을 경우, cancelTriggerNotification을 사용한다.

import notifee from '@notifee/react-native';

const cancelScheduledNotification = async (id: string) => {
  await notifee.cancelTriggerNotification(id);
};

• 혹은 cancelAllNotifications를 사용해서 이미 표시 되어있는 알림 및 미래에 표시될 알림을 모두 취소하는 것이 가능하다.

 

• Timestamp 트리거는 Trigger의 실행 주기를 설정하는 것이 가능하다.
• Trigger 정의 시 repeatFrequency를 원하는 주기로 설정하면 된다.
  • 설정 가능한 주기로는 한 시간, 하루, 일주일 세 가지가 있다.

// ...
const trigger: TimestampTrigger = {
  type: TriggerType.TIMESTAMP,
  timestamp: alarmTime.getTime(),
  repeatFrequency: RepeatFrequency.DAILY, // 반복 주기를 설정할 수 있다
  alarmManager: true,
};

 

---

• 여기선 따로 정리하지 않았지만 알림의 액션을 설정해서 다양한 상호작용이 가능하게 한다던지 흥미로운 기능을 가지고 있다.
• 나중에 조금 더 시간이 나면 actions과 이벤트 핸들러 등에 대해서 좀 더 써보는 것으로...