تعرف على كيفية استخدام ميزة Firebase Cloud Messaging (FCM) لدمج إشعارات الدفع داخل تطبيق React.

تعمل الإشعارات الفورية على تمكين التطبيقات من إرسال تحديثات أو تنبيهات أو رسائل مخصصة في الوقت المناسب مباشرة إلى أجهزة المستخدمين ، بغض النظر عن استخدامهم النشط للتطبيق. تضمن هذه الإخطارات مشاركة المستخدم المستمرة والاتصال الفوري.

في حالة تطبيقات الويب ، يلتقط المتصفح هذه الإخطارات في البداية ثم يعيد توجيهها إلى التطبيق المقابل.

قم بإعداد مشروع Firebase

اتبع الخطوات أدناه لبدء مشروع Firebase وإعداده:

  1. رئيس لأكثر من وحدة تحكم مطوري Firebase، قم بتسجيل الدخول باستخدام عنوان بريدك الإلكتروني في Google ، وانقر فوق اذهب إلى وحدة التحكم زر للتنقل إلى صفحة نظرة عامة على وحدة التحكم.
  2. في صفحة نظرة عامة على وحدة التحكم ، انقر فوق أنشئ مشروعًا زر لإنشاء مشروع جديد. ثم اكتب اسم المشروع.
  3. بمجرد إنشاء المشروع بنجاح ، انتقل إلى صفحة نظرة عامة على المشروع. تحتاج إلى تسجيل تطبيق على Firebase لإنشاء مفاتيح API. لتسجيل التطبيق ، انقر فوق الويب رمز ، أدخل اسم التطبيق ، وانقر على تسجيل التطبيق زر.
  4. انسخ رمز تهيئة Firebase بعد تسجيل تطبيق React.
instagram viewer

تكوين خدمة Firebase Cloud Messaging (FCM)

بمجرد تسجيل تطبيقك على Firebase ، فإن الخطوة التالية هي تكوين خدمة Firebase Cloud Messaging (FCM).

  1. انتقل إلى إعدادات المشروع صفحة.
  2. بعد ذلك ، انقر فوق المراسلة السحابية علامة التبويب على إعدادات المشروع صفحة. يستخدم Firebase Cloud Messaging أزواج مفاتيح هوية التطبيق للاتصال بخدمات الدفع الخارجية. لهذا السبب ، تحتاج إلى إنشاء مفتاح هويتك الفريد.
  3. على ال المراسلة السحابية الإعدادات ، انتقل إلى تكوين الويب ، وانقر فوق توليد زوج المفاتيح لتوليد مفتاحك الفريد.

قم بإعداد تطبيق React

أولاً، إنشاء تطبيق React. بمجرد التثبيت ، امض قدمًا وقم بتثبيت فايربيس و رد فعل-نخب ساخن الحزم التي ستستخدمها لتنفيذ إشعارات الدفع في تطبيق React.

npm تثبيت firebase رد فعل الساخنة نخب

يمكنك العثور على الكود المصدري لهذا المشروع في هذا مستودع جيثب.

هيئ Firebase و Cloud Messaging Service

توجه إلى ملف إعدادات المشروع صفحة في وحدة تحكم المطور ، وانسخ كائن تهيئة Firebase المقدم. في ال src الدليل ، قم بإنشاء ملف firebase.js ملف وإضافة الكود التالي.

يستورد {initializeApp} من"Firebase / التطبيق";
يستورد {getMessaging، getToken، onMessage} من"Firebase / المراسلة";
مقدار ثابت firebaseConfig = {
 مفتاح API: "",
 نطاق التأليف: "",
 معرف المشروع: "",
 التخزين "",
 المراسلة "",
 معرف التطبيق: ""
};
مقدار ثابت app = initializeApp (firebaseConfig) ؛
مقدار ثابت messaging = getMessaging (تطبيق) ؛

استبدل ما ورد أعلاه FirebaseConfig الكائن الذي نسخته من ملف إعدادات المشروع صفحة. سيقوم هذا الرمز بإعداد مثيل Firebase وتهيئة كائن المراسلة السحابية لتمكين وظيفة FCM في تطبيقك.

إدارة طلبات أذونات المستخدم الخاصة بالإشعارات

للسماح لتطبيقات React بتلقي الإشعارات الفورية من خدمة المراسلة السحابية في Firebase ، تحتاج إلى التعامل مع أذونات المستخدم.

