FCM 配置 2.4

Flutter 行動應用程式的 FCM 配置

本文檔提供了在 Android 和 iOS 平台上為您的 Flutter 行動應用程式配置 Firebase 雲端訊息傳遞 (FCM) 的全面指南。

1. 設定 Firebase 項目

• 前往Firebase 控制台。
• 建立新項目或選擇現有項目。
• 在 Firebase 專案中註冊您的應用程式（Android 和 iOS）。

2. 設定 Android 以使用 Firebase

2.1 將 Firebase SDK 新增到您的 Android 項目

• google-services.json從 Firebase 控制台下載檔案。
• 將檔案放置在 Flutter 專案目錄google-services.json中。android/app

2.2 更新 `android/build.gradle`

buildscript {
    dependencies {
        // Add this classpath
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

2.3 更新 `android/app/build.gradle`

• 在文件末尾新增以下行：

apply plugin: 'com.google.gms.google-services'

• 在此部分新增 Firebase 訊息傳遞依賴項dependencies：

implementation 'com.google.firebase:firebase-messaging:24.2.0'

2.4 更新 `AndroidManifest.xml`

• 在標籤內新增必要的權限和服務聲明 <application>：

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

<application ...>
    <service
        android:name=".MyFirebaseMessagingService"
        android:exported="true"
        android:permission="android.permission.BIND_JOB_SERVICE">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT"/>
        </intent-filter>
    </service>
</application>

3. 配置 iOS 以使用 Firebase

3.1 將 Firebase SDK 加入您的 iOS 項目

• GoogleService-Info.plist從 Firebase 控制台 下載檔案。
• 將檔案放置在 Flutter 專案目錄GoogleService-Info.plist中。ios/Runner

3.2 安裝 CocoaPods 依賴項

cd ios
pod install

3.3 更新 `Podfile`

platform :ios, '10.0'
use_frameworks!

3.4 更新 `AppDelegate.swift`

• 導入所需模組並配置 Firebase：

import UIKit
import Flutter
import FirebaseCore
import FirebaseMessaging

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        FirebaseApp.configure()
        Messaging.messaging().delegate = self
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override func application(
        _ application: UIApplication,
        didReceiveRemoteNotification userInfo: [String: Any],
        fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void
    ) {
        Messaging.messaging().appDidReceiveMessage(userInfo)
        super.application(application, didReceiveRemoteNotification: userInfo, fetchCompletionHandler: completionHandler)
    }
}

3.5 請求通知權限

import UserNotifications

func application(_ application: UIApplication,
                 didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Messaging.messaging().apnsToken = deviceToken
}

func application(_ application: UIApplication,
                 didFailToRegisterForRemoteNotificationsWithError error: Error) {
    print("Failed to register: \(error)")
}

func application(_ application: UIApplication,
                 didReceive notification: UILocalNotification) {
    print("Notification received: \(notification)")
}

4. 配置 Flutter 應用

4.1 新增 FlutterFire 插件

dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^2.10.0
      firebase_messaging: ^14.0.0

4.2 在 Flutter 應用程式中初始化 Firebase

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  void initState() {
    super.initState();
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Message received: ${message.messageId}');
      // Handle foreground messages here
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FCM Demo'),
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

5. 測試您的配置

• Android：使用 Firebase 控制台發送測試訊息，或使用該 firebase_messaging軟體包在本機測試訊息。
• iOS：請確保您擁有真機或使用模擬器來測試推播通知，因為推播通知在 iOS 模擬器上無法運作。

請依照這些步驟操作，將有助於您成功地在 Android 和 iOS 平台上為您的 Flutter 行動應用程式配置 Firebase 雲端訊息傳遞 (FCM)。