قم بإعداد تطبيق عميل JavaScript Firebase Cloud Messaging

تتيح لك FCM JavaScript API تلقي رسائل إعلام في تطبيقات الويب التي تعمل في المتصفحات التي تدعم Push API . يتضمن ذلك إصدارات المستعرض المدرجة في مصفوفة الدعم هذه وإضافات Chrome عبر واجهة برمجة تطبيقات Push.

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

لبدء استخدام FCM JavaScript API ، ستحتاج إلى إضافة Firebase إلى تطبيق الويب الخاص بك وإضافة منطق للوصول إلى الرموز المميزة للتسجيل.

إضافة وتهيئة FCM SDK

1. إذا لم تكن قد قمت بذلك بالفعل ، فثبّت Firebase JS SDK وقم بتهيئة Firebase .

2. أضف Firebase Cloud Messaging JS SDK وقم بتهيئة Firebase Cloud Messaging:

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

إذا كنت تستخدم حاليًا FCM للويب وترغب في الترقية إلى SDK 6.7.0 أو أحدث ، فيجب عليك تمكين واجهة برمجة تطبيقات تسجيل FCM لمشروعك في وحدة تحكم Google Cloud. عند تمكين API ، تأكد من تسجيل الدخول إلى Cloud Console بنفس حساب Google الذي تستخدمه لـ Firebase ، وتأكد من تحديد المشروع الصحيح. تم تمكين واجهة برمجة التطبيقات هذه بشكل افتراضي في المشروعات الجديدة التي تضيف FCM SDK.

تكوين بيانات اعتماد الويب باستخدام FCM

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

قم بإنشاء زوج مفاتيح جديد

1. افتح علامة التبويب Cloud Messaging في جزء إعدادات وحدة تحكم Firebase وانتقل إلى قسم تكوين الويب .
2. في علامة تبويب شهادات Web Push ، انقر فوق إنشاء زوج مفاتيح . تعرض وحدة التحكم إشعارًا بإنشاء زوج المفاتيح ، وتعرض سلسلة المفتاح العام وتاريخ الإضافة.

استيراد زوج مفاتيح موجود

إذا كان لديك زوج مفاتيح موجود تستخدمه بالفعل مع تطبيق الويب الخاص بك ، فيمكنك استيراده إلى FCM حتى تتمكن من الوصول إلى مثيلات تطبيق الويب الحالية من خلال واجهات برمجة تطبيقات FCM. لاستيراد المفاتيح ، يجب أن يكون لديك وصول على مستوى المالك إلى مشروع Firebase. قم باستيراد مفتاحك الحالي العام والخاص في نموذج تشفير آمن لعنوان URL الخاص بـ base64:

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

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

تكوين بيانات اعتماد الويب في التطبيق الخاص بك

أسلوب getToken(): Promise<string> يسمح لـ FCM باستخدام بيانات اعتماد مفتاح VAPID عند إرسال طلبات الرسائل إلى خدمات دفع مختلفة. باستخدام المفتاح الذي قمت بإنشائه أو استيراده وفقًا للإرشادات الواردة في تكوين بيانات اعتماد الويب باستخدام FCM ، قم بإضافته في التعليمات البرمجية الخاصة بك بعد استرداد كائن المراسلة:

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

الوصول إلى رمز التسجيل

عندما تحتاج إلى استرداد رمز التسجيل المميز الحالي لمثيل تطبيق ، اطلب أولاً أذونات الإعلام من المستخدم باستخدام Notification.requestPermission() . عندما يتم استدعاؤه كما هو موضح ، يعيد هذا رمزًا مميزًا إذا تم منح الإذن أو رفض الوعد إذا تم رفضه:

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

تتطلب FCM ملف firebase-messaging-sw.js . ما لم يكن لديك بالفعل ملف firebase-messaging-sw.js ، فقم بإنشاء ملف فارغ بهذا الاسم وضعه في جذر المجال الخاص بك قبل استرداد الرمز المميز. يمكنك إضافة محتوى ذي معنى إلى الملف لاحقًا في عملية إعداد العميل.

لاسترداد الرمز المميز الحالي:

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

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

الخطوات التالية

بعد الانتهاء من خطوات الإعداد ، فيما يلي بعض الخيارات للمضي قدمًا في استخدام FCM للويب (JavaScript):

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