푸시 알림 메세지는 보통 FCM(Firebase Cloud Messaging)을 이용해 개발합니다. FCM은 파이어베이스를 이용해서 구현하고, 파이어베이스와 프로젝트와 연동이 되어있어야합니다. FCM은 아래의 개발 순서 대로 개발 하면 되니 빠진 부분을 체크 해보세요. 그리고 구현 방법을 하나씩 알아보겠습니다.
[개발 순서]
1. 파이어베이스 프로젝트 생성
2. Flutter Project와 파이어베이스 연동
3.파이어베이스 초기화 함수 호출
4.AndroidManifest.xml 파일에 권한 추가
5. 권한 요청(Apple, Web의 경우 필수)
6.파이어베이스 백그라운드 함수 등록
7.파이어베이스 포어그라운드 리스너 함수 등록
8. 터미네이티드 상태 리스터 함수 등록
9. FCM 토큰 가져오기 함수 호출
10. 파이어베이스 콘솔에서 테스트
[구현]
1. 파이어베이스 프로젝트 생성
2. Flutter Project와 파이어베이스 연동
1번과 2번은 따로 다루지 않고 3번부터 설명하겠습니다
(요청해주시면 따로 포스팅을 해드릴게요)
3. 파이어베이스 초기화 함수 호출
아래 함수를 아래와 같은 형태로나 다른 형태로든 FCM 메쏘드들을 호출하기 전에 먼저 호출한다.
void main() async {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
4. AndroidManifest.xml 파일에 권한 추가
아래와 같이 두가지 기능을 추가한다.
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
5. 권한 요청(Apple, Web의 경우 필수)
여기서 부터는 FCM 메쏘드들을 넣을 비동기 함수를 만들어서 다 집어 넣거나 아니면 순서대로 호출 한다.
(저는 initFCM 이나 setFCM 등 여러가지 형태로 네이밍을 해서 다 집어 넣는다.)
Future<void> setFCM() async {
NotificationSettings settings = await FirebaseMessaging.instance.requestPermission(
alert: true,
badge: true,
provisional: false,
sound: true,
);
// iOS foreground notification 권한
await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
alert: true,
badge: true,
sound: true,
);
}
6. 파이어베이스 백그라운드 함수 등록
주의할점은 backgroundHandler가 최상위 레벨 함수여야한다.
어느 클래스의 메쏘드이거나 하면 동작하지 않는다.
외부에 선언한 backgroundHandler를 아래 onBackgroundMessage에 등록한다.
// backgroundHandler must be a top-level function
// (e.g. not a class method which requires initialization).
Future<void> backgroundHandler(RemoteMessage message) async {
debugPrint('fcm backgroundHandler, message');
debugPrint(message.notification?.title ?? '');
debugPrint(message.notification?.body ?? '');
}
Future<void> setFCM() async {
//백그라운드 메세지 핸들링(수신처리)
FirebaseMessaging.onBackgroundMessage(backgroundHandler);
}
7. 파이어베이스 포어그라운드 리스너 함수 등록
포어그라운드 상태는 사용자가 앱을 사용 중인 상태에서 푸시 알림을 받는 걸 말한다.
포어그라운드 상태일 때도 알림 메세지는 원래 나타나지 않지만 나타나게 하려면 Local notification이라는 패키지를 사용해야 합니다. 이부분은 다른 포스팅에서 이어서 다루겠다.
Future<void> setFCM() async {
//For handling the received notifications
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
//Parse the message received
//For displaying the notification as an overlay
}
});
}
8. 터미네이티드 상태 리스터 함수 등록
Future<void> setFCM() async {
///gives you the messsage on which user taps
///and it opened the app from temminated state
FirebaseMessaging.instance.getInitialMessage().then((message) {
debugPrint('fcm getInitialMessage, message : ${message?.data ?? ''}');
if (message != null) {
return;
}
});
}
9. FCM 토큰 가져오기 함수 호출
아래와 같이 getToken을 한 후
아래 debugPrint로 찍히는fcmToken을 로그창에서 복사한다.
Future<void> setFCM() async {
String token = await FirebaseMessaging.instance.getToken() ?? '';
debugPrint("fcmToken : $token");
});
}
10. 파이어베이스 콘솔에서 테스트
Messaging 탭을 선택 후 첫번째 캠페인 만들기 버튼을 클릭한다.
Firebase 알림 메세지 라디오 버튼을 클릭하고 만들기를 클릭한다.
![](https://striver89.mycafe24.com/wp-content/uploads/2023/12/image-2-1024x423.png)
사진 설명을 입력하세요.
새캠페인을 클릭 후 알림을 누른다.
![](https://striver89.mycafe24.com/wp-content/uploads/2023/12/image-1-1024x186.png)
사진 설명을 입력하세요.
아래와 같이 적은 후 테스트 메세지 전송을 누른다.
![](https://striver89.mycafe24.com/wp-content/uploads/2023/12/image-2-1-1024x546.png)
사진 설명을 입력하세요.
아래 팝업에서 위에서 복사한 fcmToken을 복사한 후 테스트를 클릭하고 알림메세지가 오는지 체크한다.
![](https://striver89.mycafe24.com/wp-content/uploads/2023/12/image-3.png)