জাভাস্ক্রিপ্ট ক্লায়েন্টে বার্তা গ্রহণ করুন

পৃষ্ঠাটি অগ্রভাগে (ফোকাস আছে), বা ব্যাকগ্রাউন্ডে, অন্যান্য ট্যাবের পিছনে লুকানো বা সম্পূর্ণরূপে বন্ধ আছে কিনা তার উপর নির্ভর করে বার্তাগুলির আচরণ ভিন্ন হয়৷ সমস্ত ক্ষেত্রে পৃষ্ঠাটিকে অবশ্যই onMessage কলব্যাক পরিচালনা করতে হবে, তবে ব্যাকগ্রাউন্ডের ক্ষেত্রে আপনাকে onBackgroundMessage পরিচালনা করতে হবে বা ব্যবহারকারীকে আপনার ওয়েব অ্যাপটিকে অগ্রভাগে আনতে অনুমতি দেওয়ার জন্য প্রদর্শন বিজ্ঞপ্তিটি কনফিগার করতে হবে।

অ্যাপের অবস্থা বিজ্ঞপ্তি ডেটা উভয়
ফোরগ্রাউন্ড onMessage onMessage onMessage
পটভূমি (পরিষেবা কর্মী) onBackgroundMessage (প্রদর্শন বিজ্ঞপ্তি স্বয়ংক্রিয়ভাবে দেখানো হয়েছে) onBackgroundMessage onBackgroundMessage (প্রদর্শন বিজ্ঞপ্তি স্বয়ংক্রিয়ভাবে দেখানো হয়েছে)

জাভাস্ক্রিপ্ট কুইকস্টার্ট নমুনা বার্তা গ্রহণের জন্য প্রয়োজনীয় সমস্ত কোড প্রদর্শন করে।

আপনার ওয়েব অ্যাপ ফোরগ্রাউন্ডে থাকলে বার্তাগুলি পরিচালনা করুন

onMessage ইভেন্ট পাওয়ার জন্য, আপনার অ্যাপকে অবশ্যই firebase-messaging-sw.js এ Firebase মেসেজিং পরিষেবা কর্মীকে সংজ্ঞায়িত করতে হবে। বিকল্পভাবে, আপনি getToken(): Promise<string> এর মাধ্যমে SDK-কে একটি বিদ্যমান পরিষেবা কর্মী প্রদান করতে পারেন।

Web

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
messaging_init_in_sw.js

Web

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
service-worker.js

যখন আপনার অ্যাপটি ফোরগ্রাউন্ডে থাকে (ব্যবহারকারী বর্তমানে আপনার ওয়েব পৃষ্ঠাটি দেখছেন), আপনি সরাসরি পৃষ্ঠায় ডেটা এবং বিজ্ঞপ্তি পেলোড পেতে পারেন।

Web

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});
messaging_receive_message.js

Web 

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});
index.js

আপনার ওয়েব অ্যাপ ব্যাকগ্রাউন্ডে থাকলে বার্তাগুলি পরিচালনা করুন

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

সেন্ড রিকোয়েস্টে নোটিফিকেশন অপশন সেট করা

অ্যাপ সার্ভার থেকে পাঠানো বিজ্ঞপ্তি বার্তাগুলির জন্য, FCM JavaScript API fcm_options.link কী সমর্থন করে। সাধারণত এটি আপনার ওয়েব অ্যাপের একটি পৃষ্ঠায় সেট করা থাকে:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

যদি লিঙ্কের মানটি একটি পৃষ্ঠার দিকে নির্দেশ করে যা ইতিমধ্যেই একটি ব্রাউজার ট্যাবে খোলা আছে, বিজ্ঞপ্তিতে একটি ক্লিক সেই ট্যাবটিকে অগ্রভাগে নিয়ে আসে। পৃষ্ঠাটি ইতিমধ্যে খোলা না থাকলে, একটি বিজ্ঞপ্তি ক্লিক একটি নতুন ট্যাবে পৃষ্ঠাটি খোলে।

যেহেতু ডেটা বার্তাগুলি fcm_options.link সমর্থন করে না, তাই আপনাকে সমস্ত ডেটা বার্তাগুলিতে একটি বিজ্ঞপ্তি পেলোড যোগ করার পরামর্শ দেওয়া হচ্ছে৷ বিকল্পভাবে, আপনি পরিষেবা কর্মী ব্যবহার করে বিজ্ঞপ্তিগুলি পরিচালনা করতে পারেন৷

