Note
최신 라이브러리는 아래 링크를 통해, 다운로드 받을 수 있습니다.
공통 설정 파일은 각 프로젝트 환경에 맞게 적용이 필요
React Native 프로젝트와 같은 경로에 다운로드 받은 라이브러리를 압축 해제 합니다.
React Native 프로젝트의 Root 경로에서 아래와 같이 호출하여 플러그인을 설치합니다.
MacBook:react user$ npx react-native init ReactProject //ReactProject프로젝트 생성
MacBook:react user$ cd ReactProject
MacBook:ReactProject user$ yarn add ../rn-push-plugin/react-native-mpush //모듈 추가
MacBook:ReactProject user$ npm run android //앱 실행
React Native 프로젝트에서 상대경로로 react-native-mpush 플러그인을 설치해야 합니다.
[프로젝트]/android 프로젝트를 Android Studio로 열어 공통 설정파일을 추가합니다. - 플러그인 영역의 src/main/assets/res 아래 모피어스 라이선스(mcore.mobile.lic)와, Manifest.xml 적용
프로젝트 레벨의 build.gradle에 classpath 추가
buildscript {
...
dependencies {
...
classpath 'com.google.gms:google-services:4.4.0'
}
}
//반드시, script 맨 하단에 작성
apply plugin: 'com.google.gms.google-services'
Notification 아이콘은 기본 아이콘으로 지정되어 있어 별도의 아이콘으로 적용하기 위해서는 mipmap의 "ic_launcher" 이미지를 변경하거나 react-native-mpush 모듈 내의 FcmNotifyHelper.java에 icon 변경 후 모듈 재 적용.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
<item name="android:textColor">#000</item> // Text 태그의 폰트 색상
<item name="android:textColorHint">#999</item> // TextInput 태그의 힌트 폰트 색상
<item name="android:editTextColor">#000</item> // TextInput 태그의 폰트 색상
</style>
React Native 프로젝트와 같은 경로에 다운로드 받은 라이브러리를 압축 해제 합니다.
React Native 프로젝트에서 아래와 같이 호출하여 라이브러리를 설치합니다.
MacBook:react user$ npx react-native init ReactProject
MacBook:react user$ cd ReactProject
MacBook:ReactProject user$ cordova platform add ios
MacBook:ReactProject user$ yarn add ../rn-push-plugin/react-native-mpush
MacBook:ReactProject user$ cd ios
MacBook:ios user$ pod install
React Native 프로젝트에서 상대경로로 react-native-mpush 플러그인을 설치해야 합니다.
iOS 프로젝트를 XCode에서 열어 공통 설정 파일을 추가합니다.
APNS 사용을 위해 Capability를 설정합니다.
PushManager 초기화 및 앱 구동시의 푸시 메시지를 전달하기 위해 AppDelegate에 초기화 코드를 추가합니다.
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <MPushLibrary/MPushLibrary.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.moduleName = @"ReactProject";
// You can add your custom initial props in the dictionary below.
// They will be passed down to the ViewController used by React Native.
self.initialProps = @{};
//PushManager 초기화 및 메시지를 전달
[[PushManager defaultManager] application:application didFinishLaunchingWithOptions:launchOptions];
#ifdef DEBUG
/* APNS_MODE설정을 위한 값(4.0이상)
* 여러 위치 사용 가능 설명을 위해 PushReceiver.m 파일에도 샘플 코드가 있음 *
- APNS_MODE는 서버에서 메시지 발송시 APNS서버를 TEST로 발송할지 REAL로 발송할지의 대한 여부값이 됨
- RegisterService API호출시 서버에 해당값을 전달
- PushManager 초기화시 값이 설정되며 default 값은 REAL
- 개발용 인증서로 빌드시 APNS TOKEN값은 TEST토큰값이므로 DEV설정 필요
*/
[[PushManager defaultManager].info changeMode:@"DEV"];
#endif
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
return [self getBundleURL];
}
- (NSURL *)getBundleURL
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end
API 테스트 샘플을 위한 PushApp.tsx 파일을 참고하여 테스트를 진행해보실수 있습니다.
iOS 메시지 수신 흐름도
{
"aps": {
"alert": {
"body":"body"
"title":"title"
},
"badge": 1,
"mutable-content": 1,
"sound": "alert.aif"
},
"mps": {
"cuid":"testCUID"
"ext": "8||https://umsapi.morpheus.kr/data/nas/image.png|",
"appid": "com.uracle.push.test",
"psid": "eddf0fb943b8b13e4ee9b3268e7854b59a43f2c63d99f1a405b0a2383cf55718"
"pushkey": "fa0ef0f129cb4cd1addbdb2984fb655d042eb74d"
"seqno": "1247292",
"sender": "admin",
"senddate": "2024022309",
"db_in": "Y"
}
}
푸시 관련 기능을 제공한다.
Arguments
Example:
mPush.registerServiceAndUser({
cuid:"tester",
name:"testerName"
},
(callback :any) => {
console.log("registerServiceAndUser result \n\n"+callback);
});
Arguments
Example:
mPush.unregisterService(
(callback :any) => {
console.log("unRegisterService result \n\n "+callback);
}
);
Arguments
Example:
mPush.unregisterUser(
(callback :any) => {
console.log("unRegisterUser result \n\n "+callback);
}
);
Arguments
Example:
mPush.sendNotification({
cuid : 'tester',
serviceCode: 'ALL',
message:'기본알림입니다.'
},
(callback :any) => {
console.log("sendNotification result \n\n "+callback);
}
);
Arguments
mPush.readNotification({
notification: noti
},
(callback :any) => {
console.log("readNotification result \n\n "+callback);
}
);
Arguments
Example:
mPush.remoteSetBadge({
badge:10
},
(callback :any) => {
setResult("remoteSetBadge result \n\n "+callback);
}
);
Arguments
Example:
mPush.notificationCenterGetBadgeNumber(
(callback :any) => {
setResult("notificationCenterGetBadge = " + callback);
}
);
Arguments
Example:
mPush.notificationCenterGetBadgeNumber(
(callback :any) => {
setResult("notificationCenterGetBadge = " + callback);
}
);