Firebase 클라우드 메시징을 사용하여 Flutter 앱 알림 주고받기

1. 소개

최종 업데이트: 2022년 4월 4일

이 Codelab에서는 Flutter를 사용하여 Firebase 클라우드 메시징 (FCM)으로 멀티 플랫폼 앱을 개발하는 과정을 안내합니다. 앱 구현의 한 부분을 작성한 후 Android, iOS, 웹의 세 가지 플랫폼에서 원활하게 빌드하고 실행합니다. 또한 Flutter에 FCM을 통합하는 방법과 메시지를 수신하고 전송하는 코드를 작성하는 방법도 배웁니다. 마지막으로 Codelab에 FCM HTTP v1 API의 플랫폼별 블록 기능이 도입되어 플랫폼에 따라 동작이 다른 하나의 메시지를 보낼 수 있습니다.

선행 조건

Flutter에 관한 기본 이해

학습 내용

  • Flutter 앱을 설정하고 만드는 방법
  • FCM 종속 항목을 추가하는 방법
  • 앱에 단일 FCM 메시지를 보내는 방법
  • 앱에 주제 FCM 메시지를 보내는 방법

필요한 항목

다음 기기 중 하나를 사용하여 Codelab을 실행할 수 있습니다.

선택적으로 iOS 플랫폼을 사용하여 Codelab을 실행하려면 iOS 기기, Apple 개발자 계정, XCode가 설치된 macOS 기기가 필요합니다.

2. Flutter 설정

Flutter 개발 환경을 이미 설정한 경우 이 섹션을 건너뛰세요.

Flutter 개발 환경을 설정하려면 다음 단계를 따르세요.

  1. 운영체제에 맞는 Flutter를 다운로드하여 설치합니다. 설치 | Flutter
  2. Flutter 도구가 경로에 추가되었는지 확인합니다.
  3. 편집기 설정 | Flutter에 표시된 대로 Flutter용 편집기를 설정합니다. 편집기용 Flutter 및 Dart 플러그인을 설치해야 합니다. Codelab의 나머지 부분에서는 Android 스튜디오를 사용합니다.
  4. 명령줄에서 flutter doctor를 실행하여 설정을 검사하고 수정해야 하는 누락된 종속 항목을 나열합니다. 안내에 따라 누락된 중요한 종속 항목을 수정합니다. 일부 종속 항목은 필요하지 않을 수 있습니다. 예를 들어 iOS용으로 개발하지 않을 경우 CocoaPods 종속 항목 누락은 차단 문제가 되지 않습니다.
  5. 다음 명령어를 실행하여 fcmflutter 디렉터리 flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter에 Flutter 앱을 만든 후 디렉터리를 fcmflutter로 변경합니다.
  1. Android 스튜디오에서 File -> Open으로 이동하여 Flutter 앱의 경로를 찾은 다음 Open을 클릭하여 Android 스튜디오에서 프로젝트를 엽니다. 앱 코드는 lib/main.dart 파일에 있습니다.

Android 스튜디오 툴바에서 아래쪽 화살표를 클릭하여 Android 기기를 선택합니다. 타겟 선택기가 비어 있는 경우 웹브라우저나 iOS 기기에서 앱을 실행하려면 가상 Android 기기, Chrome 브라우저 또는 iOS 시뮬레이터를 설치합니다. 대상 기기를 찾으려면 기기를 수동으로 실행하고 목록을 새로고침해야 할 수 있습니다.

빌드 대상 메뉴 드롭다운 화살표가 강조 표시된 Android 스튜디오 툴바

Run Android 스튜디오의 실행 버튼을 클릭하여 앱을 실행합니다.

실행된 Flutter 데모 앱의 UI

수고하셨습니다. Flutter 앱을 만들었습니다.

3. Firebase 및 FlutterFire 설정

