یک برنامه مشتری 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 را مقداردهی اولیه کنید:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

اگر در حال حاضر از FCM برای وب استفاده می کنید و می خواهید به SDK 6.7.0 یا جدیدتر ارتقا دهید، باید API ثبت FCM را برای پروژه خود در Google Cloud Console فعال کنید. وقتی API را فعال می‌کنید، مطمئن شوید که با همان حساب Google که برای Firebase استفاده می‌کنید، وارد کنسول Cloud شده‌اید و مطمئن شوید که پروژه درست را انتخاب کرده‌اید. پروژه‌های جدیدی که FCM SDK را اضافه می‌کنند، این API را به‌طور پیش‌فرض فعال کرده‌اند.

پیکربندی اعتبار وب با FCM

رابط وب FCM از اعتبارنامه‌های وب به نام «شناسایی سرور برنامه داوطلبانه» یا کلیدهای «VAPID» استفاده می‌کند تا درخواست‌های ارسال را به سرویس‌های فشار وب پشتیبانی‌شده مجاز کند. برای اشتراک برنامه خود در اعلان‌های فشاری، باید یک جفت کلید را با پروژه Firebase خود مرتبط کنید. می توانید یک جفت کلید جدید ایجاد کنید یا جفت کلید موجود خود را از طریق کنسول Firebase وارد کنید.

یک جفت کلید جدید ایجاد کنید

  1. برگه Cloud Messaging در قسمت تنظیمات کنسول Firebase را باز کنید و به بخش پیکربندی وب بروید.
  2. در برگه Web Push Certificates ، روی Generate Key Pair کلیک کنید. کنسول اعلامیه ای مبنی بر ایجاد جفت کلید نمایش می دهد و رشته کلید عمومی و تاریخ اضافه شده را نمایش می دهد.

یک جفت کلید موجود را وارد کنید

اگر یک جفت کلید موجود دارید که از قبل با برنامه وب خود استفاده می کنید، می توانید آن را به FCM وارد کنید تا بتوانید از طریق API های FCM به نمونه های برنامه وب موجود خود دسترسی پیدا کنید. برای وارد کردن کلیدها، باید در سطح مالک به پروژه Firebase دسترسی داشته باشید. کلید عمومی و خصوصی موجود خود را در قالب کدگذاری شده امن URL base64 وارد کنید:

  1. برگه Cloud Messaging در قسمت تنظیمات کنسول Firebase را باز کنید و به بخش پیکربندی وب بروید.
  2. در برگه Web Push Certificates ، متن پیوند «وارد کردن یک جفت کلید موجود» را پیدا کرده و انتخاب کنید.
  3. در گفتگوی وارد کردن جفت کلید ، کلیدهای عمومی و خصوصی خود را در فیلدهای مربوطه وارد کنید و روی واردات کلیک کنید. کنسول رشته کلید عمومی و تاریخ اضافه شدن را نمایش می دهد.

برای دستورالعمل‌هایی درباره نحوه افزودن کلید به برنامه، به پیکربندی اعتبار وب در برنامه خود مراجعه کنید. برای اطلاعات بیشتر در مورد قالب کلیدها و نحوه تولید آنها، به کلیدهای سرور برنامه مراجعه کنید.

اطلاعات کاربری وب را در برنامه خود پیکربندی کنید

متد getToken(): Promise<string> به FCM اجازه می دهد تا از اعتبار کلید VAPID هنگام ارسال درخواست های پیام به سرویس های مختلف فشار استفاده کند. با استفاده از کلیدی که طبق دستورالعمل‌های Configure Web Credentials with FCM ایجاد یا وارد کرده‌اید، آن را پس از بازیابی شیء پیام‌رسان در کد خود اضافه کنید:

// Add the public key generated from the console here.
messaging.getToken({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 version 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);
  // ...
});

Web version 8

// 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 برای وب (جاوا اسکریپت) وجود دارد: