একটি JavaScript Firebase ক্লাউড মেসেজিং ক্লায়েন্ট অ্যাপ সেট আপ করুন

FCM JavaScript API আপনাকে Push API সমর্থন করে এমন ব্রাউজারে চলমান ওয়েব অ্যাপে বিজ্ঞপ্তি বার্তা পেতে দেয়। এতে এই সমর্থন ম্যাট্রিক্সে তালিকাভুক্ত ব্রাউজার সংস্করণ এবং Push API-এর মাধ্যমে Chrome এক্সটেনশন অন্তর্ভুক্ত রয়েছে।

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 বা তার পরে আপগ্রেড করতে চান, তাহলে আপনাকে Google Cloud Console-এ আপনার প্রোজেক্টের জন্য FCM রেজিস্ট্রেশন API সক্ষম করতে হবে। আপনি যখন API সক্ষম করবেন, নিশ্চিত করুন যে আপনি Firebase-এর জন্য ব্যবহার করেন সেই একই Google অ্যাকাউন্ট দিয়ে আপনি Cloud Console-এ লগ ইন করেছেন এবং সঠিক প্রজেক্ট নির্বাচন করতে ভুলবেন না। FCM SDK যুক্ত করা নতুন প্রকল্পগুলিতে ডিফল্টরূপে এই API সক্ষম করা থাকে৷

FCM দিয়ে ওয়েব শংসাপত্র কনফিগার করুন

FCM ওয়েব ইন্টারফেস সমর্থিত ওয়েব পুশ পরিষেবাগুলিতে অনুরোধ পাঠানোর অনুমোদনের জন্য "স্বেচ্ছাসেবী অ্যাপ্লিকেশন সার্ভার আইডেন্টিফিকেশন" বা "VAPID" কী নামক ওয়েব শংসাপত্র ব্যবহার করে। বিজ্ঞপ্তিগুলি পুশ করতে আপনার অ্যাপটি সদস্যতা নিতে, আপনাকে আপনার Firebase প্রকল্পের সাথে এক জোড়া কী সংযুক্ত করতে হবে৷ আপনি হয় একটি নতুন কী জোড়া তৈরি করতে পারেন বা Firebase কনসোলের মাধ্যমে আপনার বিদ্যমান কী জোড়া আমদানি করতে পারেন।

একটি নতুন কী জোড়া তৈরি করুন

  1. Firebase কনসোল সেটিংস ফলকের ক্লাউড মেসেজিং ট্যাবটি খুলুন এবং ওয়েব কনফিগারেশন বিভাগে স্ক্রোল করুন।
  2. ওয়েব পুশ সার্টিফিকেট ট্যাবে, কী জোড়া তৈরি করুন ক্লিক করুন। কনসোল একটি নোটিশ প্রদর্শন করে যে কী জোড়া তৈরি করা হয়েছে এবং সর্বজনীন কী স্ট্রিং এবং তারিখ যোগ করা হয়েছে তা প্রদর্শন করে।

একটি বিদ্যমান কী জোড়া আমদানি করুন

আপনার যদি একটি বিদ্যমান কী জোড়া থাকে যা আপনি ইতিমধ্যেই আপনার ওয়েব অ্যাপের সাথে ব্যবহার করছেন, আপনি এটি FCM এ আমদানি করতে পারেন যাতে আপনি FCM API-এর মাধ্যমে আপনার বিদ্যমান ওয়েব অ্যাপের দৃষ্টান্তগুলিতে পৌঁছাতে পারেন। কী আমদানি করতে, আপনার Firebase প্রকল্পে মালিক-স্তরের অ্যাক্সেস থাকতে হবে। বেস64 ইউআরএল নিরাপদ এনকোডেড আকারে আপনার বিদ্যমান সর্বজনীন এবং ব্যক্তিগত কী আমদানি করুন:

  1. Firebase কনসোল সেটিংস ফলকের ক্লাউড মেসেজিং ট্যাবটি খুলুন এবং ওয়েব কনফিগারেশন বিভাগে স্ক্রোল করুন।
  2. ওয়েব পুশ সার্টিফিকেট ট্যাবে, লিঙ্ক টেক্সট খুঁজুন এবং নির্বাচন করুন, "একটি বিদ্যমান কী জোড়া আমদানি করুন।"
  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 (জাভাস্ক্রিপ্ট) এর সাথে এগিয়ে যাওয়ার জন্য এখানে কয়েকটি বিকল্প রয়েছে: