বিজ্ঞপ্তি দেখানো হচ্ছে

Alexey Rodionov

Matt Gaunt

বিজ্ঞপ্তির বিকল্প দুটি বিভাগে বিভক্ত, একটি ভিজ্যুয়াল দিকগুলি নিয়ে কাজ করে (এই বিভাগ) এবং একটি যা বিজ্ঞপ্তির আচরণগত দিকগুলি ব্যাখ্যা করে (পরবর্তী বিভাগ)।

Peter Beverloo-এর Notification Generator ব্যবহার করে আপনি বিভিন্ন প্ল্যাটফর্মে বিভিন্ন ব্রাউজারে বিভিন্ন বিজ্ঞপ্তির বিকল্প নিয়ে পরীক্ষা করতে পারেন।

ভিজ্যুয়াল বিকল্প

বিজ্ঞপ্তি দেখানোর API সহজ:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

title এবং options, দুটি আর্গুমেন্টই ঐচ্ছিক।

টাইটেল হল একটি স্ট্রিং এবং বিকল্পগুলি নিম্নলিখিতগুলির মধ্যে যেকোনও একটি হতে পারে:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

আসুন, ভিজ্যুয়াল বিকল্পগুলি দেখে নেওয়া যাক:

শীর্ষক ও মূল অংশ সংক্রান্ত বিকল্প

Windows-এ Chrome-এ কোনও বিজ্ঞপ্তি শিরোনাম এবং বিকল্প ছাড়া দেখতে কেমন লাগে তা এখানে দেওয়া হল:

আপনি দেখতে পাচ্ছেন, ব্রাউজারের নাম শিরোনাম হিসেবে এবং "নতুন বিজ্ঞপ্তি" প্লেসহোল্ডার বিজ্ঞপ্তির মূল অংশ হিসেবে ব্যবহার করা হয়েছে।

ডিভাইসে প্রোগ্রেসিভ ওয়েব অ্যাপ্লিকেশন ইনস্টল করা থাকলে, ব্রাউজারের নামের পরিবর্তে ওয়েব অ্যাপের নাম ব্যবহার করা হবে:

আমরা যদি নিম্নলিখিত কোড রান করি:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

আমরা Linux-এ Chrome-এ এই বিজ্ঞপ্তি পাব:

Linux-এ Firefox-এ এটি দেখতে এমন হবে:

This is what the notification with a lot of text in the title and body looks like in Chrome on Linux:

Linux-এ Firefox-এর ক্ষেত্রে, আপনি বিজ্ঞপ্তির উপর মাউস না নিয়ে যাওয়া পর্যন্ত বডি টেক্সট ছোট হয়ে থাকে, যার ফলে বিজ্ঞপ্তি বড় হয়ে যায়:

Windows-এ Firefox-এ একই বিজ্ঞপ্তি এইরকম দেখায়:

আপনি দেখতেই পাচ্ছেন যে একই বিজ্ঞপ্তি বিভিন্ন ব্রাউজারে আলাদা আলাদাভাবে দেখানো হতে পারে। এছাড়াও, একই ব্রাউজারে আলাদা আলাদা প্ল্যাটফর্মে এটি আলাদা আলাদা দেখতে হতে পারে।

Chrome এবং Firefox সিস্টেম বিজ্ঞপ্তি এবং বিজ্ঞপ্তি কেন্দ্র ব্যবহার করে যেখানে এই প্ল্যাটফর্মগুলি উপলভ্য।

যেমন, macOS-এ সিস্টেম বিজ্ঞপ্তিতে ছবি ও অ্যাকশন (বোতাম ও ইনলাইন উত্তর) কাজ করে না।

এছাড়াও, সব ডেস্কটপ প্ল্যাটফর্মের জন্য Chrome-এ কাস্টম বিজ্ঞপ্তি রয়েছে। আপনি chrome://flags/#enable-system-notifications ফ্ল্যাগকে Disabled অবস্থায় সেট করে এটি চালু করতে পারবেন।

আইকন

icon বিকল্পটি হল একটি ছোট ছবি যা আপনি শীর্ষক ও মূল টেক্সটের পাশে দেখাতে পারবেন।

আপনার কোডে, আপনি যে ছবি লোড করতে চান সেটির URL দিতে হবে:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

আপনি Linux-এ Chrome-এ এই বিজ্ঞপ্তি পাবেন:

এবং Linux-এ Firefox-এ:

আইকনের জন্য কোন সাইজের ছবি ব্যবহার করতে হবে সেই ব্যাপারে কোনও নির্দিষ্ট নির্দেশিকা নেই।

Android-এর জন্য 64dp ছবি প্রয়োজন বলে মনে হচ্ছে (যা ডিভাইসের পিক্সেল অনুপাত দ্বারা 64px গুণিতক)।

কোনও ডিভাইসের জন্য সর্বোচ্চ পিক্সেল অনুপাত ৩ হলে, ১৯২ পিক্সেল বা তার বেশি সাইজের আইকন নিরাপদ বাজি।

মনে রাখবেন: কিছু ব্রাউজারে ছবি দেখানোর জন্য HTTPS-এর প্রয়োজন হতে পারে। আপনি থার্ড-পার্টি ছবি ব্যবহার করতে চাইলে, এই বিষয়ে সচেতন থাকুন।

ব্যাজ

badge হল একটি ছোট মনোক্রোম আইকন যা ব্যবহারকারীকে বিজ্ঞপ্তিটি কোথা থেকে এসেছে সে সম্পর্কে আরও কিছু তথ্য জানাতে ব্যবহার করা হয়:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

এই লেখাটি লেখার সময়, ব্যাজটি শুধুমাত্র Android-এ Chrome-এ ব্যবহার করা হয়।

অন্যান্য ব্রাউজারে (বা ব্যাজ ছাড়া Chrome-এ), আপনি ব্রাউজারের একটি আইকন দেখতে পাবেন।

icon বিকল্পের মতো, কোন সাইজ ব্যবহার করতে হবে সেই বিষয়ে কোনও আসল নির্দেশিকা নেই।

Android নির্দেশিকা অনুযায়ী সাজেস্ট করা সাইজ হল ২৪ পিক্সেলকে ডিভাইসের পিক্সেল অনুপাত দিয়ে গুণ করে পাওয়া সংখ্যা।

অর্থাৎ, ৭২ পিক্সেল বা তার বেশি সাইজের ছবি ভালো হবে (ডিভাইস পিক্সেল অনুপাত সর্বাধিক ৩ ধরে)।

ছবি

ব্যবহারকারীকে আরও বড় ছবি দেখানোর জন্য image বিকল্প ব্যবহার করা যেতে পারে। ব্যবহারকারীকে প্রিভিউ ছবি দেখানোর জন্য এটি বিশেষভাবে উপযোগী।

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Linux-এ Chrome-এ বিজ্ঞপ্তিটি এইরকম দেখতে হবে:

Android-এ Chrome-এর ক্ষেত্রে ক্রপ করা ও অনুপাত আলাদা হয়:

ডেস্কটপ ও মোবাইলের মধ্যে অনুপাতের পার্থক্যের কারণে, নির্দেশিকা সাজেস্ট করা অত্যন্ত কঠিন।

ডেস্কটপে Chrome উপলভ্য স্পেস পূরণ করে না এবং এর অনুপাত ৪:৩, তাই সম্ভবত সবচেয়ে ভালো পদ্ধতি হল এই অনুপাতে ছবি দেখানো এবং Android-কে ছবি ক্রপ করার অনুমতি দেওয়া। তবে, image বিকল্পটি এখনও পরিবর্তন হতে পারে।

Android-এ, একমাত্র নির্দেশিকা হল ৪৫০ডিপি প্রস্থ।

এই নির্দেশিকা অনুযায়ী, ১৩৫০ পিক্সেল বা তার বেশি প্রস্থের ছবি ব্যবহার করলে ভালো হয়।

অ্যাকশন (বোতাম)

বিজ্ঞপ্তির সাথে বোতাম দেখানোর জন্য আপনি actions সংজ্ঞায়িত করতে পারবেন:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

প্রতিটি অ্যাকশনের জন্য আপনি একটি title, একটি action (যা মূলত একটি আইডি), একটি icon এবং একটি type নির্ধারণ করতে পারেন। বিজ্ঞপ্তিতে আপনি নাম ও আইকন দেখতে পাবেন। অ্যাকশন বোতামে ক্লিক করা হয়েছে কিনা তা শনাক্ত করার সময় আইডি ব্যবহার করা হয় (এই বিষয়ে পরবর্তী বিভাগে আরও তথ্য দেওয়া আছে)। 'button' ডিফল্ট ভ্যালু হওয়ার কারণে টাইপ বাদ দেওয়া যেতে পারে।

এই নিবন্ধটি লেখার সময়, Android-এর জন্য শুধুমাত্র Chrome এবং Opera-তে অ্যাকশন কাজ করে।

উপরের উদাহরণে চারটি অ্যাকশন দেখানো হয়েছে। এর থেকে বোঝা যায় যে, যতগুলি অ্যাকশন দেখানো হবে তার থেকে বেশি অ্যাকশন আপনি নির্ধারণ করতে পারবেন। ব্রাউজার কতগুলি অ্যাকশন দেখাবে তা জানতে চাইলে, আপনি window.Notification?.maxActions চেক করতে পারেন:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

ডেস্কটপে, অ্যাকশন বোতামের আইকনগুলি তাদের রঙ প্রদর্শন করে (গোলাপি ডোনাট দেখুন):

Android 6 এবং তার আগের ভার্সনে, সিস্টেমের কালার স্কিমের সাথে ম্যাচ করার জন্য আইকনগুলি রঙিন করা হয়:

Android 7 এবং তার পরবর্তী যেকোনও ভার্সনে, অ্যাকশন আইকন একেবারেই দেখানো হয় না।

Chrome আশা করি ডেস্কটপে তার আচরণ পরিবর্তন করবে যাতে Android-এর সাথে মেলে (অর্থাৎ, সিস্টেমের লুক ও ফিলের সাথে আইকনগুলি যাতে মেলে তার জন্য উপযুক্ত রঙের স্কিম প্রয়োগ করা)। ইতিমধ্যে, আপনি Chrome-এর টেক্সটের রঙের সাথে ম্যাচ করতে আপনার আইকনের রঙ #333333 করতে পারেন।

এছাড়াও, Android-এ আইকন ঝকঝকে দেখায় কিন্তু ডেস্কটপে নয়।

ডেস্কটপ Chrome-এ কাজ করার জন্য আমি যে সেরা সাইজটি পেয়েছি তা হল ২৪ পিক্সেল x ২৪ পিক্সেল। Android-এ এটি দেখতে ভালো লাগছে না।

এই পার্থক্য থেকে আমরা যে পেশাদার পদ্ধতি গ্রহণ করতে পারি:

• আপনার আইকনের জন্য একটি সামঞ্জস্যপূর্ণ রঙের স্কিম ব্যবহার করুন যাতে অন্তত আপনার সব আইকন ব্যবহারকারীর কাছে সামঞ্জস্যপূর্ণভাবে দেখানো হয়।
• সেগুলি যাতে মনোক্রোমে কাজ করে তা নিশ্চিত করুন, কারণ কিছু প্ল্যাটফর্ম সেগুলিকে সেইভাবে দেখাতে পারে।
• সাইজ পরীক্ষা করে দেখুন কোনটি আপনার জন্য উপযুক্ত। আমার Android ডিভাইসে 128px × 128px সাইজের ছবি ভালো দেখালেও ডেস্কটপে কোয়ালিটি খারাপ ছিল।
• আপনার অ্যাকশন আইকন একেবারেই দেখানো হবে না বলে আশা করুন।

বিজ্ঞপ্তি স্পেসিফিকেশন আইকনের একাধিক সাইজ নির্ধারণ করার উপায় খুঁজছে, তবে মনে হচ্ছে যে কোনও কিছুতে সম্মত হওয়ার আগে কিছুটা সময় লাগবে।

অ্যাকশন (ইনলাইন উত্তর)