Flutter를 사용하여 Firebase 클라우드 메시징과 통합되는 앱을 개발하려면 다음이 필요합니다.

  • Firebase 프로젝트
  • 작동하는 Firebase CLI
  • FlutterFire 설치
  • flutterfire configure로 구성 및 생성된 앱

Firebase 프로젝트 만들기

이미 Firebase 프로젝트가 있는 경우 이 단계를 건너뛰어도 됩니다.

  1. Google 계정이 있으면 Firebase를 열고 Google 계정으로 로그인한 다음 Console로 이동을 클릭합니다.
  2. Firebase Console에서 프로젝트 추가를 클릭합니다. 안내에 따라 프로젝트를 만듭니다. 이 프로젝트에 Google 애널리틱스 사용 설정을 선택하지 마세요. 이 프로젝트에서 Google 애널리틱스를 사용하지 않습니다.
  3. 프로젝트를 만든 후 프로젝트 개요 옆에 있는 톱니바퀴 아이콘을 클릭하여 프로젝트의 프로젝트 설정으로 이동합니다.

프로젝트 설정 메뉴 아이콘과

프로젝트 ID는 프로젝트를 고유하게 식별하는 데 사용되며 프로젝트 이름과 다를 수 있습니다. 프로젝트 ID는 나중에 FlutterFire를 설정하는 데 사용됩니다.

프로젝트 ID가 강조 표시된 Firebase Console의 잘린 스크린샷

수고하셨습니다. Firebase 프로젝트가 생성되었습니다.

Firebase CLI 설정

Firebase CLI를 설정한 경우 이 단계를 건너뛰어도 됩니다.

Firebase CLI 참조로 이동하여 Firebase CLI를 다운로드하고 설치합니다. 다음 명령어를 사용하여 Google 계정으로 Firebase에 로그인합니다.

firebase login

FlutterFire 설정

  1. flutter pub add firebase_core 명령어를 사용하여 FlutterFire 플러그인을 설치합니다.
  2. FCM 플러그인 flutter pub add firebase_messaging를 설치합니다.
  3. FlutterFire CLI를 설정합니다. dart pub global activate flutterfire_cli
  4. Flutter에서 Firebase 프로젝트를 구성합니다. flutterfire configure --project=fcm4flutter. 화살표 키와 스페이스바를 사용하여 플랫폼을 선택하거나 Enter 키를 눌러 기본 플랫폼을 사용합니다.

이 Codelab에서는 기본 플랫폼 (Android, iOS, 웹)을 사용하지만 플랫폼을 한두 개만 선택할 수 있습니다. iOS 번들 ID를 입력하라는 메시지가 표시되면 com.flutter.fcm.fcmflutter 또는 [company domain name].[project name] 형식의 자체 iOS 번들 ID를 입력합니다. 명령어가 완료되면 Firebase Console 페이지를 새로고침합니다. Firebase 프로젝트 아래에서 선택한 플랫폼용 앱을 만든 것을 확인할 수 있습니다.

선택한 플랫폼용으로 만든 앱을 보여주는 Firebase Console의 잘린 스크린샷

이 명령어는 lib 디렉터리에 초기화에 필요한 모든 옵션이 포함된 firebase_options.dart 파일을 생성합니다.

iOS용 클라우드 메시징 설정

  1. Apple 개발자 페이지로 이동한 후 Keys(키) 탭에서 Create a key(키 만들기)를 클릭합니다.

키 생성을 위한 페이지 구성요소를 강조 표시한 Apple 개발자 페이지의 잘린 스크린샷

  1. 키 이름을 입력하고 Apple 푸시 알림 서비스 (APN)를 선택합니다. 새로운 키 이름의 텍스트 상자가 강조 표시된 Apple 개발자 페이지의 잘린 스크린샷
  2. 파일 확장자가 .p8인 키 파일을 다운로드합니다. 키 다운로드 버튼이 강조 표시된 Apple 개발자 페이지의 잘린 스크린샷
  3. Firebase Console에서 프로젝트의 프로젝트 설정으로 이동하여 클라우드 메시징 탭을 선택합니다.

프로젝트 설정 업데이트를 위한 구성요소를 강조 표시한 Firebase Console 페이지의 잘린 스크린샷

클라우드 메시징 탭을 강조 표시한 Firebase Console 페이지의 잘린 스크린샷

  1. 클라우드 메시징 탭에서 iOS 앱의 APN 키 파일을 업로드합니다. 클라우드 메시징 탭의 APN 키 ID와 팀 ID(Apple 멤버십 센터에서 확인할 수 있음)를 입력합니다. APN 인증 키 업로드 버튼이 강조 표시된 Firebase Console 페이지를 잘라낸 스크린샷

4. FCM 준비

앱이 FCM에서 메시지를 수신하려면 먼저 다음을 실행해야 합니다.

  • FlutterFire를 초기화합니다.
  • 알림 권한 요청
  • FCM에 등록하여 등록 토큰을 가져옵니다.

초기화

서비스를 초기화하려면 기본 함수 (lib/main.dart)를 다음 코드로 바꿉니다.

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 
flutterfire configure
import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

그런 다음 Android 스튜디오에서 Tools -> Flutter -> Flutter Pub Get을 실행하여 FlutterFire 설정에서 추가된 패키지를 로드하고 Android 스튜디오에서 적절한 Intellisense 설정으로 코드를 표시합니다.

이렇게 하면 생성된 firebase_options.dart 파일에서 가져온 현재 플랫폼 DefaultFirebaseOptions.currentPlatform의 FlutterFire가 초기화됩니다. initializeApp는 비동기 함수이며 await 키워드는 애플리케이션을 실행하기 전에 초기화가 완료되었는지 확인합니다.

권한 요청

앱에서 알림을 받으려면 사용자에게 권한을 요청해야 합니다. firebase_messaging에서 제공하는 requestPermission 메서드는 사용자에게 권한을 허용하거나 거부하라는 대화상자나 팝업을 표시합니다.

먼저 이 코드를 TODO: Request permission 주석 아래의 main 함수에 복사합니다. 반환된 settings는 사용자가 권한을 부여했는지 여부를 알려줍니다. 사용자가 액세스가 필요한 기능을 사용해야 하는 경우에만 (예: 사용자가 앱 설정에서 알림을 사용 설정한 경우) 권한을 요청하는 것이 좋습니다. 이 Codelab에서는 편의를 위해 앱 시작 시 권한을 요청합니다.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

다음으로, Android 스튜디오 툴바의 타겟 선택기에서 Chrome (web)를 선택하고 앱을 다시 실행합니다.

타겟 선택기와 실행 버튼이 있는 Android 스튜디오 툴바의 잘린 스크린샷

그런 다음 권한을 요청하는 팝업과 함께 Chrome 탭이 실행됩니다. Allow를 클릭하면 Android 스튜디오 콘솔에 로그(Permission granted: AuthorizationStatus.authorized)가 표시됩니다. 권한 요청을 허용하거나 차단하면 응답이 앱과 함께 브라우저에 저장되며 팝업은 다시 표시되지 않습니다. Android 스튜디오에서 웹 앱을 다시 실행하면 권한을 요청하는 메시지가 다시 표시될 수 있습니다. 다음을 요청하는 팝업이 있는 Chrome 탭의 잘린 스크린샷

등록

이 코드를 TODO: Register with FCM 주석 아래의 기본 함수에 복사하여 FCM에 등록합니다. getToken 호출은 앱 서버 또는 신뢰할 수 있는 서버 환경에서 사용자에게 메시지를 보내는 데 사용할 수 있는 등록 토큰을 반환합니다.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

Android 스튜디오 툴바에서 Android 기기를 선택하고 앱을 실행합니다. Android 스튜디오 콘솔에서 등록 토큰이 다음과 같이 출력됩니다.

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

