FireBase 푸시 가이드

---

프론트 && 애플 환경설정 참고

1. https://velog.io/@mayinjanuary/React-Native-Firebase-로-푸쉬-알림-구현하기-2-IOS-앱-세팅하기#53-여기까지-했는데-푸쉬-알림-테스팅에-실패했다면

• https://velog.io/@mayinjanuary/React-Native-Firebase-로-푸쉬-알림-구현하기-안드로이드-세팅#-4-푸쉬알림-수신-코드-작성하기

(최초 설정, 처음 적용시 아래 애플설정, 안드로이드 설정 필요. 견적주세요는 이미 설정 된 상태라 생략 가능)

---

---

---

---

xcode 환경설정 (vscode말고 xcode에서 해야함)

Gyunju 폴더 root에 넣을 파일

그리고 이걸 Xcode 에 열려 있는 내 프로젝트의 root 에 추가해줍니다.RN Firebase 공식 문서에는 복잡하게 되어있지만 그냥 drag & drop 으로도 됩니다. 위치만 착각하지 마세요!!

GoogleService-Info.plist 파일을 옮겨놓으려 하면 이런 창이 뜹니다.Copy items if needed 과 Create groups 에 체크해주시고 Finish 를 눌러주세요.

App.Delegate.m

#import "AppDelegate.h"
#import <Firebase.h>

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
if ([FIRApp defaultApp] == nil) {
      [FIRApp configure];
    }
RCTAppSetupPrepareApp(application);

알림 설정

xCode 의 개발 소스로 돌아갑니다.

Signing & Capabilities -> + Capability

• Push Notifications를 추가합니다.
• Background Modes 를 추가하고 Remote Notifications 에 체크합니다.

이렇게 앱에서 push notification 을 받을 준비는 끝났습니다.

리액트 네이티브 설정

ios - Podfile에 추가

target 'Gyunju' do
  config = use_native_modules!

  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true

프론트 라이브러리 설치

안드로이드 화면 깨우기

https://www.npmjs.com/package/react-native-android-wake-screen

yarn add @react-native-firebase/app @react-native-firebase/messaging

yarn add react-native-android-wake-screen → 이건 선택사항

App.tsx

import messaging from '@react-native-firebase/messaging';	

// 앱 실행시 알람 동의창
	async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (enabled) {
      console.log('Authorization status:', authStatus);
    }
		// 유저 토큰
    console.log(await messaging().getToken());
  }
	// 앱 실행상태에서 알람 받을때
  useEffect(() => {
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);

  requestUserPermission();

index.js

import messaging from '@react-native-firebase/messaging';
import AndroidWakeScreen from 'react-native-android-wake-screen';

// 안드로이드에서 알림 수신시 화면 켜는 함수
const MyHeadlessFunction = async () => {
  AndroidWakeScreen.wakeScreen();
};

// 백그라운드 및 종료된 상태에서 알람수신
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('Message handled in the background!', remoteMessage);
  MyHeadlessFunction();
});

안드로이드 스튜디오 설정 ( vscode말고 안드로이드 스튜디오에서 해야함.)

Gyunju > app 폴더에 추가 할 파일

android/bundle.gradle (Gradle Scripts > Project: Gyunju)

dependencies{
classpath("com.android.tools.build:gradle:7.2.1")
    // ... other dependencies
    classpath ('com.google.gms:google-services:4.3.8')
    // ^ 이거 한 줄 추가
}

android/app/build.gradle (Gradle Scripts > Module:Gyunju.app)

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- 추가

...

dependencies {
    ...

    // 아래 두 줄 추가
    // Add the SDK for Firebase Cloud Messaging
    implementation 'com.google.firebase:firebase-messaging:20.2.3'

    ...
}

백엔드 설정

라이브러리 설치

네스트 라이브러리

https://www.npmjs.com/package/nestjs-fcm

yarn add nestjs-fcm

FireBase SDK 파일 추가

백엔드에 카피

core.module.ts 또는 app.module.ts

import * as path from 'path';

import { FcmModule } from 'nestjs-fcm';

imports : [FcmModule.forRoot({
      firebaseSpecsPath: path.join("/home/ubuntu/k1-BE/fcm-sdk.json"),
    }),]

알림 푸시 코드

import { FcmService } from 'nestjs-fcm';

constructor(private readonly fcmService: FcmService) {}

let payload = {
      notification : {
        title:'견주',
        body:'견주바디',
      }
    }
    await this.fcmService.sendNotification([
      'token1', 'token2'],
			payload
      false,
    );