fcm 구현 과정

FCM(Firebase Cloud Messaging) 구현 프로젝트

프로젝트 개요

이 프로젝트는 Flutter 애플리케이션에 Firebase Cloud Messaging(FCM)을 구현하여 실시간 푸시 알림 기능을 추가하는 것을 목표로 합니다. 사용자들은 앱 내에서 새로운 방이 생성될 때 푸시 알림을 받을 수 있습니다.

기술 스택

• Flutter
• Firebase (Cloud Messaging, Firestore, Functions)
• Riverpod (상태 관리)
• Go Router (네비게이션)

주요 구현 사항

1. FCM 초기화 및 설정
2. 푸시 알림 권한 요청
3. FCM 토큰 관리
4. 백그라운드 메시지 처리
5. 포그라운드 메시지 처리
6. 클라우드 함수를 이용한 푸시 알림 전송
7. 로컬 알림 구현

구현 과정

1. 프로젝트 설정

• pubspec.yaml에 필요한 의존성 추가
•  

dependencies:
  firebase_core: ^3.5.0
  firebase_messaging: ^15.1.2
  flutter_local_notifications: ^17.2.3
  cloud_functions: ^5.1.3

• Android(android/app/build.gradle)와 iOS(ios/Podfile) 설정 파일 수정

2. FCM 초기화 및 권한 요청

main.dart에서 Firebase 및 FCM 초기화:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  
  final pushNotificationService = PushNotificationService();
  await pushNotificationService.initialize();
  
  // ... 기타 초기화 코드
}

3. FCM 서비스 구현

fcm_service.dart에서 PushNotificationService 클래스 구현:

class PushNotificationService {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  
  Future<void> initialize() async {
    await _requestPermissions();
    await _configureFCM();
  }
  
  Future<void> _requestPermissions() async {
    NotificationSettings settings = await _firebaseMessaging.requestPermission();
    // 권한 상태 처리
  }
  
  Future<void> _configureFCM() async {
    // FCM 설정 (토큰 가져오기, 리스너 설정 등)
  }
  
  // 푸시 알림 전송 메서드
  Future<void> sendRoomCreationNotification({
    required String roomName,
    required String creatorName,
  }) async {
    // Cloud Function 호출하여 알림 전송
  }
}

4. 백그라운드 메시지 처리

notification_handler.dart에서 백그라운드 메시지 핸들러 구현:

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print("Handling a background message: ${message.messageId}");
  // 백그라운드 알림 처리 로직
}

// main() 함수에서 등록
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

5. 포그라운드 메시지 처리

MyApp 클래스에서 포그라운드 메시지 핸들링:

@override
void initState() {
  super.initState();
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print("Received a foreground message: ${message.notification?.title}");
    _showNotification(message);
  });
}

6. 클라우드 함수 구현

index.js에서 푸시 알림 전송을 위한 Cloud Function 구현:

exports.sendPushNotification = functions.region("asia-northeast3").https.onCall(async (data, context) => {
    const { userId, title, body } = data;
    // Firestore에서 사용자 FCM 토큰 조회
    // 푸시 알림 전송 로직
});

7. 알림 전송 구현

create_room_view.dart에서 방 생성 시 알림 전송:

await fcmService.sendRoomCreationNotification(
  roomName: roomNameController.text,
  creatorName: personNameController.text,
);

결과 및 성과

• 실시간 푸시 알림 시스템 구축으로 사용자 참여도 향상
• 백그라운드와 포그라운드 상태에서 모두 알림 수신 가능
• Firebase Cloud Functions를 활용한 서버리스 아키텍처 구현
• 로컬 알림을 통한 사용자 경험 개선

향후 개선 사항

• 알림 설정 기능 추가 (알림 켜기/끄기, 알림음 설정 등)
• 알림 그룹화 및 개인화 기능 구현
• 딥링크를 통한 알림 클릭 시 특정 화면으로 이동 기능 추가