إعداد تطبيق عميل "المراسلة عبر السحابة الإلكترونية من Firebase"

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

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

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

إضافة حزمة تطوير البرامج (SDK) لمنصّة FCM وإعدادها

  1. إذا لم تكن قد قمت بذلك بالفعل، تثبيت حزمة تطوير البرامج (SDK) لـ Firebase JS وإعداد Firebase

  2. أضِف حزمة تطوير البرامج (SDK) JavaScript Firebase Cloud Messaging وإعداد Firebase Cloud Messaging:

Web 

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);

Web 

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 أو أحدث، يجب تمكين واجهة برمجة تطبيقات التسجيل في "المراسلة عبر السحابة الإلكترونية من Firebase" لمشروعك في Google Cloud Console. عند تفعيل واجهة برمجة التطبيقات، تأكد من تسجيل الدخول إلى Cloud Console باستخدام حساب Google نفسه الذي تستخدمه Firebase، واحرص على اختيار المشروع الصحيح. مشروعات جديدة تضيف تحتوي حزمة تطوير البرامج (SDK) FCM على واجهة برمجة التطبيقات هذه مفعَّلة تلقائيًا.

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

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

إنشاء مفتاحَي تشفير جديدَين

  1. افتح علامة تبويب "المراسلة عبر السحابة الإلكترونية" في وحدة تحكم Firebase الإعدادات انتقِل إلى القسم ضبط الويب.
  2. في علامة التبويب شهادات Web Push، انقر على إنشاء مفتاحَي تشفير. تعرِضconsoleإشعارًا بأنّه تم إنشاء مفتاحَي التشفير، كما تعرِضسلسلة المفتاح العام وتاريخ الإضافة.

استيراد مفتاحَي تشفير حاليَين

إذا كان لديك مفتاحا تشفير حاليان تستخدمهما حاليًا مع تطبيق الويب، عليك يمكنك استيراده إلى FCM لتتمكن من الوصول إلى تطبيق الويب الحالي. من خلال واجهات برمجة تطبيقات FCM. لاستيراد المفاتيح، يجب أن يكون لديك إذن بالوصول على مستوى المالك إلى مشروع Firebase. استورِد المفتاحَين العام والخاص الحاليَين بتنسيق base64URL المشفّر الآمن:

  1. افتح علامة تبويب "المراسلة عبر السحابة الإلكترونية" في وحدة تحكم 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، أنشئ ملفًا فارغًا بهذا الاسم وضعه في جذر نطاقك قبل استرداد رمز مميّز. يمكنك إضافة محتوى ذي مغزى إلى الملف لاحقًا في عملية إعداد العميل.

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

Web

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

Web

// 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):