ส่งข้อความทดสอบไปยังแอปที่อยู่เบื้องหลัง

หากต้องการเริ่มต้นใช้งาน FCM ให้สร้าง Use Case ที่ง่ายที่สุด นั่นคือการส่งข้อความแจ้งเตือนทดสอบจาก เครื่องมือแต่งการแจ้งเตือนไปยังอุปกรณ์ที่ใช้พัฒนา เมื่อแอปทำงานอยู่เบื้องหลังในอุปกรณ์ หน้านี้แสดงขั้นตอนทั้งหมดในการดำเนินการนี้ ตั้งแต่การตั้งค่าไปจนถึงการยืนยัน ซึ่งอาจรวมถึงขั้นตอนที่คุณดำเนินการเสร็จแล้วหากตั้งค่าแอป Flutter สำหรับ FCM

สำคัญ: คู่มือนี้มุ่งเน้นที่กรณีในเบื้องหลัง หากต้องการรับข้อความเมื่อแอปทำงานอยู่เบื้องหน้าด้วย โปรดดูรับข้อความในแอป Flutter

ติดตั้งปลั๊กอิน FCM

1. ติดตั้งและเริ่มต้นใช้งาน Firebase SDK สำหรับ Flutter หากยังไม่ได้ทำ

2. จากรูทของโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง ปลั๊กอิน

   flutter pub add firebase_messaging
   

3. เมื่ออัปเดตเสร็จแล้ว ให้สร้างแอปพลิเคชัน Flutter ใหม่โดยทำดังนี้

   flutter run
   

เข้าถึงโทเค็นการลงทะเบียน

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

หากต้องการเรียกโทเค็นการลงทะเบียนปัจจุบันสำหรับอินสแตนซ์แอป ให้เรียกใช้ getToken() หากไม่ได้รับสิทธิ์การแจ้งเตือน วิธีนี้จะ ขอสิทธิ์การแจ้งเตือนจากผู้ใช้ ไม่เช่นนั้น ระบบจะแสดงผลโทเค็นหรือ ปฏิเสธ Future เนื่องจากข้อผิดพลาด

final fcmToken = await FirebaseMessaging.instance.getToken();

ส่งข้อความแจ้งเตือนทดสอบ

1. ติดตั้งและเรียกใช้แอปในอุปกรณ์เป้าหมาย ในอุปกรณ์ Apple คุณจะต้อง ยอมรับคำขอสิทธิ์เพื่อรับการแจ้งเตือนจากระยะไกล

2. ตรวจสอบว่าแอปทำงานอยู่เบื้องหลังในอุปกรณ์

3. เปิดหน้าการรับส่งข้อความในFirebaseคอนโซล

4. หากนี่เป็นข้อความแรก ให้เลือกสร้างแคมเปญแรก

   1. เลือกข้อความการแจ้งเตือนของ Firebase แล้วเลือกสร้าง

5. หรือในแท็บแคมเปญ ให้เลือกแคมเปญใหม่ แล้วเลือกการแจ้งเตือน

6. ป้อนข้อความ ช่องอื่นๆ ทั้งหมดไม่บังคับ

7. เลือกส่งข้อความทดสอบจากแผงด้านขวา

8. ในช่องที่มีป้ายกำกับว่าเพิ่มโทเค็นการลงทะเบียน FCM ให้ป้อนโทเค็นการลงทะเบียนที่คุณได้รับในส่วนก่อนหน้าของคู่มือนี้

9. เลือกทดสอบ

หลังจากเลือกทดสอบแล้ว อุปกรณ์ไคลเอ็นต์เป้าหมาย (ที่มีแอปทำงานในเบื้องหลัง) ควรได้รับการแจ้งเตือน

ดูข้อมูลเชิงลึกเกี่ยวกับการนำส่งข้อความไปยังแอปได้ใน แดชบอร์ดการรายงาน FCM ซึ่งบันทึกจำนวนข้อความที่ส่งและเปิดในอุปกรณ์ Apple และ Android รวมถึงข้อมูลสำหรับ "การแสดงผล" (การแจ้งเตือนที่ผู้ใช้เห็น) สำหรับ แอป Android

การจัดการการโต้ตอบ

เมื่อผู้ใช้แตะการแจ้งเตือน ลักษณะการทำงานเริ่มต้นทั้งใน Android และ iOS คือการเปิดแอปพลิเคชัน หากแอปพลิเคชันถูกปิด ระบบจะเริ่มแอปพลิเคชัน และหากแอปพลิเคชันอยู่ในเบื้องหลัง ระบบจะนำแอปพลิเคชันมาไว้เบื้องหน้า

คุณอาจต้องการจัดการการโต้ตอบของผู้ใช้เมื่อแอปพลิเคชันเปิดขึ้น ทั้งนี้ขึ้นอยู่กับเนื้อหาของการแจ้งเตือน ตัวอย่างเช่น หากมีการส่งข้อความแชทใหม่โดยใช้การแจ้งเตือนและผู้ใช้เลือกข้อความดังกล่าว คุณอาจต้องการ เปิดการสนทนาที่เฉพาะเจาะจงเมื่อแอปพลิเคชันเปิดขึ้น

แพ็กเกจ firebase-messaging มีวิธีจัดการการโต้ตอบนี้ 2 วิธี ดังนี้

1. getInitialMessage(): หากเปิดแอปจากสถานะที่สิ้นสุดแล้ว เมธอดนี้จะแสดงผล Future ที่มี RemoteMessage เมื่อใช้แล้ว ระบบจะนำ RemoteMessage ออก
2. onMessageOpenedApp: Stream ซึ่งโพสต์ RemoteMessage เมื่อเปิดแอปพลิเคชันจาก สถานะเบื้องหลัง

คุณควรจัดการทั้ง 2 สถานการณ์เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่น ตัวอย่างโค้ด ด้านล่างนี้แสดงวิธีดำเนินการ

class Application extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Application();
}

class _Application extends State<Application> {
  // In this example, suppose that all messages contain a data field with the key 'type'.
  Future<void> setupInteractedMessage() async {
    // Get any messages which caused the application to open from
    // a terminated state.
    RemoteMessage? initialMessage =
        await FirebaseMessaging.instance.getInitialMessage();

    // If the message also contains a data property with a "type" of "chat",
    // navigate to a chat screen
    if (initialMessage != null) {
      _handleMessage(initialMessage);
    }

    // Also handle any interaction when the app is in the background via a
    // Stream listener
    FirebaseMessaging.onMessageOpenedApp.listen(_handleMessage);
  }

  void _handleMessage(RemoteMessage message) {
    if (message.data['type'] == 'chat') {
      Navigator.pushNamed(context, '/chat',
        arguments: ChatArguments(message),
      );
    }
  }

  @override
  void initState() {
    super.initState();

    // Run code required to handle interacted messages in an async function
    // as initState() must not be async
    setupInteractedMessage();
  }

  @override
  Widget build(BuildContext context) {
    return Text("...");
  }
}

วิธีจัดการการโต้ตอบจะขึ้นอยู่กับการตั้งค่าแอปพลิเคชัน ตัวอย่างด้านบน แสดงตัวอย่างพื้นฐานของการใช้ StatefulWidget

ขั้นตอนถัดไป

ส่งข้อความไปยังแอปที่ทำงานอยู่เบื้องหน้า

เมื่อส่งข้อความแจ้งขณะที่แอปทำงานในเบื้องหลังเรียบร้อยแล้ว ให้ดูหัวข้อรับข้อความในแอป Flutter เพื่อเริ่มส่งไปยังแอปที่ทำงานในเบื้องหน้า

ไปไกลกว่าข้อความแจ้งเตือน

หากต้องการเพิ่มลักษณะการทำงานอื่นๆ ที่ซับซ้อนมากขึ้นให้กับแอป คุณจะต้องมีการติดตั้งใช้งานฝั่งเซิร์ฟเวอร์

จากนั้นในไคลเอ็นต์แอป ให้ทำดังนี้

• รับข้อความ
• ติดตามหัวข้อข้อความ