'text' টাইপের সাথে অ্যাকশন নির্ধারণ করে আপনি বিজ্ঞপ্তিতে ইনলাইন উত্তর যোগ করতে পারবেন:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Android-এ এটি কেমন দেখতে লাগবে তা এখানে দেওয়া হল:

অ্যাকশন বোতামে ক্লিক করলে একটি টেক্সট ইনপুট ফিল্ড খোলে:

আপনি টেক্সট ইনপুট ফিল্ডের জন্য প্লেসহোল্ডার কাস্টমাইজ করতে পারবেন:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Windows-এ Chrome-এ, অ্যাকশন বোতামে ক্লিক না করেই টেক্সট ইনপুট ফিল্ড সবসময় দেখা যায়:

আপনি একাধিক ইনলাইন উত্তর যোগ করতে অথবা বোতাম ও ইনলাইন উত্তর একত্রিত করতে পারবেন:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

দিকনির্দেশ

dir প্যারামিটার আপনাকে টেক্সট কোন দিকে দেখানো হবে তা নির্ধারণ করতে দেয়, ডান থেকে বামে অথবা বাম থেকে ডানে।

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

আপনি যদি এটি নির্ধারণ করতে পারেন তাহলে সবচেয়ে ভালো হয়, অন্যথায় ব্রাউজারকে টেক্সট অনুযায়ী সঠিক কাজটি করতে হবে।

প্যারামিটারটি auto, ltr বা rtl-এ সেট করা উচিত।

Linux-এ Chrome-এ ব্যবহৃত ডান-থেকে-বাম ভাষাটি দেখতে এইরকম:

Firefox-এ (এটির উপর মাউস নিয়ে গেলে) আপনি এটি দেখতে পাবেন:

ভাইব্রেট

সতর্কতা: Android 8 এবং তার পরবর্তী যেকোনও ভার্সনে vibrate-এর জন্য সহায়তা বন্ধ করা হয়েছে।

ভাইব্রেট বিকল্পের মাধ্যমে আপনি ভাইব্রেশন প্যাটার্ন নির্ধারণ করতে পারবেন যা বিজ্ঞপ্তি দেখানোর সময় চালু হবে, তবে ব্যবহারকারীর বর্তমান সেটিংসে ভাইব্রেশন চালু থাকতে হবে (অর্থাৎ ডিভাইসটি সাইলেন্ট মোডে থাকলে চলবে না)।

ভাইব্রেট বিকল্পের ফর্ম্যাটটি সংখ্যার একটি অ্যারে হওয়া উচিত যা ডিভাইসটি কত মিলিসেকেন্ড ভাইব্রেট করবে এবং তারপরে কত মিলিসেকেন্ড ডিভাইসটি ভাইব্রেট করবে না তা বর্ণনা করে।

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

এটি শুধুমাত্র সেইসব ডিভাইসকে প্রভাবিত করে যেগুলিতে ভাইব্রেশন কাজ করে।

সাউন্ড

বিজ্ঞপ্তি পেলে কোন সাউন্ড বাজবে তা সাউন্ড প্যারামিটারের মাধ্যমে নির্ধারণ করা যায়।

এই লেখাটি লেখার সময়, কোনও ব্রাউজারে এই বিকল্পের জন্য সহায়তা নেই।

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

টাইমস্ট্যাম্প

টাইমস্ট্যাম্পের মাধ্যমে আপনি প্ল্যাটফর্মকে জানাতে পারেন যে কখন কোনও ইভেন্ট ঘটেছে যার ফলে পুশ বিজ্ঞপ্তি পাঠানো হয়েছে।

timestamp-এর মান 00:00:00 UTC, ১ জানুয়ারি ১৯৭০ (যা UNIX epoch) থেকে শুরু করে মিলিসেকেন্ডে হওয়া উচিত।

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

UX সংক্রান্ত পেশাদার পদ্ধতি

বিজ্ঞপ্তির ক্ষেত্রে আমি সবচেয়ে বড় যে UX ব্যর্থতা দেখেছি তা হল বিজ্ঞপ্তিতে দেখানো তথ্যে নির্দিষ্টতার অভাব।

আপনি কেন পুশ মেসেজ পাঠিয়েছেন তা বিবেচনা করা উচিত এবং ব্যবহারকারী যাতে বুঝতে পারেন যে কেন তিনি বিজ্ঞপ্তিটি পড়ছেন, তার জন্য সবকটি বিজ্ঞপ্তির বিকল্প ব্যবহার করা হয়েছে কিনা তা নিশ্চিত করুন।

সত্যি বলতে, উদাহরণ দেখে "আমি কখনই এই ভুল করব না" ভাবা সহজ। কিন্তু আপনি যতটা ভাবছেন, তার চেয়েও সহজে এই ফাঁদে পড়ে যেতে পারেন।

কিছু সাধারণ ভুল যা এড়িয়ে চলতে হবে:

• শিরোনাম বা বিবরণে আপনার ওয়েবসাইটের নাম লিখবেন না। ব্রাউজার বিজ্ঞপ্তিতে আপনার ডোমেন অন্তর্ভুক্ত করে, তাই এটি ডুপ্লিকেট করবেন না।
• আপনার কাছে উপলভ্য সব তথ্য ব্যবহার করুন। আপনি যদি কোনও ব্যবহারকারীকে মেসেজ পাঠানোর জন্য পুশ মেসেজ পাঠান, তাহলে 'নতুন মেসেজ' শীর্ষক এবং 'এটি পড়তে এখানে ক্লিক করুন' বিবরণের পরিবর্তে 'জন এইমাত্র একটি নতুন মেসেজ পাঠিয়েছেন' শীর্ষক ব্যবহার করুন এবং বিজ্ঞপ্তির বিবরণে মেসেজের অংশ সেট করুন।

ব্রাউজার ও ফিচার শনাক্তকরণ

এই লেখাটি লেখার সময়, বিজ্ঞপ্তির জন্য ফিচার সাপোর্টের ক্ষেত্রে Chrome এবং Firefox-এর মধ্যে বেশ বড় পার্থক্য রয়েছে।

ভাগ্যক্রমে, আপনি window.Notification প্রোটোটাইপ দেখে বিজ্ঞপ্তি ফিচারের জন্য সহায়তা শনাক্ত করতে পারবেন।

ধরা যাক, কোনও বিজ্ঞপ্তিতে অ্যাকশন বোতাম কাজ করে কিনা তা আমরা জানতে চাই, তাহলে আমরা নিম্নলিখিত কাজগুলি করব:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

এর ফলে, আমরা ব্যবহারকারীদের যে বিজ্ঞপ্তি দেখাই তা পরিবর্তন করতে পারব।

অন্যান্য বিকল্পের ক্ষেত্রে, উপরে উল্লেখ করা ধাপগুলি অনুসরণ করুন, 'actions'-এর জায়গায় আপনার পছন্দের প্যারামিটারের নাম লিখুন।

এরপর কোথায় যেতে হবে

• ওয়েব থেকে পাঠানো পুশ বিজ্ঞপ্তি এক নজরে
• পুশ কীভাবে কাজ করে
• ব্যবহারকারীকে সাবস্ক্রাইব করা
• অনুমতি UX
• ওয়েব পুশ লাইব্রেরির মাধ্যমে মেসেজ পাঠানো
• ওয়েব পুশ প্রোটোকল
• পুশ ইভেন্ট ম্যানেজ করা
• বিজ্ঞপ্তি দেখানো হচ্ছে
• বিজ্ঞপ্তি সংক্রান্ত আচরণ
• সাধারণ বিজ্ঞপ্তির প্যাটার্ন
• পুশ বিজ্ঞপ্তি সংক্রান্ত প্রায়শই জিজ্ঞাসিত প্রশ্ন
• সাধারণ সমস্যা এবং বাগ সম্পর্কে অভিযোগ জানানো

কোড ল্যাব

• পুশ বিজ্ঞপ্তি ক্লায়েন্ট তৈরি করা
• পুশ বিজ্ঞপ্তি সার্ভার তৈরি করা