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

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

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

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

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

إذا كنت لم تقم بذلك بالفعل، إضافة إلى مشروع Firebase جافا سكريبت .

إذا كنت تستخدم حاليا FCM لشبكة الإنترنت وترغب في الترقية إلى SDK 6.7.0 أو في وقت لاحق، يجب تمكين API التسجيل FCM للمشروع الخاص بك في وحدة التحكم سحابة جوجل. عند تمكين واجهة برمجة التطبيقات ، تأكد من تسجيل الدخول إلى Cloud Console بنفس حساب Google الذي تستخدمه لـ Firebase ، وتأكد من تحديد المشروع الصحيح. تم تمكين واجهة برمجة التطبيقات هذه بشكل افتراضي في المشروعات الجديدة التي تضيف FCM SDK.

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

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

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

  1. فتح الغيمة التراسل علامة التبويب الجزء Firebase إعدادات وحدة التحكم ثم انتقل إلى قسم التكوين الويب.
  2. في علامة التبويب شهادات دفع ويب، انقر فوق إنشاء زوج المفاتيح. تعرض وحدة التحكم إشعارًا بإنشاء زوج المفاتيح ، وتعرض سلسلة المفتاح العام وتاريخ الإضافة.

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

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

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

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

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

الويب v8

const messaging = firebase.messaging();

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

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

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

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

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

الويب 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):