[flutter] 플러터를 사용하여 푸시 알림 서비스 구현 방법

04 Dec 2023

flutter

플러터는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, iOS와 안드로이드 양쪽 플랫폼에서 동작하는 앱을 만들 수 있습니다. 이번 포스트에서는 플러터를 사용하여 푸시 알림 서비스를 구현하는 방법을 알아보겠습니다.

1. Firebase 프로젝트 설정

푸시 알림을 구현하기 위해서는 Firebase 프로젝트를 설정해야 합니다. Firebase 콘솔에서 프로젝트를 생성한 후, 프로젝트의 설정 페이지에서 클라우드 메시징 탭에 들어가서 서버 키나 클라이언트 키를 생성하여 복사해둡니다.

2. 플러터 프로젝트 설정

푸시 알림을 사용하기 위해 플러터 프로젝트를 설정해야 합니다. pubspec.yaml 파일에 다음과 같이 firebase_messaging 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^10.0.0

그리고 AndroidManifest.xml 파일에 다음과 같이 푸시 알림을 위한 권한과 서비스를 설정합니다:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package.name">

    <!-- ... -->

    <uses-permission android:name="android.permission.INTERNET" />

    <application ... >
        <!-- ... -->

        <!-- Firebase Messaging Service -->
        <service
            android:name="io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
    </application>

</manifest>

3. 푸시 알림 처리

이제 푸시 알림을 처리하는 코드를 작성해보겠습니다. Dart 파일의 main 함수에서 다음과 같이 FirebaseMessaging 객체를 생성하고, 토큰을 받아옵니다:

import 'package:firebase_messaging/firebase_messaging.dart';

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

  runApp(MyApp());
}

또한, 푸시 알림 메시지를 받을 때 처리하는 방법은 다음과 같습니다:

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print("Received new message: ${message.notification?.title}");
});

위의 코드는 앱이 foreground에서 실행 중일 때 푸시 알림 메시지를 받았을 때 동작하는 코드입니다.

4. 푸시 알림 테스트

이제 실제로 푸시 알림을 테스트해봅시다. Firebase 콘솔의 클라우드 메시징 탭에서 알림을 전송할 수 있습니다. 또는 터미널에서 cURL을 사용하여 다음과 같이 푸시 알림을 보낼 수도 있습니다:

curl -X POST \
  -H "Authorization: key=<SERVER_KEY>" \
  -H "Content-Type: application/json" \
  -d '{
        "notification": {
          "title": "푸시 알림 테스트",
          "body": "안녕하세요! 이것은 푸시 알림 테스트입니다."
        },
        "to": "<DEVICE_TOKEN>"
      }' \
  https://fcm.googleapis.com/fcm/send

<SERVER_KEY>는 Firebase 프로젝트 설정에서 얻을 수 있는 서버 키 값을 넣어주고, <DEVICE_TOKEN>은 위에서 얻은 토큰 값을 넣어주시면 됩니다.

1. Firebase 프로젝트 설정

2. 플러터 프로젝트 설정

3. 푸시 알림 처리

4. 푸시 알림 테스트

참고 자료