Flutter의 Firebase Messaging 사용법

Firebase Messaging은 Firebase에서 제공하는 푸시 알림 서비스로, Flutter 애플리케이션에서 사용자에게 실시간 알림을 보낼 수 있도록 도와줍니다. Firebase Cloud Messaging(FCM)을 사용하면 Android와 iOS 기기 모두에 푸시 알림을 쉽게 전송할 수 있습니다. 이번 글에서는 Flutter에서 Firebase Messaging을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Firebase 프로젝트 설정

Firebase Messaging을 사용하려면 먼저 Firebase 콘솔에서 프로젝트를 생성하고 설정해야 합니다.

1. Firebase 콘솔에 접속하여 새 프로젝트를 생성합니다.
2. Android 및 iOS 애플리케이션을 Firebase 프로젝트에 추가합니다.
3. Firebase 프로젝트 대시보드에서 "Cloud Messaging" 섹션으로 이동하여 메시징을 설정합니다.

2. Firebase 플러그인 설치

Firebase Messaging을 Flutter 프로젝트에 통합하려면 firebase_core 및 firebase_messaging 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.3.0
  firebase_messaging: ^14.1.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Firebase 초기화

Firebase를 사용하려면 애플리케이션을 초기화해야 합니다. main.dart 파일에서 Firebase를 초기화합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('Handling a background message: ${message.messageId}');
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    FirebaseMessaging.instance.subscribeToTopic("all");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Messaging Example')),
      body: Center(
        child: Text('Welcome to Firebase Messaging Example!'),
      ),
    );
  }
}

 

위 코드는 Firebase를 초기화하고 Firebase Messaging의 백그라운드 메시지 핸들러를 설정합니다.

 

 

반응형

 

 

4. 푸시 알림 수신

Firebase Messaging을 사용하여 푸시 알림을 수신하려면 다음 단계를 따릅니다.

 

Step 1: 포그라운드 메시지 수신

포그라운드에서 메시지를 수신하려면 FirebaseMessaging.onMessage 스트림을 구독합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('Handling a background message: ${message.messageId}');
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message while in the foreground!');
      print('Message data: ${message.data}');

      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification}');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Messaging Example')),
      body: Center(
        child: Text('Welcome to Firebase Messaging Example!'),
      ),
    );
  }
}

 

위 코드는 애플리케이션이 포그라운드에 있을 때 푸시 알림을 수신하고 처리하는 방법을 보여줍니다. FirebaseMessaging.onMessage 스트림을 구독하여 메시지를 수신합니다.

 

Step 2: 백그라운드 메시지 수신

백그라운드에서 메시지를 수신하려면 FirebaseMessaging.onBackgroundMessage 핸들러를 설정합니다. 이 설정은 이미 main.dart 파일에서 완료되었습니다.

 

5. 토큰 관리

Firebase Messaging을 사용하여 푸시 알림을 전송하려면 각 기기의 고유한 FCM 토큰이 필요합니다. 이 토큰을 얻고 관리하는 방법은 다음과 같습니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    _getToken();
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message while in the foreground!');
      print('Message data: ${message.data}');

      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification}');
      }
    });
  }

  Future<void> _getToken() async {
    String? token = await FirebaseMessaging.instance.getToken();
    print('FCM Token: $token');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Messaging Example')),
      body: Center(
        child: Text('Welcome to Firebase Messaging Example!'),
      ),
    );
  }
}

 

위 코드는 FirebaseMessaging.instance.getToken 메서드를 사용하여 현재 기기의 FCM 토큰을 얻는 방법을 보여줍니다. 이 토큰을 사용하여 특정 기기로 푸시 알림을 전송할 수 있습니다.

6. 토픽 구독

FCM 토픽을 사용하면 특정 주제에 구독된 모든 사용자에게 메시지를 보낼 수 있습니다. 예를 들어, 모든 사용자에게 메시지를 보내려면 "all"이라는 토픽에 구독할 수 있습니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    _getToken();
    FirebaseMessaging.instance.subscribeToTopic("all");
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message while in the foreground!');
      print('Message data: ${message.data}');

      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification}');
      }
    });
  }

  Future<void> _getToken() async {
    String? token = await FirebaseMessaging.instance.getToken();
    print('FCM Token: $token');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Messaging Example')),
      body: Center(
        child: Text('Welcome to Firebase Messaging Example!'),
      ),
    );
  }
}

 

위 코드는 애플리케이션이 시작될 때 "all"이라는 토픽에 구독하는 방법을 보여줍니다. 이제 "all" 토픽으로 메시지를 전송하면 이 토픽에 구독된 모든 기기가 메시지를 수신하게 됩니다.

결론

Firebase Messaging은 Flutter 애플리케이션에서 푸시 알림을 구현하는 강력한 도구입니다. 포그라운드 및 백그라운드 메시지 수신, FCM 토큰 관리, 토픽 구독 등의 기능을 통해 사용자에게 실시간 알림을 보낼 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Firebase Messaging을 효율적으로 사용해보세요. Firebase Messaging을 통해 사용자 경험을 향상시키고, 애플리케이션의 기능을 확장할 수 있습니다.