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

1. บทนำ

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

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

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

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

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

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

สิ่งที่คุณต้องมี

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

คุณเรียกใช้ Codelab ได้โดยใช้อุปกรณ์ต่อไปนี้

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

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

2. การตั้งค่า Flutter

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

หากต้องการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ Flutter ให้ทำตามขั้นตอนต่อไปนี้

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

6. ใน Android Studio ให้ไปที่ไฟล์ -> เปิด ค้นหาเส้นทางของแอป Flutter แล้วคลิกเปิดเพื่อเปิดโปรเจ็กต์ใน 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 และเว็บ) แต่คุณจะเลือกได้เพียง 1 หรือ 2 แพลตฟอร์มเท่านั้น หากระบบขอรหัสชุด iOS ให้ป้อน com.flutter.fcm.fcmflutter หรือรหัสชุด iOS ของคุณเองในรูปแบบ [company domain name].[project name] หลังจากคําสั่งเสร็จสมบูรณ์ ให้รีเฟรชหน้าคอนโซล Firebase คุณจะเห็นว่ามีการสร้างแอปสำหรับแพลตฟอร์มที่เลือกภายใต้โปรเจ็กต์ Firebase แล้ว

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

ตั้งค่า Cloud Messaging สำหรับ iOS

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

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

5. อัปโหลดไฟล์คีย์ APN สำหรับแอป iOS ในแท็บการรับส่งข้อความในระบบคลาวด์ ป้อนรหัสคีย์ APNs จากแท็บการรับส่งข้อความในระบบคลาวด์และรหัสทีม ซึ่งอยู่ในศูนย์สมาชิก 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());
}

จากนั้นเรียกใช้เครื่องมือ -> แขนระบาย -> Flutter Pub Get ใน Android Studio เพื่อโหลดแพ็กเกจที่เพิ่มไว้ที่ตั้งค่า 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]

ขั้นตอนเพิ่มเติมในการรับข้อความบนเว็บ

เว็บแอปต้องมีขั้นตอนเพิ่มเติมอีก 2 ขั้นตอนเพื่อรับโทเค็นการลงทะเบียนและฟังข้อความขาเข้า เว็บต้องส่งคีย์ 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 ได้ โปรดดูข้อมูลเพิ่มเติมที่การตั้งค่าตัวเลือกการแจ้งเตือนใน Service Worker

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

หลังจากนั้น ในการตั้งค่าโปรเจ็กต์ -> ทั่วไป ให้เลื่อนลงและหาเว็บแอป คัดลอกส่วนรหัส 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 ต้องเปิดใช้ข้อความ Push และโหมดพื้นหลังใน Xcode ดังนี้

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

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

ต่อไป ให้เรียกใช้เครื่องมือ -> 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);
 });

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

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

เครื่องจัดการข้อความในเบื้องหลังสำหรับเว็บ

สำหรับ firebase_messaging ใน FlutterFire เวอร์ชัน 11.2.8 การจัดการข้อความในเบื้องหลังในแพลตฟอร์มบนเว็บต้องมีขั้นตอนที่แตกต่างกัน ดังนั้นคุณจึงต้องเพิ่มเครื่องจัดการข้อความแยกต่างหากใน Service Worker web/firebase-messaging-sw.js

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

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

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

Codelab

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

ข้อมูลอ้างอิง

• เว็บไซต์ Firebase
• เว็บไซต์ Flutter
• วิดเจ็ต FlutterFire Firebase Flutter
• ช่อง YouTube ของ Firebase
• ช่อง YouTube ของ Flutter