📘
타 푸시 솔루션과 함께 사용할 수 있습니다
타 푸시 솔루션과 함께 사용하려면 타 푸시 솔루션의 iOS Swizzling 옵션을 비활성화해야 합니다. Swizzling 비활성화 후, 해당 솔루션의 가이드를 참고하여 푸시 알림 처리를 수동으로 설정해 주세요.

Android Firebase 연동

Firebase 프로젝트 연동하기

안드로이드 앱에서 푸시 메시지를 사용하기 위해서는 핵클 워크스페이스와 Firebase 프로젝트 연동 설정이 필요합니다.

자세한 내용은 Android FCM 연동을 참고해주세요.

Firebase Cloud Messaging SDK 연동하기

Firebase SDK 연동 가이드 및 Firebase Cloud Messaging 설치 가이드를 참고하여 안드로이드 앱 설정을 완료해주세요.

iOS APNs 연동

APNs 설정하기

iOS 앱에서 푸시 메시지를 사용하기 위해서는 핵클 워크스페이스와 APNs 연동 설정이 필요합니다. 자세한 내용은 Apple Push Notification Service 설정을 참고하세요.

핵클 SDK와 연동하기

APNs 토큰 전달

핵클에서 React Native 앱이 설치된 기기에 푸시 메시지를 전달할수 있도록 아래의 설정을 완료합니다.

#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import <UserNotifications/UserNotifications.h>

@interface AppDelegate : RCTAppDelegate <UIApplicationDelegate, UNUserNotificationCenterDelegate>

@end

#import "AppDelegate.h"
#import <Hackle/HackleNotification.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  ...
  // 기존 구현된 코드 내에 추가
  UNUserNotificationCenter* center = [UNUserNotificationCenter currentNotificationCenter];
  [center requestAuthorizationWithOptions:(UNAuthorizationOptionAlert + UNAuthorizationOptionSound) completionHandler:^(BOOL granted, NSError * _Nullable error) {}];
  center.delegate = self;
  [[UIApplication sharedApplication] registerForRemoteNotifications];  
  ...
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [HackleNotification setPushToken:deviceToken];
}

푸시 메시지 표시

Xcode로 /ios/{APP_NAME}.xcworkspace 파일을 열어 프로젝트를 연 후 Signing & Capabilities 탭에서 + Capability를 아래와 같이 클릭해주세요.

Push Notifications과 Background Modes 를 추가해주세요.

Background Modes의 Remote notifications를 활성화해 주세요

핵클에서 보낸 푸시 메시지를 표시하기 위해서는 아래와 같이 설정해 주세요.

// Foreground push message
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler {
   
  if([HackleNotification userNotificationCenter:center willPresentNotification:notification withCompletionHandler:completionHandler]){
    // Succefully processed notification
    // Automatically consumed completion handler
    return;
  }else{
    NSLog(@"Do something");
    completionHandler(UNNotificationPresentationOptionList | UNNotificationPresentationOptionBanner);    
  }
}

// Converted push message
-(void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)(void))completionHandler {
  if([HackleNotification userNotificationCenter:center didReceiveResponse:response withCompletionHandler:completionHandler]){
    // Automatically consumed completion handler
    return;
  } else {
    // Received non hackle notification or error
    NSLog(@"Do something");
    completionHandler();
  }
}

(Advanced) iOS 이미지를 포함한 푸시 메시지 표시 (Rich Push Notification)

iOS 앱에서 이미지를 포함한 푸시 메시지를 보여주기 위해서는 Notification Service Extension을 추가하여 아래의 설정을 완료합니다.

iOS Rich Push Notification 설정 가이드

iOS Rich Push Notification 에 대한 자세한 사항은 Rich Push Notification 에서 확인 가능합니다.

(Advanced) 딥링크 이동

핵클 푸시 메시지는 클릭 시 딥링크 이동을 지원합니다. 푸시 메시지를 통해 해당 액티비티가 열리는 경우 아래와 같은 방법으로 열린 딥링크 정보를 확인할수 있습니다.

React Native 딥링크에 대한 자세한 사항은 React Native 딥링크 가이드 에서 확인 가능합니다.