با استفاده از Notifications API

ارنست دلگادو

توییتر

معرفی

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 خود را برای تمیزتر نگه داشتن کد کپسوله کنید، اگرچه این خارج از محدوده این آموزش است.