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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الطريقة getToken(): Promise<string> السماح لخدمة FCM باستخدام بيانات اعتماد مفتاح 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. بهذا الاسم ووضعه في جذر النطاق قبل استرداد الرمز. ويمكنك إضافة محتوى مفيد إلى الملف لاحقًا في عملية إعداد البرنامج.

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

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

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

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

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