ওয়েব অ্যাপে ফায়ারবেস ক্লাউড মেসেজিং দিয়ে শুরু করুন

এই নির্দেশিকায় বর্ণনা করা হয়েছে কীভাবে আপনার ওয়েব ক্লায়েন্ট অ্যাপে Firebase Cloud Messaging শুরু করবেন, যাতে আপনি নির্ভরযোগ্যভাবে বার্তা পাঠাতে পারেন।

FCM জাভাস্ক্রিপ্ট এপিআই আপনাকে পুশ এপিআই সমর্থনকারী ব্রাউজারে চলমান ওয়েব অ্যাপে নোটিফিকেশন বার্তা গ্রহণ করার সুযোগ দেয়। এর মধ্যে এই সাপোর্ট ম্যাট্রিক্সে তালিকাভুক্ত ব্রাউজার সংস্করণ এবং পুশ এপিআই ব্যবহারকারী ক্রোম এক্সটেনশনগুলো অন্তর্ভুক্ত।

FCM SDK শুধুমাত্র HTTPS-এর মাধ্যমে পরিবেশিত পেজগুলিতেই সমর্থিত। এর কারণ হলো এটি সার্ভিস ওয়ার্কার ব্যবহার করে, যা কেবল HTTPS সাইটেই পাওয়া যায়। আপনার যদি কোনো প্রোভাইডারের প্রয়োজন হয়, Firebase App Hosting সুপারিশ করা হয় এবং এটি আপনার নিজের ডোমেইনে HTTPS হোস্টিংয়ের জন্য একটি বিনামূল্যের স্তর প্রদান করে।

FCM জাভাস্ক্রিপ্ট API ব্যবহার শুরু করতে, আপনাকে আপনার ওয়েব অ্যাপে Firebase যোগ করতে হবে এবং Firebase ইনস্টলেশন আইডি অ্যাক্সেস করার জন্য লজিক যুক্ত করতে হবে, যা আপনাকে আপনার নোটিফিকেশনের জন্য প্রাপক নির্ধারণ করতে দেয়।

FCM SDK যোগ করুন এবং প্রারম্ভিকীকরণ করুন

1. যদি আগে থেকে না করে থাকেন, তাহলে Firebase JS SDK ইনস্টল করুন এবং Firebase চালু করুন ।

2. Firebase Cloud Messaging JS SDK যোগ করুন এবং Firebase Cloud Messaging চালু করুন:

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

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

FCM দিয়ে ওয়েব ক্রেডেনশিয়াল কনফিগার করুন

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

একটি নতুন কী পেয়ার তৈরি করুন

1. Firebase কনসোলে, এখানে যান settings > সাধারণ-এ যান । তারপর, ক্লাউড মেসেজিং ট্যাবে ক্লিক করুন ।

2. ওয়েব কনফিগারেশন বিভাগে যান।

3. ওয়েব পুশ সার্টিফিকেট ট্যাবে, জেনারেট কী পেয়ার (Generate Key Pair ) এ ক্লিক করুন।

   কনসোলে কী পেয়ারটি তৈরি হওয়ার একটি বিজ্ঞপ্তি প্রদর্শিত হয় এবং এতে পাবলিক কী স্ট্রিং ও যুক্ত করার তারিখও দেখানো হয়।

বিদ্যমান কী পেয়ার ইম্পোর্ট করুন

আপনার ওয়েব অ্যাপে যদি আগে থেকেই ব্যবহৃত কোনো কী পেয়ার থাকে, তবে আপনি সেটি FCM এ ইম্পোর্ট করতে পারেন, যাতে আপনি FCM API-এর মাধ্যমে আপনার বিদ্যমান ওয়েব অ্যাপ ইনস্ট্যান্সগুলো অ্যাক্সেস করতে পারেন। কী ইম্পোর্ট করার জন্য, আপনার ফায়ারবেস প্রজেক্টে মালিক-স্তরের অ্যাক্সেস থাকতে হবে। আপনার বিদ্যমান পাবলিক এবং প্রাইভেট কী base64 URL সেফ এনকোডেড ফর্মে ইম্পোর্ট করুন:

1. Firebase কনসোলে, এখানে যান settings > সাধারণ-এ যান । তারপর, ক্লাউড মেসেজিং ট্যাবে ক্লিক করুন ।

2. ওয়েব কনফিগারেশন বিভাগে যান।

3. ওয়েব পুশ সার্টিফিকেট ট্যাবে, ‘import an existing key pair’ লিঙ্ক টেক্সটটি খুঁজুন এবং নির্বাচন করুন।

4. 'Import a key pair' ডায়ালগ বক্সে, আপনার পাবলিক এবং প্রাইভেট কীগুলো সংশ্লিষ্ট ফিল্ডে প্রদান করুন এবং 'Import' বোতামে ক্লিক করুন।

   কনসোলে পাবলিক কী স্ট্রিং এবং যুক্ত করার তারিখ প্রদর্শিত হয়।

আপনার অ্যাপে কী (key) যোগ করার নির্দেশাবলীর জন্য, আপনার অ্যাপে ওয়েব ক্রেডেনশিয়াল কনফিগার করুন (Configure Web credentials in your app) দেখুন। কী-গুলির ফরম্যাট এবং সেগুলি কীভাবে তৈরি করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, অ্যাপ্লিকেশন সার্ভার কী (Application server keys) দেখুন।

আপনার অ্যাপে ওয়েব ক্রেডেনশিয়াল কনফিগার করুন

` register(): Promise<void> মেথডটি FCM বিভিন্ন পুশ সার্ভিসে মেসেজ রিকোয়েস্ট পাঠানোর সময় VAPID কী ক্রেডেনশিয়াল ব্যবহার করার অনুমতি দেয়। `Configure Web Credentials with FCM এর নির্দেশাবলী অনুসারে আপনার তৈরি বা ইম্পোর্ট করা কী-টি ব্যবহার করে, মেসেজিং অবজেক্টটি পুনরুদ্ধার করার পরে আপনার কোডে এটি যোগ করুন:

import { getMessaging, register } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the Firebase console here.
register(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
    }
  });
}

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

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

// 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