ส่งและรับการแจ้งเตือนสำหรับแอป Flutter โดยใช้ Firebase Cloud Messaging

1. บทนำ

อัพเดตล่าสุด : 2022-04-04

Codelab นี้จะแนะนำคุณตลอดกระบวนการพัฒนาแอปหลายแพลตฟอร์มด้วย Firebase Cloud Messaging (FCM) โดยใช้ Flutter คุณจะเขียนส่วนหนึ่งของการใช้งานแอป จากนั้นสร้างและรันแอปได้อย่างราบรื่นบนสามแพลตฟอร์ม: Android, iOS และเว็บ คุณจะได้เรียนรู้วิธีรวม FCM ใน Flutter และวิธีเขียนโค้ดเพื่อรับและส่งข้อความ สุดท้ายนี้ Codelab จะแนะนำฟีเจอร์บล็อกเฉพาะแพลตฟอร์มของ FCM HTTP v1 API ซึ่งช่วยให้คุณส่งข้อความเดียวที่มีพฤติกรรมแตกต่างกันบนแพลตฟอร์มที่ต่างกันได้

ข้อกำหนดเบื้องต้น

ความเข้าใจเบื้องต้นเกี่ยวกับ Flutter

สิ่งที่คุณจะได้เรียนรู้

• วิธีตั้งค่าและสร้างแอป Flutter
• วิธีเพิ่มการพึ่งพา FCM
• วิธีส่งข้อความ FCM เดียวไปยังแอปของคุณ
• วิธีส่งข้อความ FCM หัวข้อไปยังแอปของคุณ

สิ่งที่คุณต้องการ

• Android Studio เวอร์ชันเสถียรล่าสุดที่กำหนดค่าด้วยปลั๊กอิน Dart และ Flutter

คุณสามารถเรียกใช้ Codelab ได้โดยใช้อุปกรณ์ใดๆ ต่อไปนี้:

• อุปกรณ์ Android จริงที่เชื่อมต่อกับคอมพิวเตอร์ของคุณ
• โปรแกรมจำลอง Android (ดูที่ เรียกใช้แอปบนโปรแกรมจำลอง Android )
• เบราว์เซอร์ที่คุณเลือก เช่น Chrome

อีกทางหนึ่ง หากต้องการรัน Codelab โดยใช้แพลตฟอร์ม iOS คุณต้องมีอุปกรณ์ iOS, บัญชี Apple Developer และอุปกรณ์ macOS ที่ติดตั้ง XCode

2. การตั้งค่ากระพือ

หากคุณได้ตั้งค่าสภาพแวดล้อมการพัฒนา Flutter ไว้แล้ว ให้ข้ามส่วนนี้

หากต้องการตั้งค่าสภาพแวดล้อมการพัฒนา Flutter ให้ทำตามขั้นตอนเหล่านี้:

1. ดาวน์โหลดและติดตั้ง Flutter สำหรับระบบปฏิบัติการของคุณ: ติดตั้ง | กระพือปีก
2. ตรวจสอบให้แน่ใจว่าได้เพิ่มเครื่องมือ Flutter ลงในเส้นทางของคุณแล้ว
3. ตั้งค่าตัวแก้ไขของคุณสำหรับ Flutter ดังที่แสดงใน ตั้งค่าตัวแก้ไข | Flutter อย่าลืมติดตั้งปลั๊กอิน Flutter และ Dart สำหรับโปรแกรมแก้ไขของคุณ คุณจะใช้ Android Studio สำหรับส่วนที่เหลือของ Codelab
4. จากบรรทัดคำสั่ง ให้เรียกใช้ flutter doctor ซึ่งจะสแกนการตั้งค่าของคุณและแสดงรายการการขึ้นต่อกันที่ขาดหายไปซึ่งจำเป็นต้องแก้ไข ทำตามคำแนะนำเพื่อแก้ไขการขึ้นต่อกันที่สำคัญที่ขาดหายไป โปรดทราบว่าการขึ้นต่อกันบางอย่างอาจไม่จำเป็น ตัวอย่างเช่น หากคุณจะไม่พัฒนาสำหรับ iOS การพึ่งพา CocoaPods ที่ขาดหายไปจะไม่เป็นปัญหาในการบล็อก
5. รันคำสั่งนี้เพื่อสร้างแอป Flutter ของคุณในไดเร็กทอรี fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter จากนั้นเปลี่ยนไดเร็กทอรีเป็น fcmflutter

