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

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

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

iOS+

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

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

Android

บริการ Google Play

FCM ไคลเอ็นต์ต้องใช้อุปกรณ์ที่ใช้ Android 7.0 หรือ สูงกว่าซึ่งติดตั้งบริการ Google Play ไว้ด้วย หรือโปรแกรมจำลองที่ใช้ Android 7.0 พร้อม Google API โปรดทราบว่าคุณสามารถเลือกที่จะไม่ติดตั้งใช้งานแอป 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 คุณต้องเชื่อมโยงคีย์ 1 คู่กับโปรเจ็กต์ Firebase คุณสามารถ สร้างคู่คีย์ใหม่หรือนำเข้าคู่คีย์ที่มีอยู่ผ่าน Firebase คอนโซล

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

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

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

   flutter pub add firebase_messaging
   

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

   flutter run
   

ขอสิทธิ์การแจ้งเตือน

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

// 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...
}

เข้าถึงรหัสการติดตั้ง Firebase

เปิดใช้การลงทะเบียนโดยใช้ Firebase Installation ID

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

<meta-data android:name="firebase_messaging_installation_id_enabled"
           android:value="true" />

<key>FirebaseMessagingInstallationIdEnabled</key>
<true/>

สมัครใช้บริการสตรีม onRegistered

หากต้องการส่งข้อความไปยังอินสแตนซ์ของแอปในอุปกรณ์ที่เฉพาะเจาะจง คุณต้องมี Firebase Installation ID (FID) ของอินสแตนซ์ของ แอปนั้นเมื่อลงทะเบียนกับ FCM แล้ว ระบบจะส่ง FID แบบไม่พร้อมกันผ่านสตรีม onRegistered

ในแพลตฟอร์ม Android และ Apple นั้น FCM จะลงทะเบียนอินสแตนซ์ของแอป โดยอัตโนมัติเมื่อเริ่มต้นระบบหากเปิดใช้การเริ่มต้นใช้งานอัตโนมัติ (ค่าเริ่มต้น) อย่างไรก็ตาม คุณต้องเรียกใช้ register() อย่างชัดเจนในกรณีต่อไปนี้

• ในเว็บ คุณเลือกที่จะส่ง vapidKey และ serviceWorkerScriptPath ได้
• ในแพลตฟอร์ม Android และ Apple หากปิดใช้ การเริ่มต้นใช้งานอัตโนมัติ หรือหลังจากเรียกใช้ unregister() นอกจากนี้ คุณยังเรียกใช้ register() ได้ทุกเมื่อเพื่อทริกเกอร์ onRegistered ด้วย FID ที่ลงทะเบียนไว้แล้ว

สมัครใช้บริการ onRegistered ก่อนเรียกใช้ register() เสมอ เพื่อให้ Listener ทำงานอยู่เมื่อมีการปล่อยเหตุการณ์การลงทะเบียน

final messaging = FirebaseMessaging.instance;

messaging.onRegistered
    .listen((String installationId) {
      // TODO: Send the Firebase Installation ID (FID) to your application server.
    })
    .onError((err) {
      // Error getting Firebase Installation ID.
    });

// Required on Web, and on Android/Apple if auto-initialization is disabled.
await messaging.register(
  // Optional on Web (ignored on Android and Apple platforms)
  vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu",
);

สตรีม onRegistered จะปล่อย FID ในสถานการณ์ต่อไปนี้

1. โดยอัตโนมัติเมื่อเริ่มต้นแอปครั้งแรกและการซิงค์ตามปกติในแพลตฟอร์ม Android และ Apple เมื่อเปิดใช้การเริ่มต้นใช้งานอัตโนมัติ
2. ทุกครั้งที่การเรียกใช้ register() ด้วยตนเองเสร็จสิ้น (แม้ว่าอินสแตนซ์ของแอปจะลงทะเบียนไว้แล้ว onRegistered ก็ยังคงปล่อย FID ที่ลงทะเบียนไว้แล้ว)
3. ทุกครั้งที่ตรวจพบการเปลี่ยนแปลง Firebase Installation ID และแอปได้รับการ ลงทะเบียนอีกครั้งกับ FCM หรือในเว็บเมื่อมีการทริกเกอร์ pushsubscriptionchange เหตุการณ์

หลังจากได้รับ Firebase Installation ID (FID) แล้ว ให้ส่ง FID ไปยังเซิร์ฟเวอร์แอปและจัดเก็บโดยใช้วิธีที่คุณต้องการ

เข้าถึง Registration Token (เลิกใช้งานแล้ว)

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

ในแพลตฟอร์มเว็บ ให้ส่งคีย์สาธารณะ 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 หากต้องการป้องกันการลงทะเบียนอัตโนมัติ ให้ปิดใช้การเริ่มต้นใช้งานอัตโนมัติในระหว่างการสร้าง

เมื่อปิดใช้การเริ่มต้นใช้งานอัตโนมัติ คุณจะลงทะเบียนอินสแตนซ์ของแอปอย่างชัดเจนในรันไทม์ได้โดยเรียกใช้ register() (อย่าลืมสมัครใช้บริการ onRegistered ก่อนเพื่อรับ Firebase Installation ID)

await FirebaseMessaging.instance.register();

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. ในช่องที่มีป้ายกำกับว่า เพิ่ม Firebase Installation ID หรือ FCM Registration Token ให้ป้อน Firebase Installation ID หรือ Registration Token ที่ลงทะเบียนไว้

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
• ส่งข้อความไปยังหัวข้อ