Flutter + FCM 연동 (Flutter 3.0이상, 새로운FCM적용버전, 3.0이상이 아니여도 가능합니다)

Flutter 테크

Flutter + FCM 연동 (Flutter 3.0이상, 새로운FCM적용버전, 3.0이상이 아니여도 가능합니다)

데부장 2023. 11. 24. 11:33

1. Firebase Cloud Messaging 추가하기

pubspec.yaml 수정:

firebase_messaging, flutter_local_notifications 패키지를 pubspec.yaml 파일에 추가 후 pubget

  firebase_messaging: ^14.1.4
  flutter_local_notifications: ^12.0.4

2. iOS 설정

[2 - 1] ios/Runner/Info.plist 파일을 열고 다음 키를 추가

<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>remote-notification</string>
</array>

[2 - 2] xCode를 열고Capabilities탭에서 PushNotifications, BackgroundMode 활성화

3. APNs 인증키를 Firebase를 추가하기

[3 - 1] apple 개발자 페이지의 Certificates탭 이동 -> +버튼 클릭

[3 - 2] 하단의 Services 중 Apple PushNotification service SSL(SandBox & Production)클릭 후 Continue

[3 - 3] 사용할 App Id 선택 후 Continue

[3 - 4] keys탭으로 이동 후 +버튼 클릭 -> 키네임과 APNs선택 후 Continue -> Register클릭

[3 - 5] Download클릭을 통해 APNs다운로드, 한번만 다운로드할 수 있기 때문에 반드시 따로 보관필요

[3 - 6] Firebase의 프로젝트 설정 페이지 이동(톱니바퀴 모양) -> 클라우드메시징 탭 이동 -> Apple 앱 구성의 APN 인증키 업로드 버튼 클릭

[3 - 8] 키ID, 팀ID

키ID : [3 - 5]에서 보면 있는 KeyID

팀 ID : 개발자 계정 페이지의 메인페이지, Edit Profile페이지등에서 확인가능

[3 - 7] 다운로드받은 .p8파일을 업로드하고 키ID와 팀ID입력

4. 안드로이드 설정

[4 - 1] android/app/src/main/AndroidManifest.xml이동 후 아래의 코드를 application태그 내부에 등록한다

아래 코드는 앱의 푸시 중요도를 높이고 푸시알림의 아이콘을 앱의 아이콘으로 설정한다

<meta-data
    android:name="com.google.firebase.messaging.default_notification_channel_id"
    android:value="high_importance_channel" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@mipmap/ic_launcher" />
<meta-data
    android:name="firebase_messaging_auto_init_enabled"
    android:value="false" />

[예시]

<application
        android:label="study_project"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:requestLegacyExternalStorage="true" 
        android:usesCleartextTraffic="true">

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="high_importance_channel" />
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@mipmap/ic_launcher" />
        <meta-data
            android:name="firebase_messaging_auto_init_enabled"
            android:value="false" />
  
  		...
  		...

아래는 메시지를 클릭하여 앱에 진입할 때 메시지 안에 담겨있는 정보를 받기 위함이다

아래 코드는 activity태그 내에 추가한다.

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

[예시]

<activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"/>
          ...
		  ...
          <intent-filter>
                <action android:name="FLUTTER_NOTIFICATION_CLICK" />
                <category android:name="android.intent.category.DEFAULT" />
          </intent-filter>    
        </activity>

3. FCM 사용을 위한 코드 작성

[3 -1] main.dart파일로 이동 -> main()위에 아래 코드를 입력

Flutter 3.0이상 및 FCM 새로운 버전에서 문제없이 수신하려면

@pragma('vm:entry-point')는 필수

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  if (Firebase.apps.isEmpty) {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
  }
}

late AndroidNotificationChannel channel;
late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

[3 -2] 푸시알림수신 권한 요청을 위해 permission_handler 패키지 설치

permission_handler: ^10.4.3

[3 - 3] main()안에 아래코드를 추가

