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

প্ল্যাটফর্ম নির্বাচন করুন: iOS+ অ্যান্ড্রয়েড ওয়েব ফ্লাটার ইউনিটি C++


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

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

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

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

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

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

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

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

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

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

  1. Firebase কনসোলের সেটিংস প্যানেলের ক্লাউড মেসেজিং ট্যাবটি খুলুন এবং ওয়েব কনফিগারেশন বিভাগে যান।
  2. ওয়েব পুশ সার্টিফিকেট ট্যাবে, ‘import an existing key pair’ লিঙ্ক টেক্সটটি খুঁজুন এবং নির্বাচন করুন।
  3. 'Import a key pair' ডায়ালগ বক্সে, আপনার পাবলিক এবং প্রাইভেট কী সংশ্লিষ্ট ফিল্ডগুলিতে প্রদান করুন এবং 'Import' বোতামে ক্লিক করুন। কনসোলে পাবলিক কী স্ট্রিং এবং যুক্ত করার তারিখ প্রদর্শিত হবে।

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

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

` getToken(): Promise<string> মেথডটি FCM বিভিন্ন পুশ সার্ভিসে মেসেজ রিকোয়েস্ট পাঠানোর সময় VAPID কী ক্রেডেনশিয়াল ব্যবহার করার সুযোগ দেয়। `Configure Web Credentials with 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

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

একটি পরীক্ষার বিজ্ঞপ্তি বার্তা পাঠান

  1. টার্গেট ডিভাইসে অ্যাপটি ইনস্টল করে চালান। অ্যাপল ডিভাইসের ক্ষেত্রে, রিমোট নোটিফিকেশন পাওয়ার জন্য আপনাকে অনুমতির অনুরোধটি গ্রহণ করতে হবে।
  2. অ্যাপটি ডিভাইসে ব্যাকগ্রাউন্ডে চালু আছে কিনা তা যাচাই করুন।
  3. Firebase কনসোলে, মেসেজিং পেজটি খুলুন।
  4. এটি আপনার প্রথম বার্তা হলে, ‘আপনার প্রথম প্রচারাভিযান তৈরি করুন’ নির্বাচন করুন।
    1. Firebase নোটিফিকেশন বার্তাগুলি নির্বাচন করুন এবং তৈরি করুন নির্বাচন করুন।
  5. অন্যথায়, Campaigns ট্যাবে, New campaign নির্বাচন করুন এবং তারপর Notifications নির্বাচন করুন।
  6. বার্তার লেখাটি লিখুন।
  7. ডান দিকের প্যানেল থেকে ‘Send test message’ নির্বাচন করুন।
  8. ‘Add an FCM registration token’ লেবেলযুক্ত ফিল্ডে আপনার রেজিস্ট্রেশন টোকেনটি প্রবেশ করান।
  9. পরীক্ষা নির্বাচন করুন।

আপনি ‘টেস্ট’ নির্বাচন করার পর, ব্যাকগ্রাউন্ডে অ্যাপটি চালু থাকা অবস্থায় নির্দিষ্ট ক্লায়েন্ট ডিভাইসটিতে নোটিফিকেশনটি চলে আসবে।

পরবর্তী পদক্ষেপ

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