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

ตั้งค่าแอปไคลเอ็นต์ Firebase Cloud Messaging ใน Flutter

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

iOS+

เปิดใช้ความสามารถของแอปใน Xcode

ก่อนที่แอปพลิเคชันจะเริ่มรับข้อความได้ คุณต้องเปิดใช้การแจ้งเตือนแบบพุชและโหมดพื้นหลังในโปรเจ็กต์ Xcode

1. เปิดพื้นที่ทำงานของโปรเจ็กต์ Xcode (`ios/Runner.xcworkspace`)
2. เปิดใช้ข้อความ Push
3. เปิดใช้การดึงข้อมูลในเบื้องหลังและ การแจ้งเตือนจากระยะไกล โหมดการดำเนินการ ในเบื้องหลัง

อัปโหลดคีย์ การตรวจสอบสิทธิ์ APNs

ก่อนใช้ FCM ให้อัปโหลดคีย์การตรวจสอบสิทธิ์ APNs ไปยังคอนโซล Firebase หากยังไม่มีคีย์การตรวจสอบสิทธิ์ APNs ให้สร้างคีย์ในศูนย์สมาชิกนักพัฒนาซอฟต์แวร์ของ Apple

1. ภายในโปรเจ็กต์ในFirebaseคอนโซล ให้เลือกไอคอนรูปเฟือง เลือก การตั้งค่าโปรเจ็กต์ แล้วเลือกแท็บ Cloud Messaging
2. เลือกปุ่มอัปโหลดเพื่ออัปโหลดคีย์การตรวจสอบสิทธิ์สำหรับการพัฒนา หรือคีย์การตรวจสอบสิทธิ์สำหรับการใช้งานจริง หรือทั้ง 2 อย่าง ต้องระบุอย่างน้อย 1 รายการ
3. สำหรับคีย์การตรวจสอบสิทธิ์แต่ละรายการ ให้เลือกไฟล์ .p8 แล้วระบุรหัสคีย์และรหัสทีม Apple เลือกบันทึก

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

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

Android

บริการ Google Play

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

สร้างคู่คีย์ใหม่

1. เปิดแท็บ Cloud Messaging ของแผงFirebase Console Settings แล้วไปที่ส่วน Web configuration
2. ในแท็บใบรับรองการแจ้งเตือนแบบพุชบนเว็บ ให้คลิกสร้างคู่คีย์ คอนโซลจะแสดงการแจ้งเตือนว่ามีการสร้างคู่คีย์แล้ว รวมถึงแสดงสตริงคีย์สาธารณะและวันที่เพิ่ม

นำเข้าคู่คีย์ที่มีอยู่

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

1. เปิดแท็บ Cloud Messaging ของแผงFirebase Console Settings แล้วไปที่ส่วน Web configuration
2. ในแท็บใบรับรองการแจ้งเตือนแบบพุชบนเว็บ ให้เลือกนำเข้า คู่คีย์ที่มีอยู่
3. ในกล่องโต้ตอบนำเข้าคู่คีย์ ให้ระบุคีย์สาธารณะและคีย์ส่วนตัวใน ช่องที่เกี่ยวข้อง แล้วคลิกนำเข้า คอนโซลจะแสดง สตริงคีย์สาธารณะและวันที่เพิ่ม

ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบของคีย์และวิธีสร้างคีย์ได้ที่คีย์เซิร์ฟเวอร์แอปพลิเคชัน

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

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

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

   flutter pub add firebase_messaging
   

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

   flutter run
   

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

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

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