مقدمه
رابط برنامهنویسی کاربردی اعلانها (Notifications API) به شما امکان میدهد اعلانها را برای رویدادهای مشخص، چه به صورت غیرفعال (ایمیلهای جدید، توییتها یا رویدادهای تقویم) و چه بر اساس تعاملات کاربر، صرف نظر از اینکه روی کدام تب فوکوس شده است، به کاربر نمایش دهید. پیشنمایشی از مشخصات آن وجود دارد، اما در حال حاضر در هیچ استانداردی وجود ندارد.
شما میتوانید این مراحل ساده را برای پیادهسازی اعلانها تنها در چند دقیقه دنبال کنید:
مرحله ۱: بررسی پشتیبانی از 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.");
}
مرحله ۲: به کاربر اجازه دهید به یک وبسایت مجوز نمایش اعلانها را بدهد
هر یک از سازندههایی که ذکر کردیم، در صورتی که کاربر به صورت دستی مجوزهای نمایش اعلانها را به وبسایت اعطا نکرده باشد، خطای امنیتی ایجاد میکنند. برای مدیریت این خطا میتوانید از دستور 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 یک نوار اطلاعات (infobar) نمایش میدهد:
با این حال، بسیار مهم است که به یاد داشته باشید که متد requestPermission فقط در کنترلکنندههای رویدادی که توسط یک اقدام کاربر، مانند رویدادهای ماوس یا صفحهکلید، ایجاد میشوند، کار میکند تا از نمایش نوارهای اطلاعات ناخواسته جلوگیری شود. در این حالت، اقدام کاربر کلیک روی دکمهای با شناسه "show_button" است. قطعه کد بالا هرگز کار نخواهد کرد اگر کاربر در مقطعی به صراحت روی دکمه یا پیوندی که requestPermission فعال میکند، کلیک نکرده باشد.
مرحله ۳: شنوندهها و سایر اقدامات را ضمیمه کنید
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);
در این مرحله، ممکن است بخواهید تمام این رویدادها و اقدامات را با ایجاد کلاس اعلان خود کپسولهسازی کنید تا کد تمیزتر بماند، اگرچه این موضوع فراتر از محدوده این آموزش است.