react-native 앱 푸시알림음 커스터마이징
일단 제목은 있어보이게 지어야 한다. 그래야 관심을 끌 수 있지 않을까? 라고 나는 순수(?)하게 생각하고 있다. 앱 개발을 이렇게 갑자기 하게 될지는 꿈에도 몰랐지만 어쩌다 보니 react-native 를 이용한 앱을 유지보수하는 일을 하게 됐다. 이번 미션은 FCM 을 이용한 푸시에서 알림음을 커스터마이징? 이라고 해야하나.. 기본 휴대폰 알림음이 아닌 푸시를 보낼 때 알림음을 지정할 수 있도록 하는 것이다.
iOS 와 Android 환경에 대해서 작업을 진해해야 하는데.. iOS는 Xcode 만 있다면 정말 쉽게 작업을 진행할 수 있다.
<project_root>/ios에 알림음 wav 파일을 복사한다.- Xcode 를 실행하고 project navigater 탭을 연다.
- 알림은 wav 파일을 Project 에 끌어다 놓는다. ‘copy files if needed’ 를 체크한다.
- 이걸로 끝!
반면에 Android 는 좀 복잡하다. 앱 소스에 알림 채널을 위한 코드를 생성해야만 한다. 채널이 없다면 기본 알림음만 적용된다.
- 채널 생성
MainActivity.java 파일 상단에 아래 코드를 추가한다.
import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.content.ContentResolver;
import android.media.AudioAttributes;
import android.net.Uri;
import android.os.Build;
import androidx.core.app.NotificationCompat;2. 코드추가
채널 생성을 위한 코드를 아래를 참고해서 추가한다.
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashScreenTheme);
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
NotificationChannel notificationChannel = new NotificationChannel("custom_push_channel", "MyApp", 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/custom_push_sound"), att);
notificationChannel.enableVibration(true);
notificationChannel.setVibrationPattern(new long[]{400, 400});
notificationChannel.setLockscreenVisibility(NotificationCompat.VISIBILITY_PUBLIC);
NotificationManager manager = getSystemService(NotificationManager.class);
manager.createNotificationChannel(notificationChannel);
}
}
}코드 중 NotificationChannel notificationChannel = new NotificationChannel("custom_push_channel", "MyApp", NotificationManager.IMPORTANCE_HIGH); 에서 채널 이름과 앱 이름을 설정한다. 다음으로 notificationChannel.setSound(Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + getPackageName() + "/raw/custom_push_sound"), att); 에서 알림음 wav 파일을 지정해준다. 파일이름에서 .wav 확장자는 빼야한다. 실제 파일은 <project_root>/android/app/src/main/res/raw 에 추가한다.
마지막으로 firebase.json 파일에 안드로이드 채널 설정을 추가한다.
{
"react-native": {
"messaging_android_notification_channel_id": "custom_push_channel"
}
}3. 테스트
앱을 빌드한 후 테스트를 해보면 된다. FCM 이용하는 것은 검색을 통해 직접 확인해 보시면 된다. 대략 FCM 푸시 요청에 채널 이름과 사운드 파일명을 지정해주게 되면 해당음이 재생된다.
{
"to": "<FCM TOKEN>",
"notification": {
"title": "Some title",
"body": "Some body",
"sound": "custom_push_sound.wav",
"android_channel_id": "custom_push_channel"
},
"data": {
"field1": "value1",
"field2": "value2"
},
"content_available": true,
"priority": "high"
}위 설정을 추가하지 않으면 기본 알림음이 재생된다.
참고자료