یک برنامه مشتری 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

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

اگر در حال حاضر از 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 هنگام ارسال درخواست پیام به سرویس های مختلف فشار استفاده کند. با استفاده از کلیدی که طبق دستورالعمل پیکربندی اعتبارنامه وب با 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

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

پس از دریافت رمز، آن را به سرور برنامه خود ارسال کنید و با استفاده از روش دلخواه خود آن را ذخیره کنید.

مراحل بعدی

پس از تکمیل مراحل راه اندازی، در اینجا چند گزینه برای حرکت رو به جلو با FCM برای وب (جاوا اسکریپت) وجود دارد: