إشعارات Firebase في رد فعل

أصبحت الإخطارات جزءًا ثابتًا من الويب في الوقت الحاضر. ليس من غير المألوف أن تصادف مواقع تطلب الإذن لإرسال إشعارات إلى متصفحك. تقوم معظم متصفحات الويب الحديثة بتنفيذ واجهة برمجة التطبيقات (API) وهي قادرة على التعامل مع دفع الإخطارات. يوضح الفحص السريع على caniuse أن واجهة برمجة التطبيقات تتمتع بدعم واسع بين المتصفحات الحديثة القائمة على Chrome ومتصفح Firefox.

هناك العديد من الخدمات لتنفيذ الإخطارات على الويب. ومن أبرزها Pusher و Firebase. في هذه المقالة ، سننفذ إشعارات الدفع باستخدام خدمة Firebase Cloud Messaging (FCM) ، وهي "حل مراسلة عبر الأنظمة الأساسية يتيح لك إرسال رسائل موثوقة دون أي تكلفة".

أفترض أن القارئ لديه بعض الإلمام بكتابة تطبيق للجهة الخلفية في Express.js و / أو بعض الإلمام بـ React. إذا كنت مرتاحًا لأي من هذه التقنيات ، فيمكنك العمل مع الواجهة الأمامية أو الخلفية. سنقوم بتنفيذ الواجهة الخلفية أولاً ، ثم ننتقل إلى الواجهة الأمامية. بهذه الطريقة ، يمكنك استخدام أي قسم يروق لك أكثر.

لذلك دعونا نبدأ.

أنواع رسائل Firebase

تحدد وثائق Firebase أن تنفيذ FCM يتطلب مكونين.

1. بيئة موثوقة مثل Cloud Functions لـ Firebase أو خادم تطبيقات يمكن بناء الرسائل واستهدافها وإرسالها عليها.
2. تطبيق عميل iOS أو Android أو الويب (JavaScript) يتلقى الرسائل عبر خدمة النقل الخاصة بالمنصة المقابلة.

سنهتم بالعنصر 1 في تطبيقنا الخلفي السريع ، والبند 2 في تطبيق الواجهة الأمامية للتفاعل.

تشير المستندات أيضًا إلى أن FCM تتيح لنا إرسال نوعين من الرسائل.

1. يتم التعامل مع رسائل الإعلام (التي يُنظر إليها أحيانًا على أنها "رسائل عرض") بواسطة FCM SDK تلقائيًا.
2. يتم التعامل مع رسائل البيانات بواسطة تطبيق العميل.

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

إعداد مشروع Firebase

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

بعد إعداد حساب Google الخاص بك ، توجه إلى وحدة تحكم Firebase.

انقر فوق إضافة مشروع . أدخل اسمًا لمشروعك وانقر على متابعة . في الشاشة التالية ، يمكنك اختيار إيقاف تشغيل التحليلات. يمكنك دائمًا تشغيله لاحقًا من قائمة Analytics بصفحة مشروعك. انقر فوق متابعة وانتظر بضع دقائق حتى يتم إنشاء المشروع. عادة ما تكون أقل من دقيقة. ثم انقر فوق " متابعة " لفتح صفحة مشروعك.

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

نهاية المقدمة

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

امنح تطبيقك لقبًا . لا حاجة لإعداد استضافة Firebase. انقر فوق تطبيق Register وامنحه بضع ثوانٍ لإكمال الإعداد. في الشاشة التالية ، انسخ بيانات اعتماد التطبيق وقم بتخزينها في مكان ما. يمكنك ترك هذه النافذة مفتوحة والعودة إليها لاحقًا.

سنحتاج إلى كائن التكوين لاحقًا. انقر فوق متابعة لوحدة التحكم للعودة إلى وحدة التحكم الخاصة بك.

الخلفية

نحتاج إلى بيانات اعتماد حساب الخدمة للاتصال بمشروع Firebase من الواجهة الخلفية. في صفحة مشروعك ، انقر فوق رمز الترس بجوار نظرة عامة على المشروع لإنشاء حساب خدمة لاستخدامه مع الواجهة الخلفية السريعة لدينا. الرجوع إلى لقطة الشاشة أدناه. اتبع الخطوات من 1 إلى 4 لتنزيل ملف JSON ببيانات اعتماد حسابك. تأكد من الاحتفاظ بملف حساب الخدمة في مكان آمن.

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

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

