Push Notification 설치 및 적용

참고링크

• google firebase 공식 도큐먼트

• ios 클라우드 메시징

• 안드로이드 클라우드 메시징

• medium 정리 글 < - - - 추천!

파이어베이스에 앱 등록

필요 패키지 설치 (공통)

• react-native-push-notification

• react-native-firebase ←—————————— 이거대로 하자!!!

# 패키지 설치
$ npm install --save react-native-push-notification
$ npm install --save @react-native-firebase/app@11.5.0
$ npm install --save @react-native-firebase/messaging@11.5.0
$ npm install --save @react-native-community/push-notification-ios
$ npm install --save @react-native-firebase/iid@11.5.0

or

$ yarn add react-native-push-notification
$ yarn add @react-native-firebase/app@11.5.0
$ yarn add @react-native-firebase/messaging@11.5.0
$ yarn add @react-native-community/push-notification-ios
$ yarn add @react-native-firebase/iid@11.5.0

# ios 링킹
$ npx pod-install

앱별 네이티브 추가 환경설정

1) android

안드로이드 Push Notification 셋팅

android/app/src/main/AndroidManifest.xml 편집

• 권한 설정 추가

<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

• 아래 코드를 <application> 태그 사이에 추가

<meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
            android:value="false"/>
<!-- Change the resource name to your App's accent color - or any other color you want -->
<meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
            android:resource="@color/white"/> <!-- or @android:color/{name} to use a standard color -->

<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
    <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED" />
        <action android:name="android.intent.action.QUICKBOOT_POWERON" />
        <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
    </intent-filter>
</receiver>

<service
    android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
    android:exported="false" >
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

 

android/app/src/main/res/values/colors.xml 파일 생성

notification_color meta-data에 built in Android color를 쓰고 있지 않다면 해당 파일 생성.

코드 삽입

<resources>
    <color name="white">#FFF</color>
</resources>

android 추가 고려사항

• Scheduled Notifications(예약 알림) 사용 하려면, AndroidManifest.xml 수동 업데이트 필요

• 뒤에서 다시 다룸

 

 

설정 끝!

 

2) ios - 무료 애플 계정은 안됨. 개발자 계정 필요

• 깃헙 : PushNotificationIOS

# 패키지 설치
$ yarn add @react-native-community/push-notification-ios

# 오토 링킹까지
$ npx pod-install

React Native 코드 설정

index.js 예시

import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';
import { name as appName } from './app.json';

/* ------------ push notification 받기 위한 셋팅 (백그라운드) ------------- */
import Firebase from '@react-native-firebase/app'
import PushNotification from "react-native-push-notification";
import PushNotificationIOS from "@react-native-community/push-notification-ios";

Firebase.initializeApp(this);
// Must be outside of any component LifeCycle (such as `componentDidMount`).
PushNotification.configure({
    // (optional) Called when Token is generated (iOS and Android)
    onRegister: function (token) {
        console.log("TOKEN:", token);
    },

    // (required) Called when a remote is received or opened, or local notification is opened
    onNotification: function (notification) {
        console.log("NOTIFICATION:", notification);

        // process the notification

        // (required) Called when a remote is received or opened, or local notification is opened
        notification.finish(PushNotificationIOS.FetchResult.NoData);
    },

    // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
    onAction: function (notification) {
        console.log("ACTION:", notification.action);
        console.log("NOTIFICATION:", notification);

        // process the action
    },

    // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
    onRegistrationError: function (err) {
        console.error(err.message, err);
    },

    // IOS ONLY (optional): default: all - Permissions to register.
    permissions: {
        alert: true,
        badge: true,
        sound: true,
    },

    // Should the initial notification be popped automatically
    // default: true
    popInitialNotification: true,

    /**
     * (optional) default: true
     * - Specified if permissions (ios) and token (android and ios) will requested or not,
     * - if not, you must call PushNotificationsHandler.requestPermissions() later
     * - if you are not using remote notification or do not have Firebase installed, use this:
     *     requestPermissions: Platform.OS === 'ios'
     */
    requestPermissions: true,
});
/* --------------------------------------------------------- */


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

Firebase 웹 콘솔에서 Push Noti 테스트

Firebase 웹 콘솔로 Push Noti 테스트

1) Cloud Messaging 시작

• Firebase Console로 이동 → 내 프로젝트 선택 → Cloud Messaging 클릭

 

2) Push 메세지 작성

• 처음이라면 아래 그림이 나오고,

• 아니라면 알림 관련 대시보드 창이 나옴.

 

3) Push 메세지 정보 입력

 

4) Push 메세지 전송

 

5) Push 메세지 관련 대시보드

 

6) 앱에서 수신확인

• 현재 백그라운드 상에서는 아래와 같이 동작하고,

• 포그라운드 상이라면 콘솔로만 찍도록 해놨다.

 

Firebase Admin SDK 사용해서 Push Noti 보내기

• 참고링크, https://rnfirebase.io/

node 서버 코드 작성

node.js (서버)

패키지 설치

$ npm install firebase-admin --save
or
$ yarn add firebase-admin

 

Firebase Admin SDK 키 발급

• json 파일로 다운로드됨.

 

Admin SDK 구성 스니펫

• 아래 코드를 복사해서 admin sdk 사용 가능.

var admin = require("firebase-admin");

//admin sdk 키가 담긴 json 파일 경로로 수정 필요
var serviceAccount = require("path/to/serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

 

푸시 알림 구성, 알림 받을 디바이스 설정

const registrationToken= "<푸시 알림 전달할 디바이스의 토큰값>";

    const payload = {
        notification:{
            title: "제목 테스트",
            body: "바디 테스트"
        }
    };

 

푸시 알림 보내기

• 전송 API 들은 다음 링크 참조
• sendAll()
• send()
• sendToDevice()

admin.messaging().sendToDevice(registrationToken, payload)
    .then( (response) => {
        console.log("Successfully sent message:", response);
    })
    .catch( (error) => {
        console.log("Error sending message:", error);
    })

 

서버 코드 예시

const { response } = require('express');
const express = require('express');
const router = express.Router();


var admin = require("firebase-admin");
var serviceAccount = require("/Users/night-ohl/Desktop/nodeEnv/mobile90-aa3b8-firebase-adminsdk-3lof4-e7501ecadc.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

router.get('/personal', (req, res, next)=>{
    const registrationToken= "eg3bA1gLTkKBY1cAiqUda9:APA91bECfVx_e4SmbEPcJqix1e3OFrwhjqlmTO9_zKeNYtMorZEfoVBU6Pvea56mznzjmGT9Zic-cKoazAlQgOv0Vsodlq-ZthKB3Sw8l0fExSkCAJWh-e86rLMXbZkhdr0deA0pfN9t";

    const payload = {
        notification:{
            title: "제목 테스트",
            body: "바디 테스트"
        }
    };

    admin.messaging().sendToDevice(registrationToken, payload)
    .then( (response) => {
        console.log("Successfully sent message:", response);
    })
    .catch( (error) => {
        console.log("Error sending message:", error);
    })

    res.send("Push-Noti 테스트 완료");
})
module.exports = router;

 

클라이언트 결과