내 리액트 네이티브 앱에 푸시 알림을 통합하고 수신된 푸시 알림을 Freshchat SDK로 보내려면 어떻게 해야 하나요?

안드로이드

1. Firebase 설정

애플리케이션에 대한 Firebase 계정이 있는 경우 이 단계를 건너뛸 수 있습니다. 애플리케이션에 대한 Firebase 계정이 없는 경우, https://firebase.google.com/docs/android/setup를 참조하여 계정을 생성하세요.

2. Freshchat FCM 키 구성

Firebase 콘솔에서 프로젝트 아래의 클라우드 메시징 탭으로 이동하여 서버 키를 확인하고 복사합니다.
Freshchat 웹 포털에서 관리자 > 모바일 SDK 아래에 서버 키를 붙여넣습니다.

3. Firebase에 Android 프로젝트 추가

Android 앱에 Firebase 추가를 클릭하고 설정 단계를 따릅니다. 기존 Google 프로젝트를 가져오는 경우, 이 과정이 자동으로 진행될 수 있으며 구성 파일을 다운로드하면 됩니다.
프롬프트가 나타나면 앱의 패키지 이름을 입력합니다. 앱이 사용하는 패키지 이름을 입력하는 것이 중요합니다. 이는 Firebase 프로젝트에 앱을 추가할 때만 설정할 수 있습니다.
과정 중에 google-services.json 파일을 다운로드하게 됩니다. 이 파일은 언제든지 다시 다운로드할 수 있습니다.
google-services 플러그인과 Google의 Maven 저장소를 포함하도록 루트 수준 build.gradle 파일에 규칙을 추가합니다,

buildscript {
      // ...
      dependencies {
          // ...
          classpath 'com.google.gms:google-services:4.2.0' // google-services plugin
      }
  }
 
  allprojects {
      // ...
      repositories {
          // ...
          google() // Google's Maven repository
      }
  }

v. 그런 다음, 모듈 Gradle 파일(일반적으로 app/build.gradle)에서 파일 하단에 플러그인 적용 줄을 추가하여 Gradle 플러그인을 활성화합니다,

apply plugin: 'com.android.application'
  android {
      // ...
    }
    dependencies {
      // ...
      implementation 'com.google.firebase:firebase-core:16.0.6'
      // Getting a "Could not find" error? Make sure you have
      // added the Google maven respository to your root build.gradle
    }
    // ADD THIS AT THE BOTTOM
    apply plugin: 'com.google.gms.google-services'

초기화 코드를 추가한 후, 앱을 실행하여 Firebase 콘솔에 Firebase가 성공적으로 설치되었음을 확인합니다.

4. 푸시 토큰 수신

FirebaseMessagingService.java를 생성해야 합니다.

FirebaseMessagingService를 사용하려면 앱 매니페스트에 다음 코드를 추가해야 합니다,

<service android:name=".java.MyFirebaseMessagingService">
      <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT" />
      </intent-filter>
  </service>

푸시 토큰은 FirebaseMessagingService 클래스의 onNewToken 함수에서 수신됩니다.

자세한 내용은 https://firebase.google.com/docs/cloud-messaging/android/client#monitor-token-generation을 참조하세요.

푸시 토큰을 수신한 후, 아래 코드를 사용하여 Freshchat에 전달할 수 있습니다.

Freshchat.getInstance(context).setPushRegistrationToken(token);

5. 푸시 알림 수신 및 React Native Freshchat SDK로 전달

FirebaseMessagingService에서 onMessageReceived() 메서드를 재정의하여 푸시 알림 페이로드에 접근할 수 있습니다.

아래 코드를 사용하여 수신된 페이로드를 React Native Freshchat SDK로 전달하세요. 이를 FirebaseMessagingService.java에 추가합니다.

package com.example.hotlineapp;

import com.freshchat.consumer.sdk.Freshchat;
import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

public class MyFirebaseMessagingService extends FirebaseMessagingService {

	@Override
	public void onMessageReceived(RemoteMessage remoteMessage) {
		if (Freshchat.isFreshchatNotification(remoteMessage)) {
			Freshchat.handleFcmMessage(this, remoteMessage);
		}
	}
}

참고: Freshchat 네이티브 SDK는 React Native Freshchat SDK의 일부이므로, "com.freshchat.consumer.sdk.Freshchat"이 빨간색으로 표시될 수 있습니다 (클래스 해결 불가 오류). 하지만 이러한 클래스는 빌드 생성 시 추가됩니다.

iOS

1. 푸시 알림 p12 인증서 생성 및 Freshchat에 업로드

https://support.freshchat.com/support/solutions/articles/232534을 참조하세요.

2. 푸시 알림 기능 활성화

Xcode 프로젝트의 기능 섹션으로 이동하여 푸시 알림 기능을 활성화합니다.

3. UserNotifications 프레임워크 설정

i. Appdelegate 클래스 내에 UserNotifications 프레임워크를 가져옵니다.

ii. Appdelegate 클래스가 UNUserNotificationCenterDelegate 프로토콜을 준수하도록 하고, 내부에 다음 코드를 추가합니다.

application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions [UIApplicationLaunchOptionsKey: Any]?) -> Bool function,

    UNUserNotificationCenter.current().delegate = self

    UNUserNotificationCenter.current().requestAuthorization(options:[.badge, .alert, .sound]){ (granted, error) in }

    UIApplication.shared.registerForRemoteNotifications()

iii. Appdelegate 클래스에서 UNUserNotificationCenterDelegate 프로토콜의 다음 메서드를 구현합니다.

* func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) 
// To handle Push notification click event.

    * func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) 
// To pass the device token generated from the device

4. Freshchat에 디바이스 토큰 전달

사용자가 푸시 알림에 대한 권한을 부여한 후 실행되는 다음 함수에서 디바이스 토큰을 Freshchat SDK로 전달합니다.

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {

        Freshchat.sharedInstance().setPushRegistrationToken(deviceToken)

    }

5. 앱 종료 상태에서 푸시 알림 클릭 처리

application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool 함수 아래에 다음 줄을 추가합니다,

if Freshchat.sharedInstance().isFreshchatNotification(launchOptions) {
            Freshchat.sharedInstance().handleRemoteNotification(launchOptions, andAppstate: application.applicationState)
}

먼저 알림이 Freshchat에서 온 것인지 확인하고, 그렇다면 handleRemoteNotification 함수를 호출하여 Freshchat SDK에 세부 정보를 전달합니다.

6. 앱 실행 상태에서 푸시 알림 클릭 처리

앱이 실행 중일 때 푸시 알림 클릭을 처리하기 위해 다음 코드를 추가합니다,

func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {

        let dictionary = response.notification.request.content.userInfo

        let appstate = UIApplication.shared.applicationState

        if Freshchat.sharedInstance().isFreshchatNotification(dictionary) {

            Freshchat.sharedInstance().handleRemoteNotification(dictionary, andAppstate: appstate)

        }

    }

내 리액트 네이티브 앱에 푸시 알림을 통합하고 수신된 푸시 알림을 Freshchat SDK로 보내려면 어떻게 해야 하나요?

같은 폴더의 문서

Freshchat AI 도우미