المقدّمة
تسمح لك Notifications API بعرض إشعارات للمستخدم حول أحداث معيّنة، بشكل سلبي (رسائل إلكترونية جديدة، التغريدات أو أحداث التقويم) وحول تفاعلات المستخدم بغض النظر عن علامة التبويب التي يتم التركيز عليها. هناك مواصفات للمسودة، لكنها ليست متوفرة حاليًا بأي معيار.
ويمكنك اتباع هذه الخطوات البسيطة لتنفيذ الإشعارات في بضع دقائق فقط:
الخطوة 1: التأكّد من توفّر واجهة برمجة التطبيقات Notification API
نتحقق من توافق السمة webkitNotifications. تجدر الإشارة إلى أنّ اسم webkitNotifications هو جزء من مسودة مواصفات. وبدلاً من ذلك، ستحتوي المواصفات النهائية على دالة notifications().
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
الخطوة 2: السماح للمستخدم بمنح أذونات لموقع إلكتروني لعرض الإشعارات
ستعرض أي من منصات الإنشاء التي أشرنا إليها خطأ أمان إذا لم يمنح المستخدم أذونات لموقع الويب يدويًا لعرض الإشعارات.
للتعامل مع الاستثناء، يمكنك استخدام عبارة تجربة؛ ولكن يمكنك أيضًا استخدام الطريقة checkPermission للغرض نفسه.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
إذا لم يكن لدى تطبيق الويب أذونات لعرض الإشعارات، ستعرض طريقة requestPermission شريط معلومات:
ومع ذلك، من المهم جدًا تذكُّر أنّ طريقة requestPermission لا تعمل إلا في معالِجات الأحداث التي يشغّلها المستخدم، مثل أحداث الماوس أو لوحة المفاتيح، وذلك لتجنّب أشرطة المعلومات غير المرغوب فيها. في هذه الحالة، يكون إجراء المستخدم هو النقر على الزر الذي يحمل المعرف "show_button".
لن يعمل المقتطف أعلاه مطلقًا إذا لم ينقر المستخدم صراحةً على زر أو رابط يؤدي إلى تشغيل requestPermission في وقت ما.
الخطوة 3: إرفاق أدوات معالجة الحدث وإجراءات أخرى
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
في هذه المرحلة، قد ترغب في تضمين جميع هذه الأحداث والإجراءات لإنشاء فئة الإشعارات الخاصة بك للحفاظ على الرمز أكثر وضوحًا، على الرغم من أن هذا خارج نطاق هذا البرنامج التعليمي.