6. ใน Android Studio ไปที่ File -> Open ค้นหาเส้นทางของแอพ Flutter ของคุณ จากนั้นคลิก Open เพื่อเปิดโปรเจ็กต์ใน Android Studio รหัสแอปอยู่ในไฟล์ lib/main.dart

บนแถบเครื่องมือ Android Studio ให้คลิกลูกศรลงเพื่อเลือกอุปกรณ์ Android หากตัวเลือกเป้าหมายว่างเปล่า ให้ติดตั้ง อุปกรณ์ Android เสมือน หรือ เบราว์เซอร์ Chrome หรือโปรแกรมจำลอง iOS หากคุณต้องการเปิดแอปจากเว็บเบราว์เซอร์หรืออุปกรณ์ iOS คุณอาจต้องเปิดอุปกรณ์ด้วยตนเองและรีเฟรชรายการเพื่อค้นหาอุปกรณ์เป้าหมาย

คลิก เรียกใช้ เพื่อเปิดแอป

ยินดีด้วย! คุณสร้างแอป Flutter สำเร็จแล้ว

3. การตั้งค่า Firebase และ FlutterFire

ในการพัฒนาแอปที่ทำงานร่วมกับ Firebase Cloud Messaging โดยใช้ Flutter คุณต้องมี:

• โปรเจ็กต์ Firebase
• Firebase CLI ที่ใช้งานได้
• การติดตั้ง FlutterFire
• แอปที่กำหนดค่าและสร้างด้วย flutterfire configure

สร้างโปรเจ็กต์ Firebase ของคุณ

หากคุณมีโปรเจ็กต์ Firebase อยู่แล้ว คุณสามารถข้ามขั้นตอนนี้ได้

1. หากคุณมีบัญชี Google ให้เปิด Firebase และลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ จากนั้นคลิก ไปที่คอนโซล
2. ในคอนโซล Firebase คลิก เพิ่มโครงการ ทำตามคำแนะนำเพื่อสร้างโปรเจ็กต์ อย่าเลือก เปิดใช้งาน Google Analytics สำหรับโปรเจ็กต์นี้ เนื่องจากคุณจะไม่ใช้มันในโปรเจ็กต์นี้
3. หลังจากสร้างโปรเจ็กต์แล้ว ให้ไปที่ การตั้งค่าโปรเจ็กต์ ของโปรเจ็กต์โดยคลิกไอคอนรูปเฟืองถัดจาก ภาพรวมโปรเจ็กต์

รหัสโปรเจ็กต์ ใช้เพื่อระบุโปรเจ็กต์โดยไม่ซ้ำกัน และอาจแตกต่างจาก ชื่อโปรเจ็กต์ รหัสโปรเจ็กต์ จะถูกใช้เพื่อตั้งค่า FlutterFire ในภายหลัง

ยินดีด้วย! คุณสร้างโครงการ Firebase สำเร็จแล้ว

ตั้งค่า Firebase CLI

หากคุณตั้งค่า Firebase CLI ไว้ คุณจะข้ามขั้นตอนนี้ได้

ไปที่ การอ้างอิง Firebase CLI เพื่อดาวน์โหลดและติดตั้ง Firebase CLI เข้าสู่ระบบ Firebase ด้วยบัญชี Google ของคุณด้วยคำสั่งต่อไปนี้:

firebase login

ตั้งค่า FlutterFire

1. ติดตั้งปลั๊กอิน FlutterFire โดยใช้คำสั่ง: flutter pub add firebase_core
2. ติดตั้งปลั๊กอิน FCM: flutter pub add firebase_messaging
3. ตั้งค่า FlutterFire CLI: dart pub global activate flutterfire_cli
4. กำหนดค่าโครงการ Firebase บน Flutter: flutterfire configure --project=fcm4flutter. ใช้ปุ่มลูกศรและช่องว่างเพื่อเลือกแพลตฟอร์มหรือกด Enter เพื่อใช้แพลตฟอร์มเริ่มต้น

Codelab นี้ใช้แพลตฟอร์มเริ่มต้น (Android, iOS และเว็บ) แต่คุณสามารถเลือกได้เพียงหนึ่งหรือสองแพลตฟอร์มเท่านั้น หากได้รับแจ้งให้ใส่ ID บันเดิล iOS ให้ป้อน com.flutter.fcm.fcmflutter หรือ ID บันเดิล iOS ของคุณเองในรูปแบบ [company domain name].[project name] หลังจากคำสั่งเสร็จสิ้น ให้รีเฟรชหน้าคอนโซล Firebase คุณจะเห็นว่ามันได้สร้างแอปสำหรับแพลตฟอร์มที่เลือกภายใต้โปรเจ็กต์ Firebase

คำสั่งนี้สร้างไฟล์ firebase_options.dart ใต้ไดเร็กทอรี lib ซึ่งมีตัวเลือกทั้งหมดที่จำเป็นสำหรับการเริ่มต้น

ตั้งค่าการส่งข้อความบนคลาวด์สำหรับ iOS

1. ไปที่หน้า นักพัฒนา Apple แล้วคลิก สร้างคีย์ บนแท็บ คีย์

2. ป้อนชื่อคีย์และตรวจสอบ บริการแจ้งเตือนแบบพุชของ Apple (APN)
3. ดาวน์โหลดไฟล์คีย์ซึ่งมีนามสกุลไฟล์ .p8
4. ใน คอนโซล Firebase ให้ไปที่ การตั้งค่าโปรเจ็กต์ ของโปรเจ็กต์ และเลือกแท็บ Cloud Messaging

5. อัปโหลดไฟล์คีย์ APN สำหรับแอป iOS ในแท็บ Cloud Messaging ป้อนรหัสคีย์ APN จากแท็บ Cloud Messaging และรหัสทีม ซึ่งสามารถพบได้ในศูนย์สมาชิกของ Apple

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());
}

จากนั้นเรียกใช้ Tools -> Flutter -> Flutter Pub Get ใน Android Studio เพื่อโหลดแพ็คเกจที่เพิ่มที่ Set up FlutterFire และแสดงโค้ดด้วยการตั้งค่า Intellisense ที่เหมาะสมใน Android Studio

สิ่งนี้จะเริ่มต้น FlutterFire สำหรับแพลตฟอร์มปัจจุบัน DefaultFirebaseOptions.currentPlatform ซึ่งนำเข้าจากไฟล์ firebase_options.dart ที่สร้างขึ้น โปรดทราบว่า initializeApp เป็นฟังก์ชันแบบอะซิงโครนัส และคีย์เวิร์ด await ช่วยให้มั่นใจว่าการกำหนดค่าเริ่มต้นจะเสร็จสมบูรณ์ก่อนที่จะเรียกใช้แอปพลิเคชัน

ขออนุญาต

แอปต้องขออนุญาตจากผู้ใช้เพื่อรับการแจ้งเตือน วิธีการ requestPermission จัดทำโดย firebase_messaging จะแสดงกล่องโต้ตอบหรือป๊อปอัปแจ้งให้ผู้ใช้อนุญาตหรือปฏิเสธการอนุญาต

ขั้นแรก ให้คัดลอกโค้ดนี้ไปยังฟังก์ชันหลักใต้ความคิดเห็น TODO: Request permission 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 Studio ให้เลือก Chrome (web) จากตัวเลือกเป้าหมาย จากนั้นเรียกใช้แอปอีกครั้ง

จากนั้นแท็บ Chrome จะเปิดขึ้นมาพร้อมกับป๊อปอัปที่ขออนุญาต หากคุณคลิก Allow คุณจะเห็นบันทึกในคอนโซล Android Studio: Permission granted: AuthorizationStatus.authorized หลังจากที่คุณอนุญาตหรือบล็อกคำขอสิทธิ์ การตอบกลับของคุณจะถูกจัดเก็บพร้อมกับแอปของคุณในเบราว์เซอร์ และป๊อปอัปจะไม่แสดงอีก โปรดทราบว่าเมื่อคุณเรียกใช้เว็บแอปอีกครั้งบน Android Studio คุณอาจได้รับพร้อมท์ให้อนุญาตอีกครั้ง

การลงทะเบียน

คัดลอกโค้ดนี้ไปยังฟังก์ชันหลักด้านล่างความคิดเห็น 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 Studio ให้เลือกอุปกรณ์ Android และเรียกใช้แอป ในคอนโซล Android Studio โทเค็นการลงทะเบียนจะถูกพิมพ์ออกมาดังนี้:

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 เพื่อให้สิทธิ์ส่งคำขอไปยังบริการพุชบนเว็บที่รองรับ

ขั้นแรก ให้เปิดแท็บ Cloud Messaging ของโปรเจ็กต์ Firebase ในคอนโซล Firebase เลื่อนลงไปที่ส่วน การกำหนดค่าเว็บ เพื่อค้นหาคู่คีย์ที่มีอยู่ หรือสร้างคู่คีย์ใหม่ คลิกปุ่มที่ไฮไลต์เพื่อคัดลอกคีย์เพื่อให้สามารถใช้เป็น vapidKey ได้

จากนั้น แทนที่รหัสการลงทะเบียนในส่วนการลงทะเบียนด้วยรหัสนี้ จากนั้นอัปเดต 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');
 }

จากนั้น สร้างไฟล์ firebase-messaging-sw.js ใต้ไดเรกทอรี web/ ในรากของโปรเจ็กต์ของคุณ คัดลอกข้อมูลต่อไปนี้ไปที่ 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

หลังจากนั้นภายใต้ การตั้งค่าโครงการ -> แท็บ ทั่วไป เลื่อนลงและค้นหา Web App คัดลอกส่วนโค้ด firebaseConfig และวางลงใน firebase-messaging-sw.js

สุดท้าย บนแถบเครื่องมือ Android Studio ให้เลือก Chrome (web) ในตัวเลือกเป้าหมายแล้วเรียกใช้แอป ในคอนโซล Android Studio โทเค็นการลงทะเบียนจะถูกพิมพ์ออกมาดังนี้:

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 Studio คลิกขวาที่ชื่อโปรเจ็กต์แล้วเลือก Flutter -> เปิดโมดูล iOS ใน Xcode
2. หลังจากที่ Xcode เปิดตัว ให้เปิดใช้งาน การแจ้งเตือนแบบพุช และ โหมดพื้นหลัง ในแท็บ การลงนามและความสามารถ สำหรับเป้าหมายโปรเจ็กต์ ดู กำหนดค่าแอปของคุณ สำหรับข้อมูลเพิ่มเติม
3. บนแถบเครื่องมือ Android Studio ให้เลือกอุปกรณ์ iOS ในตัวเลือกเป้าหมายแล้วเรียกใช้แอป หลังจากให้สิทธิ์การแจ้งเตือนแล้ว โทเค็นการลงทะเบียนจะถูกพิมพ์ในคอนโซล Android Studio

ยินดีด้วย คุณลงทะเบียนแอปกับ FCM สำเร็จแล้ว คุณพร้อมที่จะรับข้อความตามที่อธิบายไว้ในส่วนถัดไป

5. รับข้อความจาก FCM

ตั้งค่าตัวจัดการข้อความ

แอปจำเป็นต้องจัดการเหตุการณ์ onMessage เมื่อข้อความมาถึงในขณะที่แอปอยู่ในโหมดเบื้องหน้า และเหตุการณ์ onBackgroundMessage เมื่อแอปอยู่ในเบื้องหลัง

ตัวจัดการข้อความเบื้องหน้า

ขั้นแรก ให้เพิ่มตัวควบคุมสตรีมหลังความคิดเห็น TODO: Add stream controller ในไฟล์ main.dart เพื่อส่งข้อความจากตัวจัดการเหตุการณ์ไปยัง UI

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

หากต้องการเพิ่มการพึ่งพา rxdart ให้รันคำสั่งนี้จากไดเร็กทอรีโปรเจ็กต์: flutter pub add rxdart

จากนั้นรัน Tools -> Flutter -> Flutter Pub Get ใน Android Studio เพื่อโหลดแพ็คเกจ rxdart.dart และแสดงโค้ดด้วยการตั้งค่า Intellisense ที่เหมาะสมใน Android Studio

จากนั้น เพิ่มตัวจัดการเหตุการณ์เพื่อฟังข้อความเบื้องหน้าหลังความคิดเห็น 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);
 });

หลังจากนั้น ให้แทนที่วิดเจ็ต State ดั้งเดิมในไฟล์ main.dart ด้วยโค้ดนี้ ซึ่งจะเพิ่มสมาชิกให้กับตัวควบคุมสตรีมในวิดเจ็ต State และแสดงข้อความสุดท้ายบนวิดเจ็ต

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 สามารถอัปเดตได้เมื่อนำแอปไปที่เบื้องหน้าโดยจัดการข้อความ (ดูที่ การจัดการการโต้ตอบ ) หรือการซิงค์กับเซิร์ฟเวอร์แอป

สร้างฟังก์ชันตัวจัดการหลังความคิดเห็น TODO: Define the background message handler ภายนอกฟังก์ชันหลัก และเรียกใช้ในฟังก์ชันหลักหลังความคิดเห็น TODO: Set up background message handler

// 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 การจัดการข้อความพื้นหลังบนแพลตฟอร์มบนเว็บจำเป็นต้องมีโฟลว์ที่แตกต่างกัน ดังนั้น คุณต้องเพิ่มตัวจัดการข้อความแยกต่างหากใน service worker web/firebase-messaging-sw.js

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

ตั้งค่าเซิร์ฟเวอร์แอป

1. นำเข้าโค้ดเซิร์ฟเวอร์เริ่มต้นโดยเปิดโครงการ https://github.com/FirebaseExtensted/firebase_fcm_flutter/tree/main/server ใน Android Studio เซิร์ฟเวอร์นี้เป็นโปรเจ็กต์ Java ที่ใช้ Gradle ซึ่งขึ้นอยู่กับ firebase-admin SDK ซึ่งมีฟังก์ชันการส่งข้อความ FCM
2. ตั้งค่าบัญชีบริการ Firebase ที่อนุญาตให้ Firebase Admin SDK ให้สิทธิ์การเรียกไปยัง FCM API เปิด การตั้งค่าโครงการ ในคอนโซล Firebase และเลือกแท็บ บัญชีบริการ เลือก 'Java' และคลิก Generate new private key เพื่อดาวน์โหลดข้อมูลโค้ดการกำหนดค่า
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. คลิก เรียกใช้ เพื่อเรียกใช้ฟังก์ชันหลักและส่งข้อความถึงผู้ใช้ผ่าน FCM

เมื่อแอป Android อยู่ในพื้นหลัง ข้อความจะปรากฏขึ้นในถาดการแจ้งเตือน

เมื่อแอป Android อยู่เบื้องหน้า คุณจะเห็นบันทึกในคอนโซล Android Studio: "การจัดการข้อความเบื้องหน้า" เนื้อหาข้อความยังแสดงใน UI เนื่องจาก UI สมัครรับตัวควบคุมสตรีมสำหรับข้อความใหม่

หากคุณวางโทเค็นการลงทะเบียนและส่งข้อความจากเซิร์ฟเวอร์แอปหรือสภาพแวดล้อมเซิร์ฟเวอร์ที่เชื่อถือได้อื่นๆ คุณจะเห็นลักษณะการทำงานที่คล้ายกัน:

• เมื่อแอปพลิเคชันเว็บอยู่ในพื้นหลัง (เช่น เมื่อถูกซ่อนไว้ที่หน้าต่างอื่นหรือแท็บอื่นทำงานอยู่) คุณจะเห็นการแจ้งเตือนทางเว็บ

• เมื่อแอปพลิเคชันเว็บอยู่เบื้องหน้า คุณสามารถดูบันทึกในคอนโซล Chrome ได้โดยคลิกขวาที่เว็บแล้วเลือก Inspect เนื้อหาข้อความจะแสดงใน UI ด้วย

6. ส่งข้อความหัวข้อ