ابدء

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

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

1. قم بتقسيم الريبو وتحقق من فرع 01-get-started Start.
2. افتح المشروع في محرر الكود الذي تختاره ولاحظ المحتويات.
3. في جذر المشروع ، لدينا مجلدين ، client/ server/ . يوجد أيضًا ملف .editorconfig و .gitignore و README.md .
4. يحتوي مجلد العميل على تطبيق React. هذا هو المكان الذي سنستمع فيه إلى الإخطارات.
5. يحتوي مجلد الخادم على تطبيق سريع. هذا هو المكان الذي سنرسل إشعارات منه. التطبيق مأخوذ من المشروع الذي أنشأناه في مقالتي الأخرى كيفية إعداد مشروع Express API Backend مع PostgreSQL.
6. افتح Terminal وانتقل إلى client/ المجلد. قم بتشغيل أمر yarn install تبعيات المشروع. ثم ابدأ تشغيل yarn start المشروع. قم بزيارة https://localhost:3000 لمشاهدة التطبيق المباشر.
7. قم بإنشاء ملف .env داخل server/ المجلد وإضافة متغير البيئة CONNECTION_STRING . هذا المتغير هو عنوان URL لاتصال قاعدة البيانات يشير إلى قاعدة بيانات PostgreSQL. إذا كنت بحاجة إلى مساعدة في هذا الأمر ، فراجع قسم Connecting The PostgreSQL Database And Writing A Model في مقالتي المرتبطة. يجب عليك أيضًا تقديم متغير بيئة PORT لأن React تعمل بالفعل على المنفذ 3000 . لقد قمت بتعيين PORT=3001 في ملف .env بي.
8. افتح محطة منفصلة وانتقل إلى server/ المجلد. قم بتشغيل أمر yarn install تبعيات المشروع. قم بتشغيل yarn runQuery لإنشاء قاعدة بيانات المشروع. قم بتشغيل بدء تشغيل yarn startdev لبدء المشروع. قم بزيارة https: // localhost: 3001 / v1 / messages وسترى بعض الرسائل بتنسيق JSON.

الآن بعد أن أصبح لدينا تطبيقاتنا الأمامية والخلفية قيد التشغيل ، فلننفذ الإشعارات في الخلفية.

إعداد رسائل مسؤول Firebase على الواجهة الخلفية

يتطلب إرسال إشعارات الدفع باستخدام FCM على الواجهة الخلفية إما SDK لمشرف Firebase أو بروتوكولات خادم FCM. سنستخدم admin SDK في هذا البرنامج التعليمي. هناك أيضًا مؤلف الإخطارات ، وهو مفيد "لاختبار وإرسال رسائل التسويق والمشاركة مع الاستهداف والتحليلات القوية المضمنة".

في الجهاز الطرفي ، انتقل إلى server/ المجلد وقم بتثبيت Admin SDK.

 # install firebase admin SDK yarn add firebase-admin

افتح ملف .env الخاص بك وأضف متغير البيئة التالي.

 GOOGLE_APPLICATION_CREDENTIALS="path-to-your-service-account-json-file"

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

تذكر ، في مشروع فعلي ، يجب عليك تخزين هذا الملف في مكان آمن للغاية على الخادم الخاص بك. لا تدع الأمر يقع في الأيدي الخطأ.

افتح server/src/settings.js وقم بتصدير مسار ملف بيانات اعتماد التطبيق.

 # export the service account key file path export const googleApplicationCredentials = process.env.GOOGLE_APPLICATION_CREDENTIALS;

قم بإنشاء server/src/firebaseInit.js وأضف الكود أدناه.

 import admin from 'firebase-admin'; import { googleApplicationCredentials } from './settings' const serviceAccount = require(googleApplicationCredentials); admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: 'your-database-url-here' }); export const messaging = admin.messaging();

