본문으로 건너뛰기

(Advanced) Client SDK - React Native

1. 푸시 알림 사전 동의​

유저가 푸시 알림을 수신하기 위해서는 푸시 알림 수신 동의를 받아야 합니다. Notifly React Native SDK에서는 따로 사용자에게 푸시 알림 수신 동의를 요청하지 않고 있습니다. 사용자 알림 수신 동의는 Notifly React Native SDK 설치와 무관하게 앱 내에서 직접 구현하셔야 합니다.

Firebase Messaging을 사용하고 계신 경우, Firebase Messaging 문서를 참고하여 구현하시면 됩니다.

2. 푸시 알림 클릭 이벤트 구독​

SDK 버전

해당 기능은 Notifly React Native SDK 3.2.0 이상 버전부터 지원됩니다.

지원되는 플랫폼

해당 기능은 Android 플랫폼에서만 지원됩니다.

iOS 플랫폼의 경우, Firebase Messaging SDK를 사용하여 푸시 알림 클릭 이벤트를 구독하실 수 있습니다. Firebase Messaging SDK - Handling messages를 참고해 주세요.

Notifly Flutter SDK에서는 푸시 알림 클릭 이벤트를 구독하여 사용자가 푸시 알림을 클릭했을 때 앱 내에서 특정 동작을 수행하도록 커스터마이즈 할 수 있습니다.

index.js
import notifly from "notifly-sdk";

if (Platform.OS === "android") {
  notifly.setLogLevel(2);
}

notifly.initialize({
  projectId: NOTIFLY_PROJECT_ID,
  username: NOTIFLY_USERNAME,
  password: NOTIFLY_PASSWORD,
});

if (Platform.OS === "android") {
  notifly.addNotificationClickListener((event) => {
    console.log("Title of clicked notification:", event.notification.title);
    console.log("Body of clicked notification:", event.notification.body);
    console.log(
      "Custom data of clicked notification:",
      event.notification.customData,
    );
    // Do whatever you like when the notification is clicked
  });
}

AppRegistry.registerComponent(appName, () => AppWrapper);

2-1. 푸시 알림 클릭 이벤트 인터페이스​

OSNotificationClickEvent의 notification 멤버에 접근하여, 사용자가 클릭한 푸시 알림의 정보를 확인할 수 있습니다.

notification.d.ts
export type NotificationClickListener = (
  event: OSNotificationClickEvent,
) => void;

export declare enum OSNotificationImportance {
  LOW = 0,
  NORMAL = 1,
  HIGH = 2,
}

export interface OSNotificationClickEvent {
  notification: OSNotification;
}

export interface OSNotification {
  notiflyMessageId?: string;
  androidNotificationId?: number;
  campaignId?: string;
  title?: string;
  body?: string;
  importance?: OSNotificationImportance;
  url?: string;
  imageUrl?: string;
  sentTime?: number;
  ttl?: number;
  customData?: {
    [key: string]: any;
  };
  rawPayload?: {
    [key: string]: any;
  };
}
Property nameTypeDescriptionSince
androidNotificationIdnumberAndroid system-level 푸시 알림 ID입니다.1.4.0
campaignIdstring?푸시 알림이 발송된 Notifly 캠페인의 ID입니다.1.4.0
bodystring?푸시 메시지의 내용입니다.1.4.0
titlestring?푸시 메시지의 제목입니다.1.4.0
urlstring?푸시 메시지가 클릭되었을 때 이동할 URL입니다. 만약 '앱 실행' 액션으로 푸시 알림을 발송하였다면, undefined 값이 반환됩니다.1.4.0
customData{[key: string]: any}?FCM 푸시 메시지의 data 필드에 포함된 키-값 쌍의 커스텀 데이터입니다. 노티플라이 콘솔에서 설정할 수 있습니다.1.4.0
imageUrlstring?이미지형 푸시 메시지에 포함된 이미지 URL 입니다.1.4.0
importanceOSNotificationImportanceOSNotificationImportance.HIGH, OSNotificationImportance.NORMAL, OSNotificationImportance.LOW 중 하나의 값입니다.1.4.0
notiflyMessageIdstring?Notifly 서버에서 임의로 생성한 메시지 ID입니다.1.4.0
rawPayload{[key: string]: any}?FCM data의 가공되지 않은 payload입니다. JSON을 stringify한 형태로 반환됩니다.1.4.0
sentTimenumberFCM 서버에서 푸시 알림을 발송한 시간입니다.1.4.0
ttlnumber푸시 알림의 TTL(Time To Live) 값입니다.1.4.0