คุณลักษณะการลบล้างแพลตฟอร์มของ FCM HTTP v1 API ช่วยให้คำขอส่งข้อความมีพฤติกรรมที่แตกต่างกันบนแพลตฟอร์มที่ต่างกัน กรณีการใช้งานประการหนึ่งของคุณสมบัตินี้คือการแสดงเนื้อหาข้อความแจ้งเตือนที่แตกต่างกันตามแพลตฟอร์ม คุณลักษณะนี้ใช้อย่างเต็มที่เมื่อกำหนดเป้าหมายอุปกรณ์หลายเครื่อง (ซึ่งอาจครอบคลุมหลายแพลตฟอร์ม) ด้วยการส่งข้อความตามหัวข้อ ส่วนนี้จะอธิบายขั้นตอนต่างๆ เพื่อทำให้แอปของคุณได้รับข้อความหัวข้อที่ปรับแต่งสำหรับแต่ละแพลตฟอร์ม

สมัครสมาชิกหัวข้อจากลูกค้า

หากต้องการสมัครรับหัวข้อ ให้เรียกใช้เมธอด messaging.subscribeToTopic ที่ส่วนท้ายของฟังก์ชันหลักในไฟล์ main.dart ของแอป Flutter

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

[ไม่บังคับ] สมัครรับหัวข้อจากเซิร์ฟเวอร์สำหรับเว็บ

คุณสามารถข้ามส่วนนี้ได้หากคุณไม่ได้กำลังพัฒนาบนแพลตฟอร์มเว็บ

ขณะนี้ FCM JS SDK ไม่รองรับการสมัครหัวข้อฝั่งไคลเอ็นต์ คุณสามารถสมัครสมาชิกโดยใช้ API การจัดการหัวข้อฝั่งเซิร์ฟเวอร์ของ Admin SDK แทนได้ โค้ดนี้แสดงการสมัครสมาชิกหัวข้อฝั่งเซิร์ฟเวอร์ด้วย 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());
 }

เปิดเซิร์ฟเวอร์แอปแล้วคลิก เรียกใช้ เพื่อรันฟังก์ชันหลักในไฟล์ FcmSubscriptionManager.java :

ส่งข้อความที่มีการแทนที่แพลตฟอร์ม ไปยังหัวข้อ

ตอนนี้คุณพร้อมที่จะส่งข้อความแทนที่แพลตฟอร์มหัวข้อแล้ว ในข้อมูลโค้ดต่อไปนี้:

• คุณสร้างคำขอส่งด้วยข้อความพื้นฐานและชื่อ " A new app is available "
• ข้อความจะสร้างการแจ้งเตือนที่แสดงชื่อ " A new app is available " บน iOS และแพลตฟอร์มเว็บ
• ข้อความจะสร้างการแจ้งเตือนที่แสดงชื่อ " A new Android app is available " บนอุปกรณ์ Android

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(); . คลิก เรียกใช้ เพื่อส่งข้อความหัวข้อ

7. สรุปและจะเป็นอย่างไรต่อไป

โดยสรุป คุณได้เรียนรู้เกี่ยวกับการมีส่วนร่วมในการพัฒนาแอปหลายแพลตฟอร์มโดยใช้ Flutter และ FCM ซึ่งรวมถึงการตั้งค่าสภาพแวดล้อม การรวมการพึ่งพา และการรับและส่งข้อความ หากต้องการเจาะลึกยิ่งขึ้น โปรดดูเอกสารต่อไปนี้:

โค้ดแล็บ

• หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของ Flutter กับผลิตภัณฑ์ Firebase อื่นๆ รวมถึงการตรวจสอบผู้ใช้และการซิงค์ข้อมูล โปรดดู ที่ ทำความรู้จักกับ Firebase สำหรับ Flutter
• หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ FCM รวมถึงการส่งข้อความและหัวข้อในแอป: ใช้ FCM และ FIAM เพื่อส่งข้อความถึงผู้ใช้ และ ข้อความพุชมัลติคาสต์แรกของคุณโดยใช้หัวข้อ FCM

อ้างอิง

• ไซต์ Firebase
• เว็บไซต์กระพือ
• วิดเจ็ต FlutterFire Firebase Flutter
• ช่อง YouTube ของ Firebase
• ช่องยูทูปกระพือ