نقوم باستيراد وحدة الإدارة من firebase-admin . نقوم بعد ذلك بتهيئة تطبيق المسؤول باستخدام ملف حساب الخدمة الخاص بنا. أخيرًا ، نقوم بإنشاء وتصدير ميزة المراسلة.

لاحظ أنه كان بإمكاني تمرير المسار إلى ملف مفتاح حساب الخدمة مباشرة ، لكنه الخيار الأقل أمانًا. استخدم دائمًا متغيرات البيئة عند التعامل مع المعلومات الحساسة.

للتحقق من إكمال التهيئة بنجاح ، افتح server / src / app.js وقم بتضمين الأسطر التالية.

 import { messaging } from './firebaseInit' console.log(messaging)

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

إذا واجهت أي مشاكل ، فيمكنك التحقق من فرع 02-connect-firebase-admin في الريبو الخاص بي للمقارنة.

الآن وقد نجحنا في إعداد رسائل المسؤول ، فلنكتب الآن الرمز لإرسال الإشعارات.

إرسال إشعارات الدفع من الخلفية

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

هناك تكوينات إضافية لمنصات أخرى. على سبيل المثال ، هناك إعدادات android تعمل فقط مع أجهزة android وإعدادات apns التي تعمل على أجهزة iOS فقط. يمكنك العثور على دليل التكوين هنا.

قم بإنشاء server/src/notify.js وأدخل الكود أدناه.

 import { messaging } from './firebaseInit'; export const sendNotificationToClient = (tokens, data) => { // Send a message to the devices corresponding to the provided // registration tokens. messaging .sendMulticast({ tokens, data }) .then(response => { // Response is an object of the form { responses: [] } const successes = response.responses.filter(r => r.success === true) .length; const failures = response.responses.filter(r => r.success === false) .length; console.log( 'Notifications sent:', `${successes} successful, ${failures} failed` ); }) .catch(error => { console.log('Error sending message:', error); }); };

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

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

دعنا نستخدم هذه الوظيفة لإرسال إشعار في كل مرة يتم فيها إضافة رسالة جديدة إلى قاعدة البيانات.

افتح server/src/controllers/message.js وقم بتحديث وظيفة addMessage .

 import { sendNotificationToClient } from '../notify'; export const addMessage = async (req, res) => { const { name, message } = req.body; const columns = 'name, message'; const values = `'${name}', '${message}'`; try { const data = await messagesModel.insertWithReturn(columns, values); const tokens = []; const notificationData = { title: 'New message', body: message, }; sendNotificationToClient(tokens, notificationData); res.status(200).json({ messages: data.rows }); } catch (err) { res.status(200).json({ messages: err.stack }); } };

تعالج هذه الوظيفة طلب النشر إلى نقطة نهاية /messages . بمجرد إنشاء الرسالة بنجاح ، يتم إرسال إشعار بواسطة وظيفة sendNotificationToClient متبوعة بالرد على العميل. القطعة الوحيدة المفقودة في هذا الرمز هي tokens لإرسال الإشعارات إليها.

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

مع هذا الجزء الأخير من التعليمات البرمجية ، أكملنا تنفيذ النهاية الخلفية. دعنا الآن ننتقل إلى الواجهة الأمامية.

الفرع المقابل في الريبو الخاص بي في هذه المرحلة هو 03-إرسال-إخطار.

إعداد إشعارات مراسلة Firebase على العميل

دعنا نلقي نظرة على المكونات الرئيسية لتطبيق React للواجهة الأمامية.

افتح client/src/App.js وافحص المحتوى. سأترك معظم بيانات الاستيراد وألقي نظرة على منطق البرنامج.

 # library imports import { Messaging } from './Messaging'; axios.defaults.baseURL = 'https://localhost:3001/v1'; const App = () => { return ( <Fragment> <ToastContainer autoClose={2000} position="top-center" /> <Navbar bg="primary" variant="dark"> <Navbar.Brand href="#home">Firebase notifictations with React and Express</Navbar.Brand> </Navbar> <Container className="center-column"> <Row> <Col> <Messaging /> </Col> </Row> </Container> </Fragment> ); }; export default App;

هذا هو مكون رد فعل عادي على غرار رد فعل التمهيد. يوجد عنصر نخب أعلى تطبيقنا ، والذي سنستخدمه لعرض الإخطارات. لاحظ أننا قمنا أيضًا بتعيين baseURL لمكتبة axios . كل شيء يتم ملاحظته يحدث داخل مكون <Messaging /> . دعنا الآن نلقي نظرة على محتواها.

افتح client/src/Messaging.js وافحص المحتوى.

 export const Messaging = () => { const [messages, setMessages] = React.useState([]); const [requesting, setRequesting] = React.useState(false); React.useEffect(() => { setRequesting(true); axios.get("/messages").then((resp) => { setMessages(resp.data.messages); setRequesting(false); }); }, []); return ( <Container> {/* form goes here */} <div className="message-list"> <h3>Messages</h3> {requesting ? ( <Spinner animation="border" role="status"> <span className="sr-only">Loading...</span> </Spinner> ) : ( <> {messages.map((m, index) => { const { name, message } = m; return ( <div key={index}> {name}: {message} </div> ); })} </> )} </div> </Container> ); };

لدينا متغيرين للحالة ، messages requesting . تمثل messages قائمة الرسائل من قاعدة بياناتنا requesting هو لتبديل حالة أداة التحميل الخاصة بنا. لدينا كتلة React.useEffect حيث نجري استدعاء API الخاص بنا إلى نقطة نهاية /messages وتعيين البيانات التي تم إرجاعها في حالة messages .

في بيان الإرجاع ، نربط الرسائل ونعرض name وحقول message . في نفس الصفحة ، نقوم بتضمين نموذج لإنشاء رسائل جديدة.

 <Formik initialValues={{ name: "", message: "", }} onSubmit={(values, actions) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }, 1000); }} > {(prop) => { const { handleSubmit, handleChange, isSubmitting } = prop; return ( <> <InputGroup className="mb-3"> <InputGroup.Prepend> <InputGroup.Text>Name</InputGroup.Text> </InputGroup.Prepend> <FormControl placeholder="Enter your name" onChange={handleChange("name")} /> </InputGroup> <InputGroup className="mb-3"> <InputGroup.Prepend> <InputGroup.Text>Message</InputGroup.Text> </InputGroup.Prepend> <FormControl onChange={handleChange("message")} placeholder="Enter a message" /> </InputGroup> {isSubmitting ? ( <Button variant="primary" disabled> <Spinner as="span" size="sm" role="status" animation="grow" aria-hidden="true" /> Loading... </Button> ) : ( <Button variant="primary" onClick={() => handleSubmit()}> Submit </Button> )} </> ); }} </Formik>

