چگونه از Notification API مرورگرها استفاده بکنیم؟

همه ما تجربه یک بار استفاده از نوتیفیکشن‌های مرورگر را داریم؛ اگر به وبسایتی مانند فیسبوک رفته باشید، مطمئنا با آن‌ها برخورد داشته‌اید، چرا که فیسبوک در وبسایت خود از Notification API استفاده می‌کند. در حقیقت این یک نوع Push Notification تحت دسکتاپ است.

تصور بکنید که در شبکه‌ای اجتماعی یکی از دوستان‌تان به شما پیغامی فرستاده، این در حالی‌ست که شما مشغول بازی کردن هستید، در هر حالتی که باشید، نوتیفیکشن به دست شما خواهد رسید. پیاده‌سازی این کار با استفاده از یکسری API که ما به آن Notification API می‌گوییم مقدور است. نوتیفیکشن در این حالت روی دسکتاپ شما ظاهر می‌شود.

پشتیبانی مرورگر

در حال حاضر تمام مرورگرها از این موضوع پشتیبانی نمی‌کنند، اما مرورگرهای پرطرفدار مانند کروم، موزیلا و سافاری به خوبی توانایی کار با این سری از APIها را دارند.

نگاهی به این API

برای ایجاد یک نوتیفیکیشن جدید، ما باید یک نمونه جدید را از شئ نوتیفیکیشن ایجاد کنیم، این شئ دو پارامتر را در ابتدا می‌گیرید:

var notification = new Notification(title, options)

همانطور که مشاهده می‌کنید، اولین مورد عنوان است. در حقیقت اولین چیزی که کاربر با یک متن بولد شده می‌بیند دقیقا همین عنوان است. پارامتر دوم نیز بحث options است که ما می‌توانیم در آن چندین خاصیت مختلف را قرار دهیم:

• dir: جهت اصلی متن در نوتیفیکشن؛ می‌تواند auto، ltr و یا rtl باشد.
• lang: برای تعریف زبانی که نوتیفیکیشن از آن استفاده می‌کند، می‌توان به آن مقداری مانند fa-IR دارد.
• body: محتوایی که می‌خواهید در بدنه رویداد به کاربر نمایش داده شود.
• tag: می‌توانید با استفاده از tag یک ID را به یک نوتیفیکشن بدهید.
• icon: با استفاده از این خاصیت می‌توانید یک آیکون را برای رویدادتان تعریف کنید.

همراه با این API ما یکسری event handler را نیز در اختیار داریم که می‌شود از آن‌ها استفاده کرد:

• Notification.onclick: هر زمان که کاربر روی یک رویداد کلیک کرد،‌ این رویداد فراخوانی شده و شما می‌توانید برای آن کارکردی ایجاد کنید.
• Notification.onshow: وقتی که رویداد نمایش داده شود، این رویداد فعال می‌شود.
• Notification.onerror: هر زبان که رویداد با یک خطا مواجه شود، این رویداد فعال می‌گردد.
• Notification.onclose: زمانی که نوتیفیکیشن بسته شود این رویداد فعال خواهد شد.

با استفاده کردن از این ابزارها، شما واقعا می‌توانید در ساخت نوتیفیکیشن‌ها خلاقیت به خرج دهید و چیزهای جذابی را بسازید.

ایجاد یک رویداد

در این مثال قصد داریم یک نوتیفیکیشن را به یک دکمه متصل کنیم، منظور این است که در زمان کلیک کردن روی یک دکمه این رویداد نمایش داده می‌شود. 

دکمه‌ای که قصد ایجاد آن را داریم به این شکل خواهد بود:

<button class="notification”>Give me one notification!</button>

این تمام HTMLای‌ست که ما به آن نیاز داریم. حال باید سراغ جاوااسکریپت برویم تا نوتیفیکیشن مورد نظرمان را نمایش دهد.

اولین چیزی که به آن نیاز داریم یک رویداد کلیک است، همچنین باید ببینیم که آیا مرورگر از قابلیت نوتیفیکیشن پشتیبانی می‌کند یا خیر:

$('.notification').click(function() {
  if (!("Notification" in window)) {
    console.log(“We had some notifications for you but your browser can’t show them.");
  }
});

حال ما یک event listener را به دکمه خود اضافه کردیم و همچنین پشتیبانی Notification در مرورگر را بررسی نمودیم، اگر مرورگر از این قابلیت پشتیبانی نکند، یک پیغام هشدار در قسمت console به کاربر نمایش داده خواهد شد. 

قسمت بعدی باید بررسی مجوز کاربر در جهت نمایش رویداد را بررسی کنیم. باید ببینیم که آیا کاربر به ما اجازه نمایش رویداد را داده یا خیر:

else if (Notification.permission === "granted") {
   var notification = new Notification();
}

در صورتی که این اجازه داده شد، ما یک شئ جدید از notification ایجاد می‌کنیم.

حال باید قبل از بررسی آنکه خود permission برابر با granted است یا خیر، از کاربر یک بار درخواست ارائه مجوز بکنیم. برای اینکار به صورت زیر باید عمل شود:

Notification.requestPermission(function (permission) {
   if(!('permission' in Notification)) {
     Notification.permission = permission;
  }
});

همانطور که مشاهده می‌کنید، می‌توان دید که ما از کاربر درخواست ارائه مجوز را کرده‌ایم، حال باید منتظر پاسخ کاربر باشیم. اگر کاربر به ما اجازه بدهد، دستور زیر اجرا خواهد شد:

if (permission === "granted") {
   var notification = new Notification();
}

حال که ما درخواست notification خود را ایجاد کردیم، نیاز است که آن را پر نماییم. در این مثال ما تنها قرار است که یک عنوان ساده همراه با یک متن و یک آیکون را نشان دهیم:

var notification = new Notification('A notification’, {body: 'And a great one!’, icon: 'http://placekitten.com/100/100'});

مطمئنا می‌شود کارهای بسیار زیاد دیگری با استفاده از این امکانات کرد، اما در این مطلب به خوبی شما با پایه‌های کاری این سیستم آشنا شدید و حال می‌دانید که روند کلی این حالت به چه شکلی خواهد بود. شما می‌توانید از این رویداد در اپلیکیشن‌های مختلفی که مبتنی بر جاوااسکریپت هستند استفاده کنید. همچنین با استفاده از مواردی که به عنوان دومین پارامتر در شئ Notification قرار می‌گیرد می‌توانید کارهای مختلف بیشتری را انجام دهید. در ارتباط با این موضوع نیز پیشتر صحبت کردیم.

منبع