هذا ينطوي على تعريف واستدعاء طلب إذن الطريقة التي يوفرها كائن المراسلة ، الذي قمت بتكوينه مسبقًا. إنه يضمن أنك تتعامل بشكل صحيح مع استجابات المستخدم لطلبات إذن الإخطارات.

أضف التعليمات البرمجية التالية إلى ملف firebase.js ملف بعد تهيئة كائن المراسلة.

يصدّرمقدار ثابت requestPermission = () => {
وحدة التحكم.سجل("طلب إذن المستخدم ...");
 Notification.requestPermission (). ثم ((إذن) => {


لو (إذن "ممنوح") {


وحدة التحكم.سجل("تم منح إذن المستخدم الإخطار."); 
يعود getToken (المراسلة ، { vapidKey: "Notification_key_pair" })
 .ثم((CurrentToken) => {


لو (currentToken) {


وحدة التحكم.سجل("رمز العميل:"، currentToken) ؛
 } آخر {

وحدة التحكم.سجل("فشل إنشاء رمز تسجيل التطبيق".);
 }
 })
 .يمسك((يخطئ) => {


وحدة التحكم.سجل("حدث خطأ أثناء طلب استلام الرمز المميز."، يخطئ) ؛
 });
 } آخر {


وحدة التحكم.سجل("تم رفض إذن المستخدم.");
 }
 });


 }
requestPermission () ؛

يطلب الرمز المقدم إذن المستخدم للإشعارات ويتعامل مع استجابة الإذن. إذا تم منح الإذن ، فسيستمر في الحصول على رمز تسجيل للتطبيق باستخدام الحصول على رمز وظيفة.

يعمل رمز التسجيل كمعرّف للجهاز أو المتصفح الذي يتلقى الإشعارات. يمكنك بعد ذلك استخدام هذا الرمز المميز لإعداد حملة إعلام في صفحة إعدادات Firebase Cloud Messaging.

تأكد من استبدال العنصر النائب Notification_key_pair مع زوج المفاتيح الفعلي الذي أنشأته سابقًا في تكوين الويب قسم.

تحديد مستمعي الإعلام

للتعامل مع أي نوع من الإخطارات الواردة ، من الضروري إعداد مستمعين للرسائل لتتبع الإخطارات الواردة ووظائف رد الاتصال لتشغيل أي أحداث مراسلة.

في الخاص بك firebase.js ملف ، أضف الكود التالي.

يصدّرمقدار ثابت onMessageListener = () =>
جديديعد((حل) => {
 onMessage (المراسلة ، (الحمولة) => {
 حل (الحمولة) ؛
 });
});

تقوم هذه الوظيفة بإعداد مستمع الرسائل خصيصًا للإشعارات الفورية. ال على الرسالة وظيفة داخل onMessageListener يتم تشغيله عندما يتلقى التطبيق إشعارًا فوريًا ويكون موضع التركيز.

عند استلام إشعار ، ستحتوي حمولة الرسالة على البيانات ذات الصلة المرتبطة بالإخطار ، مثل عنوان الرسالة ونصها.

حدد عامل خدمة مراسلة Firebase

تتطلب FCM مراسلة Firebase عامل الخدمة للتعامل مع الإخطارات الواردة.

عامل الخدمة هو ملف JavaScript يتم تشغيله في الخلفية ويتعامل مع دفع الإخطارات — يسمح للويب لتلقي الإشعارات وعرضها ، حتى إذا أغلق المستخدم التطبيق أو تحول إلى علامة تبويب مختلفة أو نافذة او شباك.

في ال /public الدليل ، قم بإنشاء ملف firebase-messaging-sw.js ملف وتضمين الكود التالي.