نحن نستخدم مكتبة Formik لإدارة النموذج الخاص بنا. نقوم بتمرير <Formik /> initialvalues onSubmit ومكون النموذج الذي نريد تقديمه. في المقابل ، نسترجع بعض الوظائف المفيدة مثل handleChange التي يمكننا استخدامها لمعالجة مدخلات النموذج الخاصة بنا والتعامل مع handleSubmit الذي نستخدمه لإرسال النموذج. isSubmitting هو boolean نستخدمه لتبديل حالة زر الإرسال.

أنا أشجعك على تجربة Formik. إنه حقا يبسط العمل مع النماذج. سنستبدل الكود في طريقة onSubmit لاحقًا.

دعنا الآن ننفذ الطريقة التي ستطلب إذن المستعرض ونخصص له رمزًا مميزًا.

لبدء استخدام Firebase في الواجهة الأمامية ، يتعين علينا تثبيت مكتبة عميل Firebase JavaScript. لاحظ أن هذه حزمة مختلفة عن حزمة firebase-admin SDK .

 # install firebase client library yarn add firebase

قم بإنشاء ملف client/src/firebaseInit.js وأضف المحتوى التالي.

 import firebase from 'firebase/app'; import 'firebase/messaging'; const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID" }; firebase.initializeApp(config); const messaging = firebase.messaging(); // next block of code goes here

تنص مستندات Firebase على ما يلي:

