REACT NATIVE FIREBASE 및 FCM을 사용하여 IOS 및 ANDROID에서 사용자 지정 푸시 알림 소리를 추가하는 방법

 

www.embusinessproducts.com/how-to-add-a-custom-push-notification-sound-on-ios-and-android-with-react-native-firebase-and-fcm/

How to add a custom push notification sound on iOS and Android with React Native Firebase and FCM | EMBP

React Native Firebase 라이브러리 및 Firebase 클라우드 메시징 (FCM)을 사용하여 iOS 및 Android에서 작동하는 사용자 지정 푸시 알림 사운드를 얻는 방법을 문서화하고 싶습니다.

일단 이해하면 그 과정은 어렵지 않습니다. 이를 수행하는 방법에 대한 완전한 지침을 찾기가 어렵습니다. 프로젝트에서 설정할 때 시간을 절약 할 수 있기를 바랍니다.

FIREBASE 라이브러리 설정

첫 번째 단계는 분명한 단계입니다. React Native Firebase 핵심 라이브러리와 클라우드 메시징 모듈 을 설치해야합니다 . 각 플랫폼에 대한 모든 지침을주의 깊게 따르십시오.

사운드 형식 선택

Apple 지원 .wav .aiff또는 .caf파일. 안드로이드 지원 .mp3, .ogg또는 .wav.

백엔드 서버가 두 플랫폼에 대해 동일한 푸시 본문을 사용했기 때문에 두 플랫폼이 공유 할 수있는 형식을 사용하는 것이 더 쉬웠으므로 .wav.

IOS에서 사용자 지정 사운드 설정

1. your_project_root/ios거기로 가서 소리를 넣으십시오. 이것은 아직 프로젝트에 추가하는 것이 아니라 사운드를 논리적 인 위치에 배치합니다.
2. Xcode를 열고 프로젝트 탐색기 탭으로 이동합니다.
3. 프로젝트로 사운드를 드래그하십시오. 대화 상자에서 "필요한 경우 파일 복사"를 선택합니다.
4. 그게 다야!

ANDROID에서 사용자 지정 사운드 설정

Android에서의 설정은 iOS보다 조금 더 복잡합니다. Android API 레벨 26부터 알림이 전혀 작동하려면 알림 채널에 알림을 설정해야합니다.

ANDROID 알림 채널

채널은 사용할 소리, 진동 패턴 및 푸시 알림에 대한 기타 사항을 정의합니다. React Native Firebase 는 내부적으로 자체 채널을 만들어 클라우드 메시징 라이브러리에 기본 푸시 기능을 제공하지만 맞춤 사운드 또는 기타 맞춤 설정을 원하는 경우이 채널에 액세스하여 수정할 수 없습니다. 고유 한 사용자 지정 알림 채널을 만들어야합니다. 네이티브 Android에서 이것은 런타임에 실행되는 Java 코드이며 구성 파일에서 수행되지 않습니다.

React Native Firebase 는 채널 생성을 위해이 기본 API에 API를 제공하지 않습니다. 이전에는 v5에서 제공했지만 v6 이후 Firebase 범위를 벗어 났기 때문에 지원을 중단했습니다.

운 좋게도 사용자 정의 라이브러리없이 자신을 추가하는 것은 매우 간단합니다. MainActivity.java프로젝트에서 파일 을 업데이트하기 만하면 알림 채널이 생성되고 구성됩니다.

알림 채널을 만들기 전에. 다음을 수행해야합니다.

1. 알림 채널의 이름 정의

그것은 무엇이든 될 수 있으며, 푸시 메시지에서 맞춤 채널을 타겟팅하는 데 사용하여 채널에 연결할 맞춤 사운드가 재생되도록합니다.

앱을 설치 한 후에는 앱이 제거 될 때까지 채널 이름이 등록 된 상태로 유지됩니다. 나중에 채널 이름을 변경하는 경우이를 염두에 두십시오.

2. 사운드를 리소스로 추가

.wav사운드를 your_project_root/android/app/src/main/res/raw폴더 로 드래그하십시오 (존재하지 않는 경우 생성).

알림 채널 코드 추가