importScripts (" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts (" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
// كائن تهيئة Firebase 
مقدار ثابت firebaseConfig = {
"معلومات التكوين"
 };


firebase.initializeApp (firebaseConfig) ؛
مقدار ثابت messaging = firebase.messaging () ؛


messaging.onBackgroundMessage (وظيفة(الحمولة) {
وحدة التحكم.سجل("تلقي رسالة في الخلفية"، الحمولة) ؛
مقدار ثابت ificationTitle = payload.notification.title ؛
مقدار ثابت خيارات الإخطار = {
 الجسم: payload.notification.body،
 };
 self.registration.showNotification (عنوان الإعلام ،
 خيارات الإخطار) ؛
});

يقوم هذا الرمز بإعداد عامل خدمة لـ Firebase Cloud Messaging في تطبيق React ، مما يتيح معالجة الإخطارات وعرضها.

قم بإنشاء مكون إعلام

إنشاء ملف المكونات / Notification.js ملف في /src الدليل وإضافة الكود التالي.

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {محمصة خبز محمصة} من"رد فعل-نخب ساخن";
يستورد {requestPermission، onMessageListener} من"../firebase";
وظيفةإشعار() {
مقدار ثابت [إشعار ، setNotification] = useState ({ عنوان: '', جسم: '' });
 useEffect (() => {
 requestPermission () ؛
مقدار ثابت unsubscribe = onMessageListener (). ثم ((الحمولة) => {
 setNotification ({
 العنوان: payload؟ .notification؟ .title،
 body: payload؟ .notification؟ .body،
 });
 نخب. النجاح (`$ {payload؟ .notification؟ .title}: $ {payload؟ .notification؟ .body}`, {
 مدة: 60000, 
 موضع: 'اعلى اليمين'، قسم ل صفحة المتصفح
 });
});
يعود() => {
 unsubscribe.catch ((يخطئ) =>وحدة التحكم.سجل('فشل: '، يخطئ)) ؛
 };
 }, []);
يعود (



 </div>
 );
}
يصدّرتقصير إشعار؛

يحدد هذا الرمز المكون الذي يتعامل مع دفع الإخطارات. يستخدم رد فعل-نخب ساخن مكتبة لعرض الإخطارات للمستخدم.

يطلب المكون إذن المستخدم ، ويستمع إلى الرسائل الواردة باستخدام onMessageListener وظيفة ، ويعرض افتراضيًا إشعارًا نخبًا بالعنوان والجسم المستقبلين لمدة دقيقة واحدة في القسم العلوي الأيمن من صفحة المتصفح. يمكنك تخصيص الإشعار بشكل أكبر بمساعدة المسؤول رد فعل-نخب ساخن الوثائق و خاصية موضع CSS.

أخيرًا ، قم بتحديث ملف App.js ملف لاستيراد ملف إشعار عنصر.

يستورد"./App.css";
يستورد إشعار من"./components/Notification";
وظيفةبرنامج() {
يعود (
"برنامج">
"عنوان التطبيق"> 

 </header> 
 </div>
 );
}
يصدّرتقصير برنامج؛

اختبر ميزة إعلام الدفع

انطلق وقم بتدوير خادم التطوير وافتحه http://locahlhost: 3000 على متصفحك للوصول إلى التطبيق. يجب أن تحصل على النافذة المنبثقة التالية للسماح للتطبيق بتلقي الإشعارات.

انقر يسمح. ال رمز العميل يجب إنشاء وتسجيل الدخول في وحدة تحكم المتصفح. ستستخدم الرمز المميز لإرسال حملات إشعار إلى تطبيق React الخاص بك.

انسخ ال رمز العميل وتوجه إلى وحدة تحكم مطوري Firebase ملخص المشروع صفحة. انقر على المراسلة السحابية بطاقة تحت تنمو وتفاعل جمهورك قسم.

انقر أنشئ حملتك الأولى، يختار رسائل إشعارات Firebase، وتوفير عنوان ورسالة لإشعارك. تحت معاينة الجهاز القسم ، انقر فوق إرسال رسالة اختبارية.

الصق الرمز المميز للعميل وأضفه في النافذة المنبثقة التالية وانقر فوق امتحان لإرسال إشعار الدفع.

إذا كنت تستخدم التطبيق ، فستتلقى إشعارًا فوريًا. إذا لم يكن الأمر كذلك ، فستتلقى إشعارًا في الخلفية.

إرسال إشعارات الدفع باستخدام Firebase Cloud Messaging Service

تعد الإشعارات الفورية ميزة قيمة لتحسين تجربة المستخدم لكل من تطبيقات الويب والجوال. سلط هذا الدليل الضوء على خطوات دمج الإشعارات الفورية باستخدام Firebase ، بما في ذلك التعامل مع أذونات المستخدم وإعداد مستمعين للرسائل.

من خلال الاستفادة من واجهات برمجة تطبيقات Firebase Cloud Messaging ، يمكنك تقديم تحديثات في الوقت المناسب ورسائل مخصصة بشكل فعال لتطبيقات React الخاصة بك.