ক্রোম 48-এ বিজ্ঞপ্তি অ্যাকশন

2015 সালের শুরুর দিকে আমরা Android এবং ডেস্কটপের জন্য Chrome-এ পুশ মেসেজিং এবং বিজ্ঞপ্তি চালু করেছি। এটি ওয়েবে একটি দুর্দান্ত পদক্ষেপ ছিল। ব্রাউজারটি বন্ধ থাকলেও ব্যবহারকারীরা ওয়েবে অভিজ্ঞতার সাথে আরও গভীরভাবে জড়িত হতে শুরু করতে পারে।

যদিও এটি দুর্দান্ত যে আপনি এই বার্তাগুলি পাঠাতে পারেন, আপনি একটির সাথে একমাত্র কাজটি করতে পারেন তা হল এটিতে ক্লিক করা এবং একটি পৃষ্ঠা খুলুন বা এটি সম্পূর্ণভাবে বরখাস্ত করুন৷

আপনি যদি iOS এবং Android এর মতো মোবাইল প্ল্যাটফর্মগুলিতে অ্যাপগুলিতে স্থানীয়ভাবে দেওয়া বিজ্ঞপ্তিগুলি দেখেন, তবে তারা প্রতিটি বিকাশকারীকে প্রাসঙ্গিক ক্রিয়াগুলি সংজ্ঞায়িত করতে দেয় যা ব্যবহারকারী আহ্বান করতে এবং যোগাযোগ করতে পারে৷ ক্রোম 48-এ আমরা এখন ডেক্সটপ এবং অ্যান্ড্রয়েডের জন্য ক্রোম জুড়ে ওয়েব নোটিফিকেশনের অনুরূপ ক্ষমতা যুক্ত করেছি।

বিজ্ঞপ্তির স্ক্রিনশট

API এর সংযোজনটি বেশ সহজ। যখন আপনি একটি ServiceWorker রেজিস্ট্রেশন থেকে showNotification কল করেন তখন আপনাকে শুধুমাত্র কর্মের একটি অ্যারে তৈরি করতে হবে এবং সেগুলিকে NotificationOptions অবজেক্টে যুক্ত করতে হবে (হয় সরাসরি ServiceWorker-এ বা navigator.serviceWorker.ready মাধ্যমে একটি পৃষ্ঠায়)।

বর্তমানে Chrome প্রতিটি বিজ্ঞপ্তিতে শুধুমাত্র দুটি ক্রিয়া সমর্থন করে। কিছু প্ল্যাটফর্ম বেশি সমর্থন করতে সক্ষম হতে পারে, এবং কিছু প্ল্যাটফর্ম কম বা কোনটিই সমর্থন করতে পারে না। আপনি Notification.maxActions চেক করে প্ল্যাটফর্মটি কী সমর্থন করে তা নির্ধারণ করতে পারেন। নিম্নলিখিত উদাহরণগুলিতে আমরা অনুমান করছি যে প্ল্যাটফর্ম দুটি ক্রিয়া সমর্থন করে।

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

এটি দুটি বোতাম সহ একটি সাধারণ বিজ্ঞপ্তি তৈরি করবে। দ্রষ্টব্য, সরাসরি অ্যাকশনে আইকন যোগ করা সম্ভব নয় ( এখনও ), তবে আপনি আপনার বিজ্ঞপ্তি বোতামগুলিতে আরও প্রসঙ্গ যোগ করতে ইমোজি এবং বর্ধিত ইউনিকোড অক্ষর সেট ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

এখন যেহেতু আপনি একটি বিজ্ঞপ্তি তৈরি করেছেন এবং এটিকে 😻 দেখাতে পেরেছেন, ব্যবহারকারী ভবিষ্যতে কোনও সময়ে বিজ্ঞপ্তিটির সাথে যোগাযোগ করতে পারে৷ বিজ্ঞপ্তির সাথে ইন্টারঅ্যাকশনগুলি বর্তমানে (Chrome 48 অনুসারে) আপনার পরিষেবা কর্মীতে নিবন্ধিত notificationclick ইভেন্টের মাধ্যমে আসে এবং সেগুলি হয় বিজ্ঞপ্তিতে একটি সাধারণ ক্লিক বা অ্যাকশন বোতামগুলির একটিতে একটি নির্দিষ্ট ট্যাপ হতে পারে। সাইড নোট, ভবিষ্যতে আপনি বিজ্ঞপ্তি বন্ধ ইভেন্টেও প্রতিক্রিয়া জানাতে সক্ষম হবেন।

ব্যবহারকারী কোন পদক্ষেপ নিয়েছে তা বোঝার জন্য আপনাকে ইভেন্টে action প্রপার্টি পরিদর্শন করতে হবে এবং তারপরে ব্যবহারকারীর একটি ক্রিয়া সম্পূর্ণ করার জন্য বা ব্যাকগ্রাউন্ডে কাজটি সম্পাদন করার জন্য আপনার কাছে একটি নতুন পৃষ্ঠা খোলার পছন্দ রয়েছে৷

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

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

যেহেতু প্ল্যাটফর্মগুলি একই সংখ্যক অ্যাকশন সমর্থন করবে না, বা কিছু ক্ষেত্রে বিজ্ঞপ্তি অ্যাকশন বোতামগুলিকে সমর্থন করতে সক্ষম হবে না, তাই আপনাকে নিশ্চিত করতে হবে যে আপনি সর্বদা একটি কাজের জন্য একটি বুদ্ধিমান ফলব্যাক প্রদান করবেন যা আপনি ব্যবহারকারীর কাছে আশা করবেন। যদি তারা শুধু বিজ্ঞপ্তিতে ক্লিক করে তাহলে তা করুন।

আপনি যদি আজ এটিকে কার্যকরভাবে দেখতে চান, পিটার বেভারলুর বিজ্ঞপ্তি পরীক্ষা হার্নের পরীক্ষা করুন এবং বিজ্ঞপ্তিগুলির স্পেসিফিকেশন পড়ুন বা এটি আপডেট হওয়ার সাথে সাথে স্পেকটি অনুসরণ করুন