나중에 메시지를 보낼 때 필요하므로 텍스트 편집기에 복사합니다.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

웹에서 메시지를 받기 위한 추가 단계

웹 앱에서 등록 토큰을 가져오고 수신 메시지를 수신 대기하려면 두 가지 추가 단계를 거쳐야 합니다. 웹은 지원되는 웹 푸시 서비스에 대한 전송 요청을 승인하기 위해 VAPID 키를 getToken에 전달해야 합니다.

먼저 Firebase Console에서 Firebase 프로젝트의 클라우드 메시징 탭을 열고 웹 구성 섹션까지 아래로 스크롤하여 기존 키 쌍을 찾거나 새 키 쌍을 생성합니다. 강조 표시된 버튼을 클릭하여 vapidKey로 사용할 수 있도록 키를 복사합니다.

키 쌍을 강조 표시하는 웹 구성 페이지의 웹 푸시 인증서 구성요소의 잘린 스크린샷

다음으로 Registration(등록) 섹션의 등록 코드를 다음 코드로 바꾸고 vapidKey를 업데이트합니다.

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

그런 다음 프로젝트 루트의 web/ 디렉터리 아래에 firebase-messaging-sw.js 파일을 만듭니다. 다음을 firebase-messaging-sw.js에 복사하여 웹 앱이 onMessage 이벤트를 수신할 수 있도록 합니다. 자세한 내용은 서비스 워커에서 알림 옵션 설정을 참조하세요.

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

그런 다음 Project Settings(프로젝트 설정) -> General(일반) 탭에서 아래로 스크롤하여 Web App(웹 앱)을 찾고 firebaseConfig 코드 섹션을 복사하여 firebase-messaging-sw.js에 붙여넣습니다. Firebase 구성 페이지의 웹 앱 구성요소를 잘라낸 스크린샷

마지막으로 Android 스튜디오 툴바의 타겟 선택기에서 Chrome (web)를 선택하고 앱을 실행합니다. Android 스튜디오 콘솔에서 등록 토큰은 다음과 같이 출력됩니다.

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

나중에 메시지를 보낼 때 사용할 수 있도록 등록 토큰을 텍스트 편집기에 복사합니다.

iOS에서 메시지를 받기 위한 추가 단계

FCM에서 메시지를 수신하려면 iOS 기기에서 Xcode에서 푸시 알림백그라운드 모드를 사용 설정해야 합니다.

  1. Android 스튜디오에서 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭한 후 Flutter -> Open iOS module in Xcode(Xcode에서 iOS 모듈 열기)를 선택합니다. 잘린 스크린샷
  2. Xcode가 실행되면 프로젝트 대상의 Signing & Capabilities(서명 및 기능) 탭에서 Push NotificationsBackground Modes(백그라운드 모드)를 사용 설정합니다. 자세한 내용은 앱 구성을 참고하세요.
  3. Android 스튜디오 툴바의 타겟 선택기에서 iOS 기기를 선택하고 앱을 실행합니다. 알림 권한이 부여되면 Android 스튜디오 콘솔에 등록 토큰이 출력됩니다.

알림 전송 권한을 요청하는 iOS 앱의 잘린 스크린샷

축하합니다. FCM에 앱을 등록했습니다. 다음 섹션에 설명된 대로 메시지를 받을 준비가 되었습니다.

5. FCM에서 메시지 수신

메시지 핸들러 설정

앱은 포그라운드 모드에 있는 동안 메시지가 도착할 때 onMessage 이벤트를 처리하고 앱이 백그라운드에 있을 때 onBackgroundMessage 이벤트를 처리해야 합니다.

포그라운드 메시지 핸들러

먼저 이벤트 핸들러에서 UI로 메시지를 전달하기 위해 main.dart 파일의 TODO: Add stream controller 주석 뒤에 스트림 컨트롤러를 추가합니다.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

