এই কোডল্যাবে, আপনি বিজ্ঞপ্তি API এর মৌলিক বৈশিষ্ট্যগুলি ব্যবহার করবেন:
- বিজ্ঞপ্তি পাঠাতে অনুমতি অনুরোধ করুন
- বিজ্ঞপ্তি পাঠান
- বিজ্ঞপ্তি বিকল্পগুলির সাথে পরীক্ষা করুন
নমুনা অ্যাপটি রিমিক্স করুন এবং একটি নতুন ট্যাবে দেখুন
এমবেডেড গ্লিচ অ্যাপ থেকে বিজ্ঞপ্তিগুলি স্বয়ংক্রিয়ভাবে ব্লক করা হয়েছে, তাই আপনি এই পৃষ্ঠায় অ্যাপটির পূর্বরূপ দেখতে পারবেন না। পরিবর্তে, এখানে কি করতে হবে:
- প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
গ্লিচটি একটি নতুন Chrome ট্যাবে খোলা উচিত:
আপনি এই কোডল্যাবের মাধ্যমে কাজ করার সময়, এই পৃষ্ঠায় এমবেড করা ত্রুটির কোডে পরিবর্তন করুন। পরিবর্তনগুলি দেখতে আপনার লাইভ অ্যাপের সাথে নতুন ট্যাবটি রিফ্রেশ করুন৷
প্রারম্ভিক অ্যাপ এবং এর কোডের সাথে পরিচিত হন
নতুন Chrome ট্যাবে লাইভ অ্যাপটি পরীক্ষা করে শুরু করুন:
DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন। কনসোল ট্যাবে ক্লিক করুন।
আপনার কনসোলে নিম্নলিখিত বার্তাটি দেখতে হবে:
Notification permission is default
যদি আপনি না জানেন যে এর অর্থ কী, চিন্তা করবেন না; শীঘ্রই সব প্রকাশ করা হবে!
লাইভ অ্যাপের বোতামগুলিতে ক্লিক করুন: বিজ্ঞপ্তি পাঠানোর অনুমতির অনুরোধ করুন এবং একটি বিজ্ঞপ্তি পাঠান ।
কনসোল কয়েকটি ফাংশন স্টাব থেকে "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()
পদ্ধতি ব্যবহার করবেন যা ব্যবহারকারীকে আপনার সাইট থেকে বিজ্ঞপ্তিগুলিকে অনুমতি দিতে বা ব্লক করতে বলে৷
নিম্নলিখিত কোড দিয়ে 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); }); }
যে Chrome ট্যাবটিতে আপনি আপনার লাইভ অ্যাপটি দেখছেন সেটি পুনরায় লোড করুন।
লাইভ অ্যাপ ইন্টারফেসে, বিজ্ঞপ্তি পাঠানোর অনুমতির অনুরোধ করুন ক্লিক করুন। একটি পপআপ প্রদর্শিত হবে.
ব্যবহারকারী অনুমতি পপআপ তিনটি প্রতিক্রিয়া করতে পারেন.
ব্যবহারকারীর প্রতিক্রিয়া | বিজ্ঞপ্তি অনুমতি রাষ্ট্র |
---|---|
ব্যবহারকারী অনুমতি নির্বাচন করে | 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
করা হলে, আপনার বিজ্ঞপ্তি প্রদর্শিত হবে.
নিম্নলিখিত কোড দিয়ে 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 ডকুমেন্টেশন দেখুন।যে 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);
};
}
একটি বিজ্ঞপ্তি অনুমতি ত্রুটি পর্যবেক্ষণ করতে:
ক্রোম ইউআরএল বারের পাশের লক আইকনে ক্লিক করুন এবং সাইটের বিজ্ঞপ্তির অনুমতি সেটিংসটিকে ডিফল্টে রিসেট করুন।
বিজ্ঞপ্তি পাঠাতে অনুমতির অনুরোধ করুন ক্লিক করুন, এবং এই সময় পপআপ থেকে ব্লক নির্বাচন করুন।
বিজ্ঞপ্তি পাঠান ক্লিক করুন এবং দেখুন কি হয়. ত্রুটি পাঠ্য (
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'
},],
*/
}
আরও কিছু ধারণার জন্য পিটার বেভারলুর বিজ্ঞপ্তি জেনারেটর দেখুন!
আপনি যদি আটকে থাকেন, তাহলে এই কোডল্যাবের সম্পূর্ণ কোডটি এখানে রয়েছে: glitch.com/edit/#!/codelab-notifications-get-started-completed
এই সিরিজের পরবর্তী কোডল্যাব দেখুন, আরও অন্বেষণ করতে একজন পরিষেবা কর্মীর সাথে বিজ্ঞপ্তিগুলি পরিচালনা করুন !