বিজ্ঞপ্তি API দিয়ে শুরু করুন

এই কোডল্যাবে, আপনি বিজ্ঞপ্তি API এর মৌলিক বৈশিষ্ট্যগুলি ব্যবহার করবেন:

  • বিজ্ঞপ্তি পাঠাতে অনুমতি অনুরোধ করুন
  • বিজ্ঞপ্তি পাঠান
  • বিজ্ঞপ্তি বিকল্পগুলির সাথে পরীক্ষা করুন

Browser Support

  • ক্রোম: 20।
  • প্রান্ত: 14।
  • ফায়ারফক্স: 22।
  • সাফারি: 7।

Source

প্রারম্ভিক অ্যাপ এবং এর কোডের সাথে পরিচিত হন

নতুন Chrome ট্যাবে লাইভ অ্যাপটি পরীক্ষা করে শুরু করুন:

  1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন। কনসোল ট্যাবে ক্লিক করুন।

    আপনার কনসোলে নিম্নলিখিত বার্তাটি দেখতে হবে:

    Notification permission is default

    যদি আপনি না জানেন যে এর অর্থ কী, চিন্তা করবেন না; শীঘ্রই সব প্রকাশ করা হবে!

  2. লাইভ অ্যাপের বোতামগুলিতে ক্লিক করুন: বিজ্ঞপ্তি পাঠানোর অনুমতির অনুরোধ করুন এবং একটি বিজ্ঞপ্তি পাঠান ।

    কনসোল কয়েকটি ফাংশন স্টাব থেকে "TODO" বার্তা প্রিন্ট করে: requestPermission এবং sendNotification . এই ফাংশনগুলি আপনি এই কোডল্যাবে প্রয়োগ করবেন।

এবার নমুনা অ্যাপের কোড দেখি। public/index.js খুলুন এবং বিদ্যমান কোডের কিছু গুরুত্বপূর্ণ অংশ দেখুন:

  • showPermission ফাংশন সাইটের বর্তমান অনুমতির অবস্থা পেতে এবং কনসোলে লগ করতে বিজ্ঞপ্তি API ব্যবহার করে:

    // Print current permission state to console;
// update onscreen message.
function showPermission() {
  let permission = Notification.permission;
  console.log('Notification permission is ' + permission);
  let p = document.getElementById('permission');
  p.textContent = 'Notification permission is ' + permission;
}

    অনুমতির অনুরোধ করার আগে, অনুমতির অবস্থা default । default অনুমতি অবস্থায়, একটি সাইট বিজ্ঞপ্তি পাঠানোর আগে অনুরোধ করতে হবে এবং অনুমতি দিতে হবে।

  • requestPermission ফাংশন একটি অসম্পূর্ণ:

    // Use the Notification API to request permission to send notifications.
function requestPermission() {
  console.log('TODO: Implement requestPermission()');
}

    আপনি পরবর্তী ধাপে এই ফাংশনটি বাস্তবায়ন করবেন।

  • sendNotification ফাংশনটি একটি অসম্পূর্ণ:

    // Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  console.log('TODO: Implement sendNotification()');
}

    আপনি requestPermission প্রয়োগ করার পরে আপনি এই ফাংশনটি বাস্তবায়ন করবেন।

  • window.onload ইভেন্ট লিসেনার পৃষ্ঠা লোডের সময় showPermission ফাংশনকে কল করে, কনসোলে এবং পৃষ্ঠায় বর্তমান অনুমতির অবস্থা প্রদর্শন করে:

    window.onload = () => { showPermission(); };

বিজ্ঞপ্তি পাঠাতে অনুমতি অনুরোধ করুন

এই ধাপে, আপনি বিজ্ঞপ্তি পাঠানোর জন্য ব্যবহারকারীর অনুমতির অনুরোধ করার জন্য কার্যকারিতা যোগ করবেন।

আপনি একটি পপআপ ট্রিগার করতে Notification.requestPermission() পদ্ধতি ব্যবহার করবেন যা ব্যবহারকারীকে আপনার সাইট থেকে বিজ্ঞপ্তিগুলিকে অনুমতি দিতে বা ব্লক করতে বলে৷

  1. নিম্নলিখিত কোড দিয়ে public/index.js-এ requestPermission ফাংশন স্টাব প্রতিস্থাপন করুন:

    // Use the Notification API to request permission to send notifications.
function requestPermission() {
  Notification.requestPermission()
    .then((permission) => {
      console.log('Promise resolved: ' + permission);
      showPermission();
    })
    .catch((error) => {
      console.log('Promise was rejected');
      console.log(error);
    });
}

  2. যে Chrome ট্যাবটিতে আপনি আপনার লাইভ অ্যাপটি দেখছেন সেটি পুনরায় লোড করুন।

  3. লাইভ অ্যাপ ইন্টারফেসে, বিজ্ঞপ্তি পাঠানোর অনুমতির অনুরোধ করুন ক্লিক করুন। একটি পপআপ প্রদর্শিত হবে.

ব্যবহারকারী অনুমতি পপআপ তিনটি প্রতিক্রিয়া করতে পারেন.

ব্যবহারকারীর প্রতিক্রিয়া বিজ্ঞপ্তি অনুমতি রাষ্ট্র
ব্যবহারকারী অনুমতি নির্বাচন করে granted
ব্যবহারকারী ব্লক নির্বাচন করে denied
ব্যবহারকারী একটি নির্বাচন না করেই পপআপ খারিজ করে default

ব্যবহারকারী যদি অনুমতিতে ক্লিক করেন:

  • Notification.permission granted জন্য সেট করা হয়েছে।

  • সাইটটি বিজ্ঞপ্তি প্রদর্শন করতে সক্ষম হবে।

  • Notification.requestPermission এ পরবর্তী কলগুলি পপআপ ছাড়াই granted করা হবে।

যদি ব্যবহারকারী ব্লক ক্লিক করে:

  • Notification.permission denied করা হয়েছে।

  • সাইটটি ব্যবহারকারীকে বিজ্ঞপ্তি প্রদর্শন করতে সক্ষম হবে না ।

  • Notification.requestPermission এ পরবর্তী কলগুলি পপআপ ছাড়াই denied করার সিদ্ধান্ত নেবে৷

যদি ব্যবহারকারী পপআপ খারিজ করে দেয়:

  • Notification.permission default থাকে।

  • সাইটটি ব্যবহারকারীকে বিজ্ঞপ্তি প্রদর্শন করতে সক্ষম হবে না।

  • Notification.requestPermission এ পরবর্তী কলগুলি আরও পপআপ তৈরি করবে৷

    যাইহোক, যদি ব্যবহারকারী পপআপগুলিকে খারিজ করতে থাকে, তাহলে ব্রাউজার সাইটটিকে ব্লক করতে পারে, Notification.permission denied এ সেট করে। তারপরে ব্যবহারকারীর কাছে অনুমতির অনুরোধ পপআপ বা বিজ্ঞপ্তিগুলি প্রদর্শন করা যাবে না।

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

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

এই ধাপে, আপনি ব্যবহারকারীকে একটি বিজ্ঞপ্তি পাঠাবেন।

আপনি একটি নতুন বিজ্ঞপ্তি তৈরি করতে এবং এটি প্রদর্শন করার চেষ্টা করতে Notification কনস্ট্রাক্টর ব্যবহার করবেন। অনুমতি রাষ্ট্র granted হলে, আপনার বিজ্ঞপ্তি প্রদর্শিত হবে.

  1. নিম্নলিখিত কোড দিয়ে index.js-এ sendNotification ফাংশন স্টাব প্রতিস্থাপন করুন:

    // Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
}

    Notification কনস্ট্রাক্টর দুটি পরামিতি নেয়: title এবং options । options হল এমন একটি বস্তু যার বৈশিষ্ট্যগুলি ভিজ্যুয়াল সেটিংস এবং ডেটা উপস্থাপন করে যা আপনি একটি বিজ্ঞপ্তিতে অন্তর্ভুক্ত করতে পারেন। আরও তথ্যের জন্য বিজ্ঞপ্তি পরামিতিগুলিতে MDN ডকুমেন্টেশন দেখুন।

  2. যে Chrome ট্যাবটিতে আপনি আপনার লাইভ অ্যাপটি দেখছেন সেটি রিফ্রেশ করুন এবং বিজ্ঞপ্তি পাঠান বোতামে ক্লিক করুন। Test body টেক্সট সহ একটি বিজ্ঞপ্তি উপস্থিত হওয়া উচিত।

আপনি বিনা অনুমতিতে বিজ্ঞপ্তি পাঠালে কি হয়?

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

  • public/index.js এ, sendNotification ফাংশনের শেষে, নতুন বিজ্ঞপ্তির onerror ইভেন্ট হ্যান্ডলারকে সংজ্ঞায়িত করুন: 
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

একটি বিজ্ঞপ্তি অনুমতি ত্রুটি পর্যবেক্ষণ করতে:

  1. ক্রোম ইউআরএল বারের পাশের লক আইকনে ক্লিক করুন এবং সাইটের বিজ্ঞপ্তির অনুমতি সেটিংসটিকে ডিফল্টে রিসেট করুন।

  2. বিজ্ঞপ্তি পাঠাতে অনুমতির অনুরোধ করুন ক্লিক করুন, এবং এই সময় পপআপ থেকে ব্লক নির্বাচন করুন।

  3. বিজ্ঞপ্তি পাঠান ক্লিক করুন এবং দেখুন কি হয়. ত্রুটি পাঠ্য ( Could not send notification ) এবং ইভেন্ট অবজেক্ট কনসোলে লগ করা হয়েছে৷

ঐচ্ছিকভাবে, সাইটের বিজ্ঞপ্তি অনুমতি পুনরায় সেট করুন। আপনি অনুমতির অনুরোধ করার চেষ্টা করতে পারেন এবং কী ঘটবে তা দেখতে একাধিকবার পপআপ খারিজ করতে পারেন৷

বিজ্ঞপ্তি বিকল্পগুলির সাথে পরীক্ষা করুন

আপনি এখন অনুমতির অনুরোধ এবং বিজ্ঞপ্তি পাঠানোর প্রাথমিক বিষয়গুলি কভার করেছেন৷ বিজ্ঞপ্তিগুলি প্রদর্শন করার জন্য আপনার অ্যাপের ক্ষমতার উপর ব্যবহারকারীর প্রতিক্রিয়াগুলি কী প্রভাব ফেলে তা আপনিও দেখেছেন৷

এখন আপনি একটি বিজ্ঞপ্তি তৈরি করার সময় উপলব্ধ অনেক ভিজ্যুয়াল এবং ডেটা বিকল্পগুলির সাথে পরীক্ষা করতে পারেন৷ উপলব্ধ বিকল্পগুলির সম্পূর্ণ সেট নীচে রয়েছে। (এই বিকল্পগুলি সম্পর্কে আরও তথ্যের জন্য MDN-এ বিজ্ঞপ্তি ডকুমেন্টেশন দেখুন৷)

মনে রাখবেন যে ব্রাউজার এবং ডিভাইসগুলি এই বিকল্পগুলিকে ভিন্নভাবে প্রয়োগ করে, তাই বিভিন্ন প্ল্যাটফর্মে আপনার বিজ্ঞপ্তিগুলিকে কীভাবে দেখায় তা পরীক্ষা করা মূল্যবান৷

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

আরও কিছু ধারণার জন্য পিটার বেভারলুর বিজ্ঞপ্তি জেনারেটর দেখুন!

এই সিরিজের পরবর্তী কোডল্যাব দেখুন, আরও অন্বেষণ করতে একজন পরিষেবা কর্মীর সাথে বিজ্ঞপ্তিগুলি পরিচালনা করুন !