아래 코드는 클래스 의 onCreate메서드 내부에 배치해야합니다 MainActivity. 괄호로 묶인 텍스트를 직접 입력하고 알림에 필요한 모든 것을 사용자 지정합니다.

	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
	NotificationChannel notificationChannel = new NotificationChannel("{ENTER THE NOTIFICATION NAME HERE}", "{ENTER APP NAME HERE}", NotificationManager.IMPORTANCE_HIGH);
	notificationChannel.setShowBadge(true);
	notificationChannel.setDescription("");
	AudioAttributes att = new AudioAttributes.Builder()
	.setUsage(AudioAttributes.USAGE_NOTIFICATION)
	.setContentType(AudioAttributes.CONTENT_TYPE_SPEECH)
	.build();
	notificationChannel.setSound(Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + getPackageName() + "/raw/{ENTER SOUND NAME HERE WITHOUT EXTENSION}"), att);
	notificationChannel.enableVibration(true);
	notificationChannel.setVibrationPattern(new long[]{400, 400});
	notificationChannel.setLockscreenVisibility(NotificationCompat.VISIBILITY_PUBLIC);
	NotificationManager manager = getSystemService(NotificationManager.class);
	manager.createNotificationChannel(notificationChannel);
	}

다음은 일부 값이 채워진 코드 예제입니다.

	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
	NotificationChannel notificationChannel = new NotificationChannel("new_email_arrived_channel", "My Emailer", NotificationManager.IMPORTANCE_HIGH);
	notificationChannel.setShowBadge(true);
	notificationChannel.setDescription("");
	AudioAttributes att = new AudioAttributes.Builder()
	.setUsage(AudioAttributes.USAGE_NOTIFICATION)
	.setContentType(AudioAttributes.CONTENT_TYPE_SPEECH)
	.build();
	notificationChannel.setSound(Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + getPackageName() + "/raw/my_custom_sound"), att);
	notificationChannel.enableVibration(true);
	notificationChannel.setVibrationPattern(new long[]{400, 400});
	notificationChannel.setLockscreenVisibility(NotificationCompat.VISIBILITY_PUBLIC);
	NotificationManager manager = getSystemService(NotificationManager.class);
	manager.createNotificationChannel(notificationChannel);
	}

공지 my_custom_sound는 확장자 ( .wav)로 작성되지 않습니다 . 파일 이름 만 추가하면됩니다.

사용자 지정 사운드 테스트

사운드가 제자리에 있으면 이제 구현을 테스트 할 수 있습니다. 테스트하기 전에 앱에서 Firebase의 FCM 토큰을 가져와야합니다. 이 토큰은 FCM에서 푸시 알림을 올바른 기기로 라우팅하는 데 사용됩니다.

콘솔에 FCM 토큰 기록

Firebase에서는 messaging().getToken()함수를 사용하여 FCM 토큰을 검색 할 수 있습니다 . 이 함수를 사용하여 FCM 토큰을 콘솔에 기록합니다.

	const _getToken = async () => {
	try {
	const token = await messaging().getToken();
	console.log('FCM token registered:', token);
	...
	} catch (error) {
	console.error('Error getting FCM token:', error);
	}
	};

Android 및 iOS 장치 모두에 대해이 작업을 수행하십시오. 둘 다에 대해 다른 토큰을 생성합니다.

이 토큰을 사용하여 테스트 장치에 직접 푸시 알림을 보내는 것을 테스트합니다.

FCM REST API로 테스트

서버에서 설정해야하는 푸시 본문을 편집하는 데 필요한 모든 유연성을 제공하므로 FCM REST API로 테스트하는 방법을 보여 드리겠습니다.

테스트를 받으려면 아래 단계를 따르십시오.

POSTMAN 설치

Postman은 데스크톱 컴퓨터를위한 훌륭한 API 테스트 애플리케이션이며 FCM REST API를 매우 쉽게 설정할 수 있습니다. 여기 에서 앱 다운로드 및 설치

FIREBASE 서버 키 가져 오기

Postman을 구성하기 전에 API 푸시 요청이 프로젝트에 대해 인증되어야합니다. 이를 위해 서버 키로 인증해야합니다. 그것을 찾으려면 :

1. Firebase 프로젝트로 이동
2. 프로젝트 설정 버튼 (톱니 바퀴 아이콘)을 클릭하고 프로젝트 설정을 선택합니다.
3. 클라우드 메시징 탭으로 이동
4. 이전 에 React Native Firebase의 설치 지침을 따랐다면 이 페이지 상단에 서버 키가 나열되어있을 것입니다. 그렇지 않다면 아직 클라우드 메시징을위한 프로젝트를 설정하지 않았으며 설치 지침으로 돌아 가야합니다.
5. 서버 키 복사

FCM 푸시 요청을 보내도록 POSTMAN 구성

1. Postman 열기
2. 페이지에서 + 버튼을 클릭하여 새 API 요청을 만듭니다.
3. HTTP 메서드의 경우 POST로 설정합니다.
4. URL을 https://fcm.googleapis.com/fcm/send
5. 승인 탭으로 이동
6. 인증 유형으로 "Bearer Token"을 선택
7. Firebaess 프로젝트의 서버 키를 토큰 필드에 추가하십시오.
8. 본문 탭으로 돌아 가기
9. 본문 유형을 "원시"로 설정
10. 본문 유형 옵션 끝에있는 데이터 유형이 텍스트 또는 다른 유형이 아닌 JSON으로 설정되어 있는지 확인하십시오.

푸시 바디 설정

이제 요청이 구성되었으므로 푸시 본문을 추가하겠습니다. 이는 데이터 유형 옵션 아래의 빈 영역에있는 본문 탭에서 수행됩니다. 다음은 본문의 예입니다.

	{
	"to": "<FCM TOKEN>",
	"notification": {
	"title": "Some title",
	"body": "Some body",
	"sound": "my_custom_sound.wav",
	"android_channel_id": "new_email_arrived_channel"
	},
	"data": {
	"field1": "value1",
	"field2": "value2"
	},
	"content_available": true,
	"priority": "high"
	}

사운드를 작동시키기위한 핵심 항목은 "to", "sound"및 "android_channel_id"필드입니다.

필드에

여기에 기기의 FCM 토큰을 따옴표로 묶어야합니다.

음장

음장은 확장자를 포함한 사운드 이름을 설정해야합니다.

android_channel_id 필드

'android_channel_id'필드에는 이전에 만든 맞춤 Android 푸시 채널의 이름이 있어야합니다. 이러한 이름은 일치해야합니다. 그렇지 않으면 채널을 찾을 수 없으며 기기에서 기본 사운드 만 재생됩니다.

참고 : 인터넷에서 필드 이름이 "android_channel_id"가 아니라 "channel_id"여야한다고 말하는 포럼을 찾을 수 있습니다. 이것은 절반 사실입니다. Android에서 푸시 필드의 REAL 이름이 "channel_id"인 것이 정확합니다. 그러나 우리는 FCM을 사용하고 있으며 FCM은 iOS와 Android를 모두 처리합니다. Google의 푸시 서버에 직접 요청하지 않습니다.

따라서 FCM의 경우 필드 이름은 'android_channel_id'이지만 푸시가 Android 기기에 전달되면이 필드는 'channel_id'로 제공됩니다. FCM은 전달 된 필드 이름을 올바르게 번역합니다.

알림 보내기

Postman에서 보내기 버튼을 누르면 사용자 정의 사운드로 푸시를 수신해야합니다.

API 호출에서 오류가 발생하면 오류를 해결해야합니다.

일반적인 문제 해결

소리를 재생하는 데 문제가 있거나 푸시가 여기에서 나오지 않는 경우 문제 해결에 도움이되는 몇 가지 제안 사항이 있습니다.

• 각 플랫폼에 대해 Firebase 프로젝트 및 React Native Firebase 라이브러리 설치 지침을 정확히 따랐는지 확인하십시오.
• iOS의 경우 샌드 박스 및 프로덕션 APNS 서버에 대한 푸시 인증서를 추가했는지 또는 푸시 인증 키를 추가했는지 확인합니다.
• 푸시 인증서 또는 푸시 인증 키를 다시 생성 해보십시오. 이것은 한 번의 경우 iOS의 푸시 문제를 해결했습니다.
• FCM 본체의 푸시 사운드에 확장 기능이 설정되어 있는지 확인하십시오.
• Android 채널에 정의 된 푸시 사운드에 MainActivity.java파일 확장자가 없는지 확인하십시오.
• 사운드가 빌드와 함께 번들로 제공되는지 확인하십시오.
• 선택한 사운드 형식 또는 압축이 작동하지 않거나 플랫폼에서 지원되지 않을 수 있습니다. 사운드 압축 / 포맷 설정을 변경해보십시오.

결론

이것이 귀하의 푸시 여정에 도움이되기를 바랍니다. 설정하는 것은 이상하게도 혼란스럽고 복잡한 기능입니다.