একটি জাভাস্ক্রিপ্ট ক্লায়েন্টে বার্তা পান

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

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

আপনার ওয়েব অ্যাপ্লিকেশনটি অগ্রভাগে থাকা অবস্থায় বার্তাগুলি পরিচালনা করুন

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

// 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.
importScripts('https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.9/firebase-messaging.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

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

// 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 জাভাস্ক্রিপ্ট 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 সমর্থন করে না, তাই আপনাকে সমস্ত ডেটা বার্তায় একটি নোটিফিকেশন পেলোড যুক্ত করার পরামর্শ দেওয়া হয়। বিকল্পভাবে, আপনি পরিষেবা কর্মী ব্যবহার করে বিজ্ঞপ্তিগুলি পরিচালনা করতে পারেন।

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

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

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

// 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.
importScripts('https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.9/firebase-messaging.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

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

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_options.link করুন। বিরল ক্ষেত্রে যেখানে আপনাকে জানাতে হবে সমস্ত তথ্য বিজ্ঞপ্তির সাথে মানানসই হতে পারে, আপনার কোনও লিঙ্কের প্রয়োজন নাও হতে পারে।