เริ่มต้นใช้งาน Firebase Cloud Messaging ในแอป Flutter

คู่มือนี้อธิบายวิธีเริ่มต้นใช้งาน Firebase Cloud Messaging ในแอปไคลเอ็นต์ Flutter เพื่อให้คุณส่งข้อความได้อย่างน่าเชื่อถือ

คุณจะต้องทำตามขั้นตอนการตั้งค่าเพิ่มเติมที่จำเป็นบางอย่าง ทั้งนี้ขึ้นอยู่กับแพลตฟอร์มที่คุณกำหนดเป้าหมาย

iOS+

การแลกเปลี่ยนเมธอด

หากต้องการใช้ปลั๊กอิน Flutter FCM ในอุปกรณ์ Apple คุณต้องทำการแลกเปลี่ยนเมธอด หากไม่มีการแลกเปลี่ยนเมธอด ฟีเจอร์สำคัญของ Firebase เช่น การจัดการโทเค็น FCM จะทำงานไม่ถูกต้อง

Android

บริการ Google Play

FCM ไคลเอ็นต์ต้องใช้อุปกรณ์ที่ใช้ Android 4.4 ขึ้นไปซึ่ง ติดตั้งบริการ Google Play ไว้ด้วย หรืออีมูเลเตอร์ที่ใช้ Android 4.4 พร้อม Google APIs โปรดทราบว่าคุณไม่ได้จำกัดอยู่เพียงแค่การติดตั้งใช้งานแอป Android ผ่าน Google Play Store เท่านั้น

แอปที่ใช้ Play Services SDK ควรตรวจสอบอุปกรณ์เพื่อหา APK ของบริการ Google Play ที่เข้ากันได้ก่อนที่จะเข้าถึงฟีเจอร์ของบริการ Google Play เสมอ เราขอแนะนำให้ตรวจสอบใน 2 ที่ ได้แก่ เมธอด onCreate() ของกิจกรรมหลัก และเมธอด onResume() ของกิจกรรมหลัก การตรวจสอบใน onCreate() จะช่วยให้มั่นใจว่าแอปจะใช้งานไม่ได้หากการตรวจสอบไม่สำเร็จ การตรวจสอบใน onResume() จะช่วยให้มั่นใจว่าระบบจะยังคงทำการตรวจสอบแม้ว่าผู้ใช้จะกลับมาที่แอปที่กำลังทำงานอยู่ผ่านวิธีอื่น เช่น ผ่านปุ่มย้อนกลับ

หากอุปกรณ์ไม่มีบริการ Google Play เวอร์ชันที่เข้ากันได้ แอปของคุณสามารถเรียก GoogleApiAvailability.makeGooglePlayServicesAvailable() เพื่ออนุญาตให้ผู้ใช้ดาวน์โหลดบริการ Google Play จาก Play Store ได้

เว็บ

กำหนดค่าข้อมูลเข้าสู่ระบบเว็บด้วย FCM

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

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

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

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

   flutter pub add firebase_messaging
   

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

   flutter run
   

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

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

// You may set the permission requests to "provisional" which allows the user to choose what type
// of notifications they would like to receive once the user receives a notification.
final notificationSettings = await FirebaseMessaging.instance.requestPermission(provisional: true);

// For apple platforms, make sure the APNS token is available before making any FCM plugin API calls
final apnsToken = await FirebaseMessaging.instance.getAPNSToken();
if (apnsToken != null) {
 // APNS token is available, make FCM plugin API requests...
}

ในแพลตฟอร์มเว็บ ให้ส่งคีย์สาธารณะ VAPID ไปยัง getToken()

final fcmToken = await FirebaseMessaging.instance.getToken(vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");

หากต้องการรับการแจ้งเตือนทุกครั้งที่โทเค็นได้รับการอัปเดต ให้สมัครใช้บริการสตรีม onTokenRefresh

FirebaseMessaging.instance.onTokenRefresh
    .listen((fcmToken) {
      // TODO: If necessary send token to application server.

      // Note: This callback is fired at each app startup and whenever a new
      // token is generated.
    })
    .onError((err) {
      // Error getting token.
    });

ป้องกันการเริ่มต้นใช้งานอัตโนมัติ

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

iOS

ใน iOS ให้เพิ่มค่าข้อมูลเมตาลงใน Info.plist

FirebaseMessagingAutoInitEnabled = NO

Android

ใน Android ให้ปิดใช้การเก็บรวบรวมข้อมูล Analytics และการเริ่มต้นใช้งาน FCM โดยอัตโนมัติ (คุณต้องปิดใช้ทั้ง 2 อย่าง) โดยเพิ่มค่าข้อมูลเมตาเหล่านี้ลงใน AndroidManifest.xml

<meta-data
    android:name="firebase_messaging_auto_init_enabled"
    android:value="false" />
<meta-data
    android:name="firebase_analytics_collection_enabled"
    android:value="false" />

เปิดใช้การเริ่มต้นใช้งาน FCM โดยอัตโนมัติอีกครั้งในรันไทม์

หากต้องการเปิดใช้การเริ่มต้นใช้งานอัตโนมัติสำหรับอินสแตนซ์แอปที่เฉพาะเจาะจง ให้เรียก setAutoInitEnabled()

await FirebaseMessaging.instance.setAutoInitEnabled(true);

ค่านี้จะยังคงอยู่เมื่อรีสตาร์ทแอปหลังจากตั้งค่าแล้ว

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

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

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

3. ในคอนโซลFirebase ให้ไปที่ DevOps และการมีส่วนร่วม > Messaging

4. สร้างแคมเปญ

   • หากเป็นการส่งข้อความครั้งแรก ให้ทำดังนี้

     1. เลือกสร้างแคมเปญแรก

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

   • หากเคยสร้างแคมเปญไว้ก่อนหน้านี้ ให้ทำดังนี้

     1. ในแท็บแคมเปญ ให้เลือกแคมเปญใหม่

     2. คลิกการแจ้งเตือน

5. ป้อนข้อความ

6. เลือกส่งข้อความทดสอบ จากบานหน้าต่างด้านขวา

7. ในช่องที่มีป้ายกำกับว่า เพิ่มโทเค็นการลงทะเบียนFCM ให้ป้อนโทเค็นการลงทะเบียน

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

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

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

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

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

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

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

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

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

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

class _Application extends State {
  // In this example, suppose that all messages contain a data field with the key 'type'.
  Future 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 using 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

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

หลังจากทำตามขั้นตอนการตั้งค่าแล้ว คุณสามารถเลือกดำเนินการต่อด้วย FCM สำหรับ Flutter ได้ดังนี้

• ส่งข้อความไปยังอุปกรณ์
• รับข้อความในแอป Flutter
• ส่งข้อความไปยังหัวข้อ