종속 항목 rxdart를 추가하려면 프로젝트 디렉터리에서 다음 명령어를 실행합니다. flutter pub add rxdart

그런 다음 Android 스튜디오에서 Tools -> Flutter -> Flutter Pub Get을 실행하여 rxdart.dart 패키지를 로드하고 Android 스튜디오에서 적절한 Intellisense 설정으로 코드를 표시합니다.

그런 다음 TODO: Set up foreground message handler 댓글 뒤에 오는 포그라운드 메시지를 수신 대기하는 이벤트 핸들러를 추가합니다. 로그를 출력하고 메시지를 스트림 컨트롤러에 게시합니다.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

그런 다음 main.dart 파일의 원래 상태 위젯을 다음 코드로 바꿉니다. 그러면 상태 위젯에서 스트림 컨트롤러에 구독자를 추가하고 위젯에 마지막 메시지가 표시됩니다.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Android/iOS용 백그라운드 메시지 핸들러

앱이 백그라운드에 있는 동안 onBackgroundMessage 핸들러가 메시지를 처리합니다. 핸들러는 최상위 함수여야 합니다. 메시지를 처리 (상호작용 처리 참고)하거나 앱 서버와 동기화하여 앱이 포그라운드로 전환될 때 UI를 업데이트할 수 있습니다.

main 함수 외부에서 기본 함수 TODO: Define the background message handler 주석 다음에 핸들러 함수를 만들고 TODO: Set up background message handler 주석 다음에 main 함수에서 이 함수를 호출합니다.

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

웹용 백그라운드 메시지 핸들러

FlutterFire firebase_messaging 버전 11.2.8부터 웹 기반 플랫폼에서 백그라운드 메시지를 처리하려면 다른 흐름이 필요합니다. 따라서 서비스 워커 web/firebase-messaging-sw.js에 별도의 메시지 핸들러를 추가해야 합니다.

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

앱 서버 설정

  1. Android 스튜디오에서 https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server 프로젝트를 열어 시작 서버 코드를 가져옵니다. 서버는 firebase-admin SDK에 종속되는 Gradle 기반 자바 프로젝트이며 FCM 메시지 전송 기능을 제공합니다.
  2. Firebase Admin SDK가 FCM API 호출을 승인할 수 있도록 Firebase 서비스 계정을 설정합니다. Firebase Console에서 프로젝트 설정을 열고 서비스 계정 탭을 선택합니다. 'Java'를 선택하고 Generate new private key를 클릭하여 구성 스니펫을 다운로드합니다. 프로젝트 설정 페이지에 있는 서비스 계정 구성요소의 Admin SDK 구성 스니펫을 강조 표시한 잘린 스크린샷
  3. 파일 이름을 service-account.json로 바꾸고 서버 프로젝트의 src/main/resources 경로에 복사합니다.

테스트 메시지 보내기

FcmSender.java 파일에서 sendMessageToFcmRegistrationToken는 데이터 페이로드가 포함된 알림 메시지를 작성합니다. 등록 토큰은 메시지가 전송된 앱 인스턴스를 타겟팅합니다.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }
  1. 등록 섹션에서 복사한 Android 등록 토큰을 복사하여 registrationToken 변수의 값에 붙여넣습니다.
  2. Run Android 스튜디오의 실행 버튼을 클릭하여 기본 함수를 실행하고 FCM을 통해 사용자에게 메시지를 보냅니다. Android 스튜디오에서 FcmSender.java main 함수 옆에 표시된 Run 아이콘의 잘린 스크린샷

Android 앱이 백그라운드 상태이면 알림 트레이에 메시지가 표시됩니다.

Android 알림 트레이에 표시되는 메시지의 잘린 스크린샷

Android 앱이 포그라운드에 있으면 Android 스튜디오 콘솔에 '포그라운드 메시지 처리' 로그가 표시됩니다. UI가 새 메시지에 대해 스트림 컨트롤러를 구독하기 때문에 메시지 내용도 UI에 표시됩니다.

Android 앱에 표시된 메시지 콘텐츠를 잘라낸 스크린샷

등록 토큰을 붙여넣고 앱 서버나 기타 신뢰할 수 있는 서버 환경에서 메시지를 보내면 다음과 비슷한 동작이 표시됩니다.

  • 웹 앱이 백그라운드에 있을 때 (즉, 다른 창에 의해 숨겨져 있거나 다른 탭이 활성화되어 있는 경우) 웹 알림이 표시됩니다.

Chrome 브라우저에 표시된 웹 알림의 잘린 스크린샷

  • 웹 앱이 포그라운드 상태일 때 Chrome 콘솔에서 웹을 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택하면 로그를 볼 수 있습니다. 메시지 콘텐츠도 UI에 표시됩니다. 디버그 로그가 있는 Chrome 콘솔의 잘린 스크린샷

6. 주제 메시지 보내기

FCM HTTP v1 API의 플랫폼 재정의 기능을 사용하면 메시지 전송 요청이 여러 플랫폼에서 서로 다른 동작을 할 수 있습니다. 이 기능의 한 가지 사용 사례는 플랫폼에 따라 다른 알림 메시지 콘텐츠를 표시하는 것입니다. 이 기능은 주제 메시징을 통해 여러 기기 (여러 플랫폼에 걸쳐 있을 수 있음)를 타겟팅할 때 가장 많이 사용됩니다. 이 섹션에서는 앱이 각 플랫폼에 맞춤설정된 주제 메시지를 수신하도록 단계를 안내합니다.

클라이언트에서 주제 구독

주제를 구독하려면 Flutter 앱의 main.dart 파일에서 main 함수 끝에 있는 messaging.subscribeToTopic 메서드를 호출합니다.

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[선택사항] 웹용 서버에서 주제 구독

웹 플랫폼에서 개발하지 않는 경우 이 섹션을 건너뛸 수 있습니다.

현재 FCM JS SDK는 클라이언트 측 주제 구독을 지원하지 않습니다. 대신 Admin SDK의 서버 측 주제 관리 API를 사용하여 구독할 수 있습니다. 이 코드는 Java Admin SDK를 사용하는 서버 측 주제 구독을 보여줍니다.

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

앱 서버를 열고 Run Android 스튜디오의 실행 버튼을 클릭하여 FcmSubscriptionManager.java 파일에서 main 함수를 실행합니다.

Android 스튜디오에서 FcmSubscriptionManager.java 기본 함수 옆에 표시된 실행 아이콘의 잘린 스크린샷

주제에 플랫폼 재정의가 포함된 메시지 전송

이제 주제 플랫폼 재정의 메시지를 보낼 준비가 되었습니다. 다음 코드 스니펫에서는 다음과 같습니다.

  • 기본 메시지와 제목("A new app is available")을 사용하여 보내기 요청을 구성합니다.
  • iOS 및 웹 플랫폼에서 메시지가 "A new app is available" 제목의 디스플레이 알림을 생성합니다.
  • 이 메시지는 Android 기기에 제목이 'A new Android app is available'인 디스플레이 알림을 생성합니다.
private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

FcmSender.java 파일의 기본 함수에서 sendMessageToFcmTopic();의 주석 처리를 삭제합니다. Run Android 스튜디오의 실행 버튼을 클릭하여 주제 메시지를 보냅니다.

7. 요약 및 다음 단계

요약하자면, 환경 설정, 종속 항목 통합, 메시지 수신 및 전송을 포함하는 Flutter와 FCM을 사용하여 멀티 플랫폼 앱 개발에 참여하는 방법을 알아봤습니다. 더 자세히 알아보려면 다음 자료를 참고하세요.

Codelab

참조