كيفية إضافة إشعارات الدفع إلى تطبيق ويب باستخدام Firebase +

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

اليوم ، سأعرض لك الخطوات المطلوبة ، بالتفصيل ، لتحقيق هذه الوظيفة في تطبيق الويب الخاص بك باستخدام Firebase.

الإخطارات مع Firebase

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

لإرسال الإشعارات ، سنستخدم الخدمة المسماة Cloud Messaging ، والتي تتيح لنا إرسال رسائل إلى أي جهاز يستخدم طلبات HTTP.

إعداد مشروع

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

بالنسبة لهذا الإعداد التوضيحي ، سأستخدم مشروعًا بسيطًا تم إنشاؤه باستخدام التطبيق create-react-app ، لكن يمكنك استخدام نفس الكود في أي مكان آخر يستخدم JavaScript.

بالإضافة إلى ذلك ، نحتاج إلى إضافة مكتبة Firebase إلى المشروع.

npm تثبيت firebase - حفظ

لذلك دعونا نحصل على الترميز!

الآن وبعد أن انتهينا من إعدادنا ، يمكننا البدء في ترميز الوحدة التي ستكون مسؤولة عن الإشعارات.

لنقم بإنشاء ملف داخل دليل المشروع يُطلق عليه push-notice.js.

داخل الملف ، لنقم بإنشاء وظيفة تهيئ Firebase وتمرير مفاتيح مشروعك.

استيراد firebase من 'firebase' ؛
تصدير const initializeFirebase = () => {
  firebase.initializeApp ({
    messagingSenderId: "your messagingSenderId"
  })؛
}

حسنًا ، الآن بعد أن أصبح لدينا الوظيفة التي نحتاجها نسميها.

داخل نقطة دخول مشروعك ، قم باستيراد الوظيفة واتصل بها.

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من 'react-dom' ؛
استيراد التطبيق من "./App" ؛
استيراد {initializeFirebase} من './push-notification' ؛
ReactDOM.render (، document.getElementById ('root'))؛
initializeFirebase ()؛
يمكنك العثور على مفاتيح مشروعك داخل Firebase Console.
الحصول على المفاتيح

عمال الخدمة

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

لاستلام حدث onMessage ، يحتاج تطبيقك إلى عامل خدمة. بشكل افتراضي ، عند بدء تشغيل Firebase ، فإنه يبحث عن ملف يسمى firebase-messaging-sw.js.

ولكن إذا كان لديك بالفعل واحدة وتريد الاستفادة منه لتلقي الإخطارات ، يمكنك تحديد أثناء بدء تشغيل Firebase أي عامل خدمة سيستخدمه. فمثلا:

تصدير const inicializarFirebase = () => {
  firebase.initializeApp ({
    messagingSenderId: 'your messagingSenderId'
  })؛
navigator.serviceWorker
    .register ( '/ بلدي sw.js')
    .then ((تسجيل) => {
      firebase.messaging () useServiceWorker (تسجيل)؛
    })؛
}

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

نحتاج إلى إضافة firebase-messaging-sw.js إلى الموقع الذي يتم فيه عرض ملفاتك. أثناء استخدام تطبيق create-react-app ، سأقوم بإضافته داخل المجلد العمومي بالمحتوى التالي:

importScripts ( 'https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js')؛
importScripts ( 'https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js')؛
firebase.initializeApp ({
    messagingSenderId: "برنامج messagingSenderId مرة أخرى"
})؛
const messaging = firebase.messaging ()؛

طلب إذن لإرسال الإخطارات

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

بادئ ذي بدء ، دعونا ننشئ الوظيفة التي ستقدم الطلب وتعيد الرمز المميز للمستخدم.

داخل ملف push-notice.js الخاص بنا ، أضف الوظيفة:

تصدير const askForPermissioToReceiveNotifications = async () => {
  محاولة {
    const messaging = firebase.messaging ()؛
    في انتظار messaging.requestPermission () ؛
    الرمز المميز const = await messaging.getToken ()؛
    console.log ('token do usuário:'، token)؛
    
    رمز الإرجاع ؛
  } catch (خطأ) {
    console.error (خطأ)؛
  }
}

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

استيراد رد من "رد فعل" ؛
استيراد {askForPermissioToReceiveNotifications} من './push-notification'؛
const NotificationButton = () => (
    
تصدير الافتراضي NotificationButton؛

حسنًا ، دعنا نرى أنها تعمل:

إرسال الإخطارات

لإرسال الإشعار ، نحتاج إلى تقديم طلب إلى Firebase API لإعلامه بالرمز الذي سيحصل عليه المستخدم.

في الأمثلة أدناه ، أستخدم Postman ، لكن يمكنك القيام بذلك من أي عميل REST آخر.

في الأساس ، نحتاج إلى تقديم طلب POST إلى https://fcm.googleapis.com/fcm/send بإرسال JSON في نص الطلب.

يوجد أدناه هيكل JSON الذي سيتم إرساله:

{
    "تنبيه": {
        "العنوان": "Firebase" ،
        "الجسم": "Firebase رائع" ،
        "click_action": "http: // localhost: 3000 /" ،
        "رمز": "http: //url-to-an-icon/icon.png"
    }،
    "إلى": "رمز المستخدم"
}

في رأس الطلب ، نحتاج إلى تمرير مفتاح الخادم لمشروعنا في Firebase ونوع المحتوى:

نوع المحتوى: application / json
التخويل: مفتاح = SERVER_KEY
تم العثور على مفتاح الخادم في إعدادات المشروع في Firebase Console ضمن علامة التبويب Cloud Messaging.

الإخطارات في العمل

تذكر أن الإشعارات لن تظهر إلا عند تصغير التطبيق الخاص بك أو في الخلفية.

هذه هي الطريقة التي نرسل بها إشعارًا مباشرًا إلى الجهاز.

إرسال الإشعارات إلى مجموعة من المستخدمين

حسنًا ، الآن بعد أن رأينا كيفية إرسال إشعار إلى مستخدم واحد ، كيف يمكننا إرسال إشعار إلى عدة مستخدمين في وقت واحد؟

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

كيف نفعل ذلك

سنرسل أساسًا طلب POST إلى العنوان https://iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME ، مع تمرير اسم الموضوع والرمز المميز في عنوان URL.

لا تنسَ أن تمر في نفس التفويض الذي استخدمناه لإرسال الإشعار.

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

انظر المثال أدناه:

{
    "تنبيه": {
        "العنوان": "Firebase" ،
        "النص الأساسي": "رسالة موضوع Firebase" ،
        "click_action": "http: // localhost: 3000 /" ،
        "رمز": "http: // localhost: 3000 / icon.png"
    }،
    "إلى": "/ المواضيع / TOPIC_NAME"
}

خاتمة

شكرا لقراءة هذا! أتمنى أن تفهم الآن كيفية استخدام إعلامات الدفع. يمكن العثور على المستودع الذي يحتوي على رمز العرض التوضيحي هنا.

للحصول على إعلامات بمشاركاتي المستقبلية ، اتبعني على GitHub أو Twitter.