ওয়েব অ্যাপে Firebase Cloud Messaging ব্যবহার শুরু করা

প্ল্যাটফর্ম বেছে নিন: iOS+ Android ওয়েব Flutter Unity C++


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

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

FCM SDK শুধুমাত্র HTTPS-এর মাধ্যমে পরিবেশিত পৃষ্ঠায় কাজ করে। এটি পরিষেবা কর্মী ব্যবহার করার কারণে হয়, যা শুধুমাত্র HTTPS সাইটে উপলভ্য। আপনার কোনও পরিষেবা প্রদানকারীর প্রয়োজন হলে, Firebase App Hosting-এর সাজেশন দেওয়া হয় এবং এটি আপনার নিজস্ব ডোমেনে HTTPS হোস্টিংয়ের জন্য কোনও খরচ ছাড়াই টিয়ার প্রদান করে।

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

FCM-এর মাধ্যমে ওয়েব ক্রেডেনশিয়াল কনফিগার করুন

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

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

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

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

  3. ওয়েব পুশ সার্টিফিকেট ট্যাবে, কী পেয়ার তৈরি করুন বিকল্পে ক্লিক করুন।

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

আগে থেকে থাকা কী পেয়ার ইমপোর্ট করুন

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

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

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

  3. ওয়েব পুশ সার্টিফিকেট ট্যাবে, লিঙ্ক টেক্সট খুঁজে নিয়ে বেছে নিন: আগে থেকে থাকা কী পেয়ার ইমপোর্ট করুন।

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

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

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

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

register(): Promise<void> পদ্ধতিটি FCM-কে বিভিন্ন পুশ পরিষেবায় মেসেজ পাঠানোর অনুরোধ করার সময় VAPID কী ক্রেডেনশিয়াল ব্যবহার করার অনুমতি দেয়। 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"});

বিজ্ঞপ্তির অনুমতি দেওয়ার অনুরোধ করা এবং পরিষেবা কর্মী কনফিগার করা

FCM-এর মাধ্যমে কোনও অ্যাপ ইনস্ট্যান্সকে টার্গেট করার প্রয়োজন হলে, প্রথমে 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 ফাইল না থাকলে, সেই নামে একটি খালি ফাইল তৈরি করুন এবং রেজিস্টার করার আগে আপনার ডোমেনের রুটে এটি রাখুন। আপনি পরে ক্লায়েন্ট সেট-আপ প্রসেসে ফাইলে অর্থপূর্ণ কন্টেন্ট যোগ করতে পারবেন।

Firebase ইনস্টলেশন আইডি অ্যাক্সেস করা

সেগমেন্ট বা টার্গেট করতে, Firebase ইনস্টলেশন আইডি (FID) ব্যবহার করার জন্য আমরা সাজেস্ট করি।

অ্যাপ ইনস্ট্যান্স রেজিস্টার করতে এবং মেসেজ টার্গেট করার জন্য Firebase ইনস্টলেশন আইডি (FID) উদ্ধার করতে: 

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

তিনটি পরিস্থিতিতে onRegistered কলব্যাক ট্রিগার করা হয়:

  1. প্রতিবার কোনও ম্যানুয়াল register() কল শেষ হলে।
  2. Firebase ইনস্টলেশন আইডিতে পরিবর্তন শনাক্ত করা হয়েছে।
  3. একটি pushsubscriptionchange ইভেন্ট ফায়ার করা হয়েছে।

Firebase ইনস্টলেশন আইডি পাওয়ার পরে, আপনার অ্যাপ সার্ভারে এটি পাঠান এবং আপনার পছন্দের পদ্ধতি ব্যবহার করে এটি সেভ করুন।

রেজিস্ট্রেশন টোকেন অ্যাক্সেস করা (সিস্টেমটি আর ব্যবহার করা হয় না)

বর্তমান টোকেন ফিরিয়ে আনতে:

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);
  // ...
});

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);
  // ...
});

টোকেন পাওয়ার পরে, আপনার অ্যাপ সার্ভারে এটি পাঠান এবং আপনার পছন্দের পদ্ধতি ব্যবহার করে এটি স্টোর করুন।

একটি টেস্ট বিজ্ঞপ্তি মেসেজ পাঠান

  1. টার্গেট ডিভাইসে অ্যাপ ইনস্টল ও রান করুন। Apple ডিভাইসে, রিমোট বিজ্ঞপ্তি পাওয়ার জন্য আপনাকে অনুমতির অনুরোধ গ্রহণ করতে হবে।

  2. ডিভাইসে অ্যাপ ব্যাকগ্রাউন্ডে চলছে কিনা তা চেক করুন।

  3. Firebase কনসোলে, DevOps ও এনগেজমেন্ট > মেসেজিং বিকল্পে যান

  4. ক্যাম্পেন তৈরি করুন।

    • এটি আপনার প্রথম মেসেজ হলে:

      1. আপনার প্রথম ক্যাম্পেন তৈরি করুন বিকল্প বেছে নিন।

      2. Firebase বিজ্ঞপ্তি মেসেজ বেছে নিয়ে তৈরি করুন বিকল্প বেছে নিন।

    • আপনি আগে ক্যাম্পেন তৈরি করে থাকলে:

      1. ক্যাম্পেন ট্যাবে গিয়ে নতুন ক্যাম্পেন বিকল্প বেছে নিন।

      2. বিজ্ঞপ্তি বিকল্পে ক্লিক করুন।

  5. মেসেজের টেক্সট লিখুন।

  6. ডানদিকের প্যানেল থেকে টেস্ট মেসেজ পাঠান বিকল্প বেছে নিন।

  7. FCM রেজিস্ট্রেশন টোকেন যোগ করুন লেবেলযুক্ত ফিল্ডে আপনার রেজিস্ট্রেশন টোকেন লিখুন।

  8. পরীক্ষা করুন বিকল্প বেছে নিন।

পরীক্ষা করুন বিকল্প বেছে নেওয়ার পরে, টার্গেট করা ক্লায়েন্ট ডিভাইসে ব্যাকগ্রাউন্ডে অ্যাপ সহ বিজ্ঞপ্তি পাওয়া উচিত।

পরবর্তী ধাপ

সেট-আপের ধাপগুলি সম্পূর্ণ করার পরে, FCM for Web (JavaScript) নিয়ে এগিয়ে যাওয়ার জন্য এখানে কয়েকটি বিকল্প দেওয়া হল: