Firebase Cloud Messaging : 푸쉬 알림

1. FCM(Firebase Cloud Messaging)

• Google의 Firebase 플랫폼에서 제공하는 푸시 알림 서비스

• 모바일 앱, 웹 앱, 또는 서버 간에 메시지를 전달할 수 있게 해주는 서비스

• 개발자는 특정 기기나 사용자 그룹에게 실시간으로 알림을 보낼 수 있음

2. 기능

• 푸시 알림
• 개발자는 모바일 또는 웹 앱 사용자에게 푸시 알림을 보낼 수 있음
• 이 알림은 사용자가 앱을 실행하지 않고도 받을 수 있음

• 주제 기반 메시징
• 사용자는 특정 주제를 구독하고, 개발자는 구독한 모든 사용자에게 메시지를 보낼 수 있음

• 타겟팅
• 특정 사용자 그룹, 특정 기기, 앱 인스턴스에 대해 타겟팅된 메시지를 보낼 수 있음
• 클라우드-클라우드 및 클라이언트-클라우드 메시징

• 서버와 클라이언트 간에 실시간 메시징을 지원
• 서버에서 클라이언트로 메시지를 보내거나 클라이언트 간에 메시지를 주고받을 수 있음

3. 라이브러리 추가하기

• firebase를 위한 라이브러리

firebase_messaging install | Flutter package

Flutter plugin for Firebase Cloud Messaging, a cross-platform messaging solution that lets you reliably deliver messages on Android and iOS.

https://pub.dev/packages/firebase_messaging/install

firebase_analytics | Flutter package

Flutter plugin for Google Analytics for Firebase, an app measurement solution that provides insight on app usage and user engagement on Android and iOS.

https://pub.dev/packages/firebase_analytics

firebase_messaging: ^15.1.0
firebase_analytics: ^11.3.0 // 푸쉬 알림을 받을 때 필요함

• 추가 라이브러리

webview_flutter | Flutter package

A Flutter plugin that provides a WebView widget backed by the system webview.

https://pub.dev/packages/webview_flutter

get | Flutter package

Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.

https://pub.dev/packages/get

webview_flutter: ^4.9.0
get: ^4.6.6

4. 연결 파일 구현하기

import 'package:firebase_messaging/firebase_messaging.dart';

class FirebaseApi {
  // Firebase Messaging 인스턴스 생성
  final _firebaseMessaging = FirebaseMessaging.instance;

  // 알림 초기화 함수
  Future<void> initNotifications() async {
    // 사용자에게 알림 권한 요청 (배지, 알림, 소리 옵션 설정)
    await _firebaseMessaging.requestPermission(
      badge: true, // 배지 표시 허용
      alert: true, // 알림 표시 허용
      sound: true, // 알림 소리 허용
    );

    // 이 기기의 FCM 토큰을 가져옴
    final FCMToken = await _firebaseMessaging.getToken();

    // FCM 토큰을 출력 (보통 서버로 전송하는 경우)
    print('Token: $FCMToken');

    // 알림 핸들러 설정
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Message received: ${message.notification?.body}');
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('Message clicked: ${message.notification?.body}');
    });
  }
}

5. main.dart 파일에 추가하기

• 임시로 공공 웹사이트의 URL을 사용

• 초기화 설정

• web view를 이용

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'firebase_api.dart';
import 'firebase_options.dart';

final homeUrl = Uri.parse("https://www.example.com"); // 웹뷰에 로드할 URL 설정

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // Flutter의 위젯 시스템 초기화
  await Firebase.initializeApp( // Firebase 초기화 (비동기 함수)
    options: DefaultFirebaseOptions.currentPlatform, // 현재 플랫폼에 맞는 Firebase 설정 적용
  );

  // Firebase 알림 초기화 (필요한 경우)
  await FirebaseApi().initNotifications();

  runApp(const MyApp()); // MyApp 실행
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo', // 앱의 제목 설정
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 앱의 테마 색상 설정
        useMaterial3: true, // Material 3 사용 설정
      ),
      home: const HomePage(), // 앱의 홈 화면으로 HomePage 위젯 설정
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState(); // 상태(State) 클래스 생성
}

class _HomePageState extends State<HomePage> {
  late final WebViewController controller; // WebView 컨트롤러 선언

  @override
  void initState() {
    super.initState();
    controller = WebViewController() // WebView 컨트롤러 초기화
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // 자바스크립트 허용 모드 설정
      ..addJavaScriptChannel(
        'Toaster', // 'Toaster'라는 이름의 JavaScript 채널 추가
        onMessageReceived: (JavaScriptMessage msg) async {
          // WebView의 자바스크립트에서 보낸 메시지를 처리하는 콜백 함수
        },
      )
      ..loadRequest(homeUrl); // 설정된 URL 로드
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: controller), // WebView를 표시할 위젯
    );
  }
}

5. Token 값 확인하기