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

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

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

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

إضافة حزمة تطوير البرامج لخدمة "المراسلة عبر السحابة الإلكترونية من Firebase" وإعدادها

1. ثبِّت حزمة تطوير البرامج (SDK) لـ Firebase JS وابدأ في تهيئة Firebase، إذا لم يسبق لك إجراء ذلك.

2. أضِف حزمة تطوير البرامج (SDK) الخاصة بخدمة "المراسلة عبر السحابة الإلكترونية من Firebase" لـ JS وإعداد خدمة "المراسلة عبر السحابة الإلكترونية من Firebase":

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

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

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

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

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

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

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

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

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

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

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

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

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

تتطلب خدمة "المراسلة عبر السحابة الإلكترونية من Firebase" ملف 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

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

الخطوات اللاحقة

بعد الانتهاء من خطوات الإعداد، إليك بعض الخيارات للمتابعة باستخدام "المراسلة عبر السحابة الإلكترونية من Firebase" للويب (JavaScript):

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