Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

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

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

أضف Firebase إلى مشروع JavaScript الخاص بك

أضف Firebase إلى مشروع JavaScript ، إذا لم تكن قد قمت بذلك بالفعل.

إذا كنت تستخدم حاليًا 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 الأساسي 64:

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

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

استرداد كائن الرسائل

الويب v8

const messaging = firebase.messaging();

الويب الإصدار 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

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

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

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

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

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

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

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

الويب v8

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

الويب الإصدار 9

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

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

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

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