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

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

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

iOS+

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

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

Android

บริการ Google Play

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

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

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

เว็บ

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

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

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

   • หากนี่เป็นข้อความแรกที่คุณส่ง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. getInitialMessage(): หากเปิดแอปพลิเคชันจากสถานะที่สิ้นสุดแล้ว เมธอดนี้จะแสดงผล Future ที่มี RemoteMessage เมื่อใช้แล้ว ระบบจะนำ RemoteMessage ออก
2. onMessageOpenedApp: AStream ซึ่งโพสต์ 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
• ส่งข้อความไปยังหัวข้อ