ওয়েব অ্যাপে 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 ওয়েব ইন্টারফেস, Voluntary Application Server Identification বা 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. A 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)-এর সাথে এগিয়ে যাওয়ার জন্য কয়েকটি বিকল্প দেওয়া হল: