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