"يشتمل عميل Firebase JavaScript الكامل على دعم مصادقة Firebase وقاعدة بيانات Firebase Realtime و Firebase Storage و Firebase Cloud Messaging."

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

 export const requestFirebaseNotificationPermission = () => new Promise((resolve, reject) => { messaging .requestPermission() .then(() => messaging.getToken()) .then((firebaseToken) => { resolve(firebaseToken); }) .catch((err) => { reject(err); }); }); export const onMessageListener = () => new Promise((resolve) => { messaging.onMessage((payload) => { resolve(payload); }); });

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

يتم استدعاء وظيفة onMessageListener فقط عندما يكون المتصفح في المقدمة. لاحقًا ، سنكتب وظيفة منفصلة للتعامل مع الإشعار عندما يكون المتصفح في الخلفية.

افتح client/src/App.js واستورد وظيفة requestFirebaseNotificationPermission .

 import { requestFirebaseNotificationPermission } from './firebaseInit'

ثم داخل وظيفة التطبيق ، أضف الكود أدناه قبل بيان الإرجاع.

 requestFirebaseNotificationPermission() .then((firebaseToken) => { // eslint-disable-next-line no-console console.log(firebaseToken); }) .catch((err) => { return err; });

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

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

يجب أن تعلم أن متصفح Firefox (الإصدار 75) لا يطلب إذن الإخطار بشكل افتراضي. يجب أن يتم تشغيل طلب الإذن من خلال إجراء من إنشاء المستخدم مثل النقرة.

هذه نقطة جيدة بالنسبة لي لارتكاب تغييراتي. الفرع المقابل هو 04 طلب إذن.

دعنا الآن نكمل الكود لحفظ رسالة في قاعدة البيانات الخاصة بنا.

افتح client/src/Messaging.js واستبدل وظيفة onSubmit في نموذجنا بالرمز أدناه.

 onSubmit={(values, actions) => { axios .post("/messages", values) .then((resp) => { setMessages(resp.data.messages.concat(messages)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }) .catch((err) => { console.log(err); toast.error("There was an error saving the message"); }); }}

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

دعنا نجربها لنرى ما إذا كانت تعمل. ابدأ خوادم الواجهة الأمامية والخلفية. قبل تجربة طلب النشر ، افتح server/src/controllers/messages.js وقم بالتعليق على السطر الذي نرسل إليه الإشعار.

 # this line will throw an error if tokens is an empty array comment it out temporarily // sendNotificationToClient(tokens, notificationData);

حاول إضافة بعض الرسائل إلى قاعدة البيانات. يعمل؟ هذا عظيم. الآن قم بإلغاء تعليق هذا السطر قبل المتابعة.

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

 const tokens = [ 'eEa1Yr4Hknqzjxu3P1G3Ox:APA91bF_DF5aSneGdvxXeyL6BIQy8wd1f600oKE100lzqYq2zROn50wuRe9nB-wWryyJeBmiPVutYogKDV2m36PoEbKK9MOpJPyI-UXqMdYiWLEae8MiuXB4mVz9bXD0IwP7bappnLqg', ];

افتح client/src/Messaging.js ، onMessageListener وقم باستدعائه من خلال كتلة useEffect . أي موضع داخل الوظيفة جيد طالما أنه قبل بيان return .

 import { onMessageListener } from './firebaseInit'; React.useEffect(() => { ... }, []); onMessageListener() .then((payload) => { const { title, body } = payload.data; toast.info(`${title}; ${body}`); }) .catch((err) => { toast.error(JSON.stringify(err)); });

يُعيد المستمع وعدًا يحسم حمولة الإشعارات عند النجاح. ثم نعرض العنوان والجسم في نخب. لاحظ أنه كان من الممكن أن نتخذ أي إجراء آخر بمجرد تلقينا هذا الإشعار ولكني أبقي الأمور بسيطة هنا. مع تشغيل كلا الخادمين ، جربه ومعرفة ما إذا كان يعمل.

يعمل؟ هذا عظيم.

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

هناك جزء واحد فقط نحتاج إلى الاهتمام به. في الوقت الحالي ، لا يمكننا رؤية الإشعارات إلا عندما يكون المتصفح في المقدمة. الهدف من الإشعارات هو أنه يجب أن يظهر ما إذا كان المتصفح في المقدمة أم لا.

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

للتعامل مع إشعار الخلفية ، نحتاج إلى تسجيل عامل خدمة مع عميل الواجهة الأمامية لدينا.

قم بإنشاء ملف client/public/firebase-messaging-sw.js وأدخل المحتوى التالي:

 importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js'); const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID" }; firebase.initializeApp(config); const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function(payload) { console.log('[firebase-messaging-sw.js] Received background message ', payload); const notificationTitle = payload.data.title; const notificationOptions = { body: payload.data.body, icon: '/firebase-logo.png' }; return self.registration.showNotification(notificationTitle, notificationOptions); }); self.addEventListener('notificationclick', event => { console.log(event) return event; });

في الجزء العلوي من الملف ، نقوم باستيراد firebase-app firebase-messaging نظرًا لأننا نحتاج فقط إلى ميزة المراسلة. لا تقلق إذا كانت صيغة الاستيراد جديدة. إنه بناء جملة لاستيراد البرامج النصية الخارجية إلى ملفات عامل الخدمة. تأكد من أن الإصدار الذي يتم استيراده هو نفس الإصدار الموجود في package.json الخاصة بك. لقد واجهت مشكلات قمت بحلها من خلال تنسيق الإصدارات.

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

يمكننا أيضًا التحكم في ما يحدث عند النقر فوق notificationclick باستخدام معالج حدث انقر فوق الإعلام.

قم بإنشاء ملف client/src/serviceWorker.js وأدخل المحتوى أدناه.

 export const registerServiceWorker = () => { if ('serviceWorker' in navigator) { navigator.serviceWorker .register('firebase-messaging-sw.js') .then(function (registration) { // eslint-disable-next-line no-console console.log('[SW]: SCOPE: ', registration.scope); return registration.scope; }) .catch(function (err) { return err; }); } };

هذه الوظيفة تسجل ملفات عامل الخدمة لدينا. لاحظ أننا استبدلنا النسخة الأكثر تفصيلاً التي تم إنشاؤها بواسطة React. نتحقق أولاً مما إذا كان serviceWorker موجودًا في كائن navigator . هذا دعم متصفح بسيط. إذا كان المتصفح يدعم العاملين في الخدمة ، فإننا نسجل ملف عامل الخدمة الذي أنشأناه سابقًا.

افتح الآن client/src/index.js ، واستورد هذه الوظيفة ، واستدعها.

 # other imports import { registerServiceWorker } from './serviceWorker' ReactDOM.render( ... ); registerServiceWorker()

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

افتح https: // localhost: 3000 / messaging في متصفح آخر وقم بإنشاء رسالة. من المفترض أن ترى إشعارًا من المتصفح الآخر يتم عرضه.

مع ذلك ، وصلنا إلى نهاية هذا البرنامج التعليمي. الفرع المقابل في الريبو الخاص بي هو 06-handle-background-الإعلام.

خاتمة

في هذه المقالة ، تعرفنا على الأنواع المختلفة لرسائل الإشعارات التي يمكننا إرسالها باستخدام Firebase Cloud Messaging (FCM). API. ثم قمنا بتنفيذ نوع "رسالة البيانات" على الواجهة الخلفية. أخيرًا ، أنشأنا رمزًا مميزًا على تطبيق العميل استخدمناه لتلقي رسائل الإشعارات التي تم تشغيلها بواسطة تطبيق الواجهة الخلفية. أخيرًا ، تعلمنا كيفية الاستماع إلى رسائل الإشعارات وعرضها عندما يكون المتصفح في الخلفية أو في المقدمة.

أنا أشجعك على إلقاء نظرة على مستندات FCM لمعرفة المزيد.

موارد ذات الصلة

• Firebase ، الموقع الرسمي
• Fireact ، أورجي تشيدي ماثيو ، جيثب
• مدونة "Firebase: App Success Made Simple" ، مدونة npm
• وحدة تحكم Firebase
• Firebase Admin Node.js SDK ، مدونة npm
• WebpushConfig و Firebase Docs
• sendMulticast و Firebase Docs
• كتاب طبخ عامل الخدمة ، موزيلا
• إعلام ، Firebase Docs
• Firebase Cloud Messaging ، وثائق Firebase
• "كيفية إعداد مشروع Express API Backend باستخدام PostgreSQL" ، تشيدي أورجي