প্রথমত, আমি সেই ভয়ঙ্কর শিরোনামের জন্য ক্ষমাপ্রার্থী, কিন্তু আমি পারিনি।
ক্রোম 44-এ Notfication.data এবং ServiceWorkerRegistration.getNotifications() যোগ করা হয়েছে এবং পুশ বার্তাগুলির সাথে বিজ্ঞপ্তিগুলির সাথে কাজ করার সময় কিছু সাধারণ ব্যবহারের ক্ষেত্রে খোলা/সরল করা হয়েছে।
বিজ্ঞপ্তি ডেটা
Notification.data আপনাকে একটি জাভাস্ক্রিপ্ট অবজেক্টকে একটি বিজ্ঞপ্তির সাথে সংযুক্ত করতে দেয়।
এটি মূলত কী করে ফুটে ওঠে, যখন আপনি একটি পুশ বার্তা পান, আপনি কিছু ডেটা দিয়ে একটি বিজ্ঞপ্তি তৈরি করতে পারেন, তারপরে নোটিফিকেশন ক্লিক ইভেন্টে আপনি ক্লিক করা বিজ্ঞপ্তিটি পেতে পারেন এবং এর ডেটা পেতে পারেন।
উদাহরণস্বরূপ, একটি ডেটা অবজেক্ট তৈরি করা এবং এটিকে আপনার বিজ্ঞপ্তি বিকল্পগুলিতে যুক্ত করা যেমন:
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
var data = {
doge: {
wow: 'such amaze notification data'
}
};
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag,
data: data
})
);
});
মানে আমরা বিজ্ঞপ্তি ক্লিক ইভেন্টে তথ্য পেতে পারি:
self.addEventListener('notificationclick', function(event) {
var doge = event.notification.data.doge;
console.log(doge.wow);
});
এর আগে, আপনাকে ইনডেক্সডিবি-তে ডেটা লুকিয়ে রাখতে হবে বা ইউআরএল আইকনের শেষে কিছু রাখতে হবে - eek।
ServiceWorkerRegistration.getNotifications()
পুশ নোটিফিকেশনে কাজ করা ডেভেলপারদের কাছ থেকে একটি সাধারণ অনুরোধ হল তারা যে বিজ্ঞপ্তিগুলি প্রদর্শন করে তার উপর আরও ভাল নিয়ন্ত্রণ রাখা।
একটি উদাহরণ ব্যবহারের ক্ষেত্রে একটি চ্যাট অ্যাপ্লিকেশন হবে যেখানে একজন ব্যবহারকারী একাধিক বার্তা পাঠায় এবং প্রাপক একাধিক বিজ্ঞপ্তি প্রদর্শন করে। আদর্শভাবে ওয়েব অ্যাপটি লক্ষ্য করতে সক্ষম হবে যে আপনার কাছে বেশ কয়েকটি বিজ্ঞপ্তি রয়েছে যা দেখা হয়নি এবং সেগুলিকে একটি একক বিজ্ঞপ্তিতে ভেঙে ফেলে।
getNotifications() ছাড়া আপনি যা করতে পারেন তা হল পূর্ববর্তী বিজ্ঞপ্তিটিকে সর্বশেষ বার্তা দিয়ে প্রতিস্থাপন করা। getNotifications(), আপনি বিজ্ঞপ্তিগুলিকে "পতন" করতে পারেন যদি একটি বিজ্ঞপ্তি ইতিমধ্যেই প্রদর্শিত হয় - যা আরও ভাল ব্যবহারকারীর অভিজ্ঞতার দিকে নিয়ে যায়৷
এটি করার কোড তুলনামূলকভাবে সহজ। আপনার পুশ ইভেন্টের ভিতরে, বর্তমান বিজ্ঞপ্তিগুলির একটি অ্যারে পেতে ServiceWorkerRegistration.getNotifications() এ কল করুন এবং সেখান থেকে সঠিক আচরণের সিদ্ধান্ত নিন, তা সমস্ত বিজ্ঞপ্তিগুলিকে ভেঙে ফেলছে বা Notification.tag ব্যবহার করে৷
function showNotification(title, body, icon, data) {
var notificationOptions = {
body: body,
icon: icon ? icon : 'images/touch/chrome-touch-icon-192x192.png',
tag: 'simple-push-demo-notification',
data: data
};
self.registration.showNotification(title, notificationOptions);
return;
}
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
// Since this is no payload data with the first version
// of Push notifications, here we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
// Throw an error so the promise is rejected and catch() is executed
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
var title = 'You have a new message';
var message = data.message;
var icon = 'images/notification-icon.png';
var notificationTag = 'chat-message';
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
.then(function(notifications) {
if (notifications && notifications.length > 0) {
// Start with one to account for the new notification
// we are adding
var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
var existingNotification = notifications[i];
if (existingNotification.data &&
existingNotification.data.notificationCount) {
notificationCount +=
existingNotification.data.notificationCount;
} else {
notificationCount++;
}
existingNotification.close();
}
message = 'You have ' + notificationCount +
' weather updates.';
notificationData.notificationCount = notificationCount;
}
return showNotification(title, message, icon, notificationData);
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this ' +
'push message';
return showNotification(title, message);
})
);
});
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event);
if (Notification.prototype.hasOwnProperty('data')) {
console.log('Using Data');
var url = event.notification.data.url;
event.waitUntil(clients.openWindow(url));
} else {
event.waitUntil(getIdb().get(KEY_VALUE_STORE_NAME,
event.notification.tag).then(function(url) {
// At the moment you cannot open third party URL's, a simple trick
// is to redirect to the desired URL from a URL on your domain
var redirectUrl = '/redirect.html?redirect=' +
url;
return clients.openWindow(redirectUrl);
}));
}
});
এই কোড স্নিপেটের সাথে হাইলাইট করার প্রথম জিনিসটি হল যে আমরা একটি ফিল্টার অবজেক্ট গেটনোটিফিকেশন() এ পাস করে আমাদের বিজ্ঞপ্তিগুলি ফিল্টার করি। এর মানে আমরা একটি নির্দিষ্ট ট্যাগের জন্য বিজ্ঞপ্তিগুলির একটি তালিকা পেতে পারি (একটি নির্দিষ্ট কথোপকথনের জন্য এই উদাহরণে)।
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
তারপরে আমরা দৃশ্যমান বিজ্ঞপ্তিগুলির উপর নজর রাখি এবং সেই বিজ্ঞপ্তির সাথে সম্পর্কিত একটি বিজ্ঞপ্তি গণনা আছে কিনা তা পরীক্ষা করি এবং এর ভিত্তিতে বৃদ্ধি। এইভাবে যদি ব্যবহারকারীকে দুটি অপঠিত বার্তা বলে একটি বিজ্ঞপ্তি থাকে, আমরা নির্দেশ করতে চাই যে একটি নতুন পুশ আসার সময় তিনটি অপঠিত বার্তা রয়েছে।
var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
var existingNotification = notifications[i];
if (existingNotification.data && existingNotification.data.notificationCount) {
notificationCount += existingNotification.data.notificationCount;
} else {
notificationCount++;
}
existingNotification.close();
}
হাইলাইট করার জন্য একটি সূক্ষ্মতা হল যে বিজ্ঞপ্তি তালিকা থেকে বিজ্ঞপ্তিটি সরানো হয়েছে তা নিশ্চিত করতে আপনাকে বিজ্ঞপ্তিতে close() কল করতে হবে। এটি Chrome-এ একটি বাগ কারণ প্রতিটি বিজ্ঞপ্তি পরবর্তী একটি দ্বারা প্রতিস্থাপিত হয় কারণ একই ট্যাগ ব্যবহার করা হয়। এই মুহুর্তে এই প্রতিস্থাপনটি getNotifications() থেকে ফিরে আসা অ্যারেতে প্রতিফলিত হচ্ছে না।
এটি getNotifications() এর একটি মাত্র উদাহরণ এবং আপনি যেমন কল্পনা করতে পারেন, এই API অন্যান্য ব্যবহারের ক্ষেত্রে একটি পরিসর খুলে দেয়।
NotificationOptions.vibrate
Chrome 45 হিসাবে আপনি একটি বিজ্ঞপ্তি তৈরি করার সময় একটি কম্পন প্যাটার্ন নির্দিষ্ট করতে পারেন৷ যে ডিভাইসগুলিতে ভাইব্রেশন API সমর্থন করে - বর্তমানে শুধুমাত্র Android এর জন্য Chrome - এটি আপনাকে কম্পন প্যাটার্নটি কাস্টমাইজ করার অনুমতি দেয় যা বিজ্ঞপ্তিটি প্রদর্শিত হলে ব্যবহার করা হবে৷
একটি কম্পন প্যাটার্ন হয় সংখ্যার অ্যারে হতে পারে, বা একটি একক সংখ্যা যা একটি সংখ্যার অ্যারে হিসাবে বিবেচিত হয়। অ্যারের মানগুলি মিলিসেকেন্ডে সময়গুলিকে উপস্থাপন করে, জোড় সূচকগুলি (0, 2, 4, ...) কতক্ষণ কম্পন করতে হবে এবং বিজোড় সূচকগুলি হল পরবর্তী কম্পনের আগে কতক্ষণ বিরতি দিতে হবে৷
self.registration.showNotification('Buzz!', {
body: 'Bzzz bzzzz',
vibrate: [300, 100, 400] // Vibrate 300ms, pause 100ms, then vibrate 400ms
});
অবশিষ্ট সাধারণ বৈশিষ্ট্য অনুরোধ
বিকাশকারীদের থেকে একটি অবশিষ্ট সাধারণ বৈশিষ্ট্য অনুরোধ হল একটি নির্দিষ্ট সময়ের পরে একটি বিজ্ঞপ্তি বন্ধ করার ক্ষমতা বা এটি দৃশ্যমান হলে শুধুমাত্র একটি বিজ্ঞপ্তি বন্ধ করার উদ্দেশ্যে একটি পুশ বিজ্ঞপ্তি পাঠানোর ক্ষমতা।
এই মুহুর্তে এমন কোন উপায় নেই যে আপনি এটি করতে পারেন এবং স্পেকের মধ্যে এমন কিছুই নেই যা এটিকে অনুমতি দেবে :( তবে Chrome ইঞ্জিনিয়ারিং টিম এই ব্যবহারের ক্ষেত্রে সচেতন৷
অ্যান্ড্রয়েড বিজ্ঞপ্তি
ডেস্কটপে আপনি নিম্নলিখিত কোড সহ একটি বিজ্ঞপ্তি তৈরি করতে পারেন:
new Notification('Hello', {body: 'Yay!'});
প্ল্যাটফর্মের বিধিনিষেধের কারণে এটি অ্যান্ড্রয়েডে কখনই সমর্থিত ছিল না: বিশেষত, Chrome নোটিফিকেশন অবজেক্টে কলব্যাক সমর্থন করতে পারে না, যেমন অনক্লিক৷ কিন্তু এটি ডেস্কটপে ব্যবহার করা হয় আপনার বর্তমানে খোলা থাকা ওয়েব অ্যাপের বিজ্ঞপ্তি প্রদর্শনের জন্য।
আমি এটি উল্লেখ করার একমাত্র কারণ হ'ল মূলত, নীচের মতো একটি সাধারণ বৈশিষ্ট্য সনাক্তকরণ আপনাকে ডেস্কটপ সমর্থন করতে সহায়তা করবে এবং অ্যান্ড্রয়েডে কোনও ত্রুটি সৃষ্টি করবে না:
if (!'Notification' in window) {
// Notifications aren't supported
return;
}
যাইহোক, এখন অ্যান্ড্রয়েডের জন্য Chrome-এ পুশ নোটিফিকেশন সমর্থন সহ, বিজ্ঞপ্তিগুলি একটি ServiceWorker থেকে তৈরি করা যেতে পারে, কিন্তু একটি ওয়েব পৃষ্ঠা থেকে নয়, যার অর্থ এই বৈশিষ্ট্য সনাক্তকরণ আর উপযুক্ত নয়৷ আপনি যদি চেষ্টা করেন এবং Android এর জন্য Chrome এ একটি বিজ্ঞপ্তি তৈরি করেন তাহলে আপনি এই ত্রুটি বার্তাটি পাবেন:
_Uncaught TypeError: Failed to construct 'Notification': Illegal constructor.
Use ServiceWorkerRegistration.showNotification() instead_
এই মুহূর্তে অ্যান্ড্রয়েড এবং ডেস্কটপের জন্য বৈশিষ্ট্য সনাক্ত করার সর্বোত্তম উপায় হল নিম্নলিখিতগুলি করা:
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this \*before\* calling
Notification.requestPermission(), otherwise this feature detect would bug the
user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
এটি এভাবে ব্যবহার করা যেতে পারে:
if (window.Notification && Notification.permission == 'granted') {
// We would only have prompted the user for permission if new
// Notification was supported (see below), so assume it is supported.
doStuffThatUsesNewNotification();
} else if (isNewNotificationSupported()) {
// new Notification is supported, so prompt the user for permission.
showOptInUIForNotifications();
}