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

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

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

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

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

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

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

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

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

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

Web modular API

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);
  // ...
});

Web namespaced API

// 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);
  // ...
});

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

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

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