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

1. บทนำ

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

Codelab นี้จะแนะนำขั้นตอนการพัฒนาแอปแบบหลายแพลตฟอร์มด้วย Firebase Cloud Messaging (FCM) โดยใช้ Flutter คุณจะเขียนการติดตั้งใช้งานแอป 1 รายการ จากนั้นสร้างและเรียกใช้แอปได้อย่างราบรื่นบน 3 แพลตฟอร์ม ได้แก่ 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 และอุปกรณ์ macOS ที่ติดตั้ง XCode แล้ว

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

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

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

1. ดาวน์โหลดและติดตั้ง Flutter สำหรับระบบปฏิบัติการของคุณ: Install | Flutter
2. ตรวจสอบว่าได้เพิ่มเครื่องมือ Flutter ลงในเส้นทางแล้ว
3. ตั้งค่าโปรแกรมแก้ไขสำหรับ Flutter ตามที่แสดงในตั้งค่าโปรแกรมแก้ไข | Flutter อย่าลืมติดตั้งปลั๊กอิน Flutter และ Dart สำหรับโปรแกรมแก้ไข คุณจะใช้ Android Studio ในส่วนที่เหลือของโค้ดแล็บ
4. จากบรรทัดคำสั่ง ให้เรียกใช้ flutter doctor ซึ่งจะสแกนการตั้งค่าและแสดงรายการการอ้างอิงที่ขาดหายไปซึ่งต้องแก้ไข ทำตามวิธีการเพื่อแก้ไขการขึ้นต่อกันที่สำคัญซึ่งขาดหายไป โปรดทราบว่าอาจไม่จำเป็นต้องใช้การอ้างอิงบางอย่าง ตัวอย่างเช่น หากคุณไม่ได้พัฒนาสำหรับ 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. ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google
2. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น fcm4flutter)
   
3. คลิกต่อไป
4. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
5. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
6. สำหรับ Codelab นี้ คุณไม่จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
7. คลิกสร้างโปรเจ็กต์ รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกดำเนินการต่อ

ยินดีด้วย คุณสร้างโปรเจ็กต์ 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. ใช้ปุ่มลูกศรและ Spacebar เพื่อเลือกแพลตฟอร์ม หรือกด 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 ของ Apple (APNs)
3. ดาวน์โหลดไฟล์คีย์ซึ่งมีนามสกุลไฟล์เป็น .p8
4. ในคอนโซล Firebase ให้ไปที่การตั้งค่าโปรเจ็กต์ของโปรเจ็กต์ แล้วเลือกแท็บ Cloud Messaging

5. อัปโหลดไฟล์คีย์ APNs สำหรับแอป iOS ในแท็บ Cloud Messaging ป้อนรหัสคีย์ APNs จากแท็บ 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 เพื่อโหลดแพ็กเกจที่เพิ่มในตั้งค่า FlutterFire และแสดงโค้ดที่มีการตั้งค่า Intellisense ที่เหมาะสมใน Android Studio

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

ขอสิทธิ์

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

ก่อนอื่น ให้คัดลอกโค้ดนี้ไปยังฟังก์ชันหลักใต้ความคิดเห็น TODO: Request permission settings ที่แสดงจะบอกคุณว่าผู้ใช้ได้ให้สิทธิ์หรือไม่ เราขอแนะนำให้ขอสิทธิ์เมื่อผู้ใช้จำเป็นต้องใช้ฟีเจอร์ที่ต้องมีการเข้าถึงเท่านั้น (เช่น เมื่อผู้ใช้เปิดการแจ้งเตือนในการตั้งค่าแอป) ในโค้ดแล็บนี้ เราจะขอสิทธิ์เมื่อแอปเริ่มต้นทำงานเพื่อให้เข้าใจได้ง่าย

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 ต้องเปิดใช้การแจ้งเตือนแบบพุชและโหมดเบื้องหลังใน Xcode โดยทำดังนี้

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

หลังจากนั้น ให้แทนที่วิดเจ็ต 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/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 ว่า "Handling a foreground message" เนื้อหาข้อความจะแสดงใน UI ด้วยเนื่องจาก UI ติดตามตัวควบคุมสตรีมสำหรับข้อความใหม่

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

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

• เมื่อเว็บแอปอยู่เบื้องหน้า คุณจะดูบันทึกใน Chrome Console ได้โดยคลิกขวาที่เว็บแล้วเลือก 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 ซึ่งรวมถึงการตั้งค่าสภาพแวดล้อม การผสานรวมการอ้างอิง และการรับและส่งข้อความ ดูข้อมูลเพิ่มเติมได้ที่สื่อต่อไปนี้

Codelabs

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

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

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