مقدمة
تتيح لك Notifications API عرض إشعارات للمستخدم بشأن أحداث معيّنة، سواء بشكل غير مباشر (رسائل إلكترونية أو تغريدات أو أحداث تقويم جديدة) أو عند تفاعلات المستخدم بغض النظر عن علامة التبويب التي يتم التركيز عليها. تتوفّر مسودة مواصفات، ولكنها غير متوفرة حاليًا في أي معيار.
يمكنك اتّباع هذه الخطوات البسيطة لتفعيل الإشعارات في غضون بضع دقائق:
الخطوة 1: التحقّق من توفّر واجهة برمجة التطبيقات Notifications 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: السماح للمستخدم بمنح الأذونات لموقع إلكتروني لعرض الإشعارات
ستؤدي أي من دوال الإنشاء التي ذكرناها إلى ظهور خطأ أمان إذا لم يمنح المستخدم يدويًا أذونات للموقع الإلكتروني لعرض الإشعارات.
للتعامل مع الاستثناء، يمكنك استخدام عبارة try-catch، ولكن يمكنك أيضًا استخدام طريقة 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);
في هذه المرحلة، قد تحتاج إلى تغليف كل هذه الأحداث والإجراءات لإنشاء فئة الإشعارات الخاصة بك من أجل الحفاظ على نظافة الرمز البرمجي، على الرغم من أنّ ذلك يتجاوز نطاق هذا البرنامج التعليمي.