বিজ্ঞপ্তি এবং ডেটা বার্তাগুলির মধ্যে পার্থক্যের ব্যাখ্যার জন্য, বার্তার প্রকারগুলি দেখুন৷

পরিষেবা কর্মীর মধ্যে বিজ্ঞপ্তি বিকল্প সেট করা

ডেটা বার্তাগুলির জন্য, আপনি পরিষেবা কর্মীতে বিজ্ঞপ্তি বিকল্পগুলি সেট করতে পারেন৷ প্রথমে, পরিষেবা কর্মীতে আপনার অ্যাপ শুরু করুন:

Web

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
messaging_init_in_sw.js

Web

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
service-worker.js

বিকল্পগুলি সেট করতে, firebase-messaging-sw.js এ onBackgroundMessage এ কল করুন। এই উদাহরণে, আমরা শিরোনাম, বডি এবং আইকন ক্ষেত্র সহ একটি বিজ্ঞপ্তি তৈরি করি।

Web

import { getMessaging } from "firebase/messaging/sw";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});
messaging_on_background_message.js

Web

messaging.onBackgroundMessage((payload) => {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    payload
  );
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});
service-worker.js

বিজ্ঞপ্তির জন্য সর্বোত্তম অনুশীলন

আপনি যদি ওয়েবের জন্য পুশ মেসেজিং এর সাথে পরিচিত হন, তাহলে আপনি হয়ত ইতিমধ্যেই বিস্তৃত নির্দেশিকা পড়ে ফেলেছেন যা একটি ভাল বিজ্ঞপ্তি তৈরি করে ৷ ডেভেলপাররা ওয়েবের জন্য FCM মাধ্যমে বিজ্ঞপ্তি পাঠাচ্ছেন, সবচেয়ে গুরুত্বপূর্ণ বিবেচ্য বিষয় হল যথার্থতা এবং প্রাসঙ্গিকতা। আপনার বিজ্ঞপ্তিগুলিকে সুনির্দিষ্ট এবং প্রাসঙ্গিক রাখার জন্য এখানে কিছু নির্দিষ্ট সুপারিশ রয়েছে:

  • একটি অর্থপূর্ণ ছবি পাঠাতে আইকন ক্ষেত্রটি ব্যবহার করুন। অনেক ব্যবহারের ক্ষেত্রে, এটি একটি কোম্পানি বা অ্যাপ লোগো হওয়া উচিত যা আপনার ব্যবহারকারীরা অবিলম্বে চিনতে পারে। অথবা, একটি চ্যাট অ্যাপ্লিকেশনের জন্য, এটি প্রেরণকারী ব্যবহারকারীর প্রোফাইল চিত্র হতে পারে৷
  • বার্তাটির সুনির্দিষ্ট প্রকৃতি প্রকাশ করতে শিরোনাম ক্ষেত্রটি ব্যবহার করুন। উদাহরণস্বরূপ, "জিমি উত্তর দিয়েছে" "নতুন বার্তা" এর চেয়ে আরও সুনির্দিষ্ট তথ্য প্রদান করে। আপনার কোম্পানি বা অ্যাপের নামের জন্য এই মূল্যবান স্থানটি ব্যবহার করবেন না — সেই উদ্দেশ্যে আইকনটি ব্যবহার করুন।
  • আপনার ওয়েবসাইটের নাম বা ডোমেন প্রদর্শন করতে বিজ্ঞপ্তি শিরোনাম বা বডি ব্যবহার করবেন না; বিজ্ঞপ্তিতে ইতিমধ্যেই আপনার ডোমেন নাম রয়েছে।
  • fcm_options.link যোগ করুন, সাধারণত ব্যবহারকারীকে আপনার ওয়েব অ্যাপে লিঙ্ক করতে এবং ব্রাউজারে ফোকাসে আনতে। বিরল ক্ষেত্রে যেখানে আপনার জানানোর জন্য প্রয়োজনীয় সমস্ত তথ্য বিজ্ঞপ্তিতে ফিট হতে পারে, আপনার একটি লিঙ্কের প্রয়োজন নাও হতে পারে।