// FCM호환여부 확인
bool _isFCMSupport = await FirebaseMessaging.instance.isSupported();

if (_isFCMSupport) {
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  channel = const AndroidNotificationChannel(
    'high_importance_channel', // id
    'High Importance Notifications', // title
  );

  var initialzationSettingsAndroid =
  AndroidInitializationSettings('@mipmap/ic_launcher');

  var initialzationSettingsIOS = DarwinInitializationSettings(
    requestSoundPermission: true,
    requestBadgePermission: true,
    requestAlertPermission: true,
  );

  flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  await flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<
      AndroidFlutterLocalNotificationsPlugin>()
      ?.createNotificationChannel(channel);

  var initializationSettings = InitializationSettings(
    android: initialzationSettingsAndroid,
    iOS: initialzationSettingsIOS,
  );

  await flutterLocalNotificationsPlugin.initialize(
    initializationSettings,
  );

  await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
    alert: true,
    badge: true,
    sound: true,
  );
  await FirebaseMessaging.instance.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    sound: true,
  );
}

// web에서 권한요청시 오류가 발생하기 때문에 체크
if (!kIsWeb) {
  // 푸시알림 권한요청
  Map<Permission, PermissionStatus> statuses = await [
    Permission.notification,
  ].request();
}

앱의 시작점에 아래의 코드를 추가(기본 Flutter 시작 프로젝트 기준 MyHomePage Class내부

import 'package:flutter/foundation.dart' as foundation;

@override
  void initState() {
    super.initState();
    forgroudInit();
    backgroundInit();
    terminateInit();
  }

//foground
  forgroudInit() {
    FirebaseMessaging.onMessage.listen((RemoteMessage? message) {
      if (message != null) {
        if (message.notification != null) {
          print('title ${message.notification!.title}');
          print('body ${message.notification!.body}');
          print('click_action ${message.data["click_action"]}');
           // 안드로이드는 팝업창이 안뜨기 때문에 추가
          try {
            if (foundation.defaultTargetPlatform != foundation.TargetPlatform.iOS) {
              showMessage(message);
            }
          } catch(e) {
            debugPrint('onMessage try error :${e}');
          }
        }
      }
    });
  }

  backgroundInit() {
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage? message) {
      if (message != null) {
        if (message.notification != null) {
          print('title ${message.notification!.title}');
          print('body ${message.notification!.body}');
          print('click_action ${message.data["click_action"]}');
        }
      }
    });
  }

// 앱 종료상태에서
  terminateInit() {
    FirebaseMessaging.instance
        .getInitialMessage()
        .then((RemoteMessage? message) {
      if (message != null) {
        if (message.notification != null) {
          print('title ${message.notification!.title}');
          print('body ${message.notification!.body}');
          print('click_action ${message.data["click_action"]}');
        }
      }
    });
  }
  
  showMessage(RemoteMessage? message) {

    RemoteNotification? notification = message?.notification;
    AndroidNotification? android = message?.notification?.android;
    var data = message?.data;
    var androidNotiDetails = AndroidNotificationDetails(
      channel.id,
      channel.name,
      importance: Importance.high,
    );

    var iOSNotiDetails = const DarwinNotificationDetails();
    var details =
    NotificationDetails(android: androidNotiDetails, iOS: iOSNotiDetails);
    if (data != null) {
      flutterLocalNotificationsPlugin.show(
        notification.hashCode,
        message?.notification?.title,
        message?.notification?.body,
        details,
        payload: 'data',
      );
    }
  }

4. Firebase FCM 테스트

[4 - 1] Firebase의 참여탭에 있는 Messaging클릭

[4 - 2] Firebase 알림 메시지 클릭

[4 - 3] 제목, 내용 입력

[4 - 5] 타겟 플랫폼 선택

[4 - 6] 다음 쭉 클릭 후 검토 클릭

[4 - 7] 수신되는 내용을 확인할 수 있다