ایجاد قدم به قدم یک اعلان به کمک Notification constructor

چطور به کمک Notification API برای کاربر اعلان نمایش دهیم؟

در قسمت قبل از دوره «آموزش ارسال Notification در یک سایت»، در مورد راه های مختلف نمایش اعلان در مرورگر توضیح دادیم. در این مقاله سعی داریم تا قدم به قدم یک اعلان را به کمک Notification constructor ایجاد کنیم.

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

استفاده از Notification API با کمک Notification constructor (اعلان ایجاد شده به این روش با service worker جفت نمی شود(pair نمی شود) و از این رو به همراه آن، نمی توان از قابلیت های service worker استفاده کرد)
استفاده از Notification API با کمک مِتد showNotification که زیرمجموعه ی آبجکت service worker registration است. (اعلان ایجاد شده به این روش با service worker جفت می شود و در نتیجه service worker می تواند آن را ایجاد و تعامل کاربر با آن را مدیریت کند)

توجه داشته باشید قطع نظر از اینکه اعلان های در سطح سیستم عامل را با کدام یک از روش های بالا ایجاد می کنیم، این اعلان ها برای نمایش نیاز به اجازه ی کاربر دارند.

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

'Notification' in window

به تصویر زیر دقت کنید:

بررسی پشتیبانی مرورگر از Notification API — بررسی اینکه آیا مرورگر از Notification API پشتیبانی می کند یا نه

اگر این مقدار برابر true بود، به این معنیست که مرورگر از Notification API پشتیبانی می کند. در کل توصیه می کنیم برای اطلاع از اینکه چه مرورگر هایی از یک API پشتیبانی می کنند، به مستند آن API در سایت MDN مراجعه کنید. افزون بر آن، می توانید به سایت caniuse.com در این زمینه سری بزنید.

به قطعه کد ساده ی زیر دقت کنید:

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
   // status is "granted", if accepted by user
		 let n = new Notification('Title', {
			  body: 'I am the body text!',
			  icon: '/path/to/icon.png' // optional
		 })
	})
}

اجازه کاربر برای دریافت اعلان ضروریست

گفتیم قبل از این که بخواهیم به کاربر اعلان نمایش دهیم، باید از او اجازه (persmission) بگیریم. در قطعه کد بالا، خط زیر چنین کاری انجام می دهد:

Notification.requestPermission()

اگر کاربر از قبل اجازه ی ارسال اعلان را به مرورگر نداده باشد، با اجرای این دستور، یک پیام برای دریافت مجوز ارسال اعلان به او نمایش داده می شود.

مقدار این مجوز (Notification.permission) دو حالت می تواند داشته باشد:

granted : به این معنی که کاربر اجازه ی ارسال اعلان داده و می توانیم به او اعلان نمایش دهیم.
denied : به این معنی که کاربر اجازه ی ارسال اعلان نداده و نمی توانیم اعلانی نمایش دهیم.

با قبول کردن کاربر، این مقدار به ‘granted’ تغییر می یابد و با رد کردن کاربر این مقدار به ‘denied’ تغییر می کند.

چنانچه تا کنون کد ()Notification.requestPermission صدا نخورده باشد، این مقدار برابر ‘default’ خواهد بود. خوب است بدانیم این مجوز ها به ازای یک origin خاص صادر می شوند. یعنی هر origin ای که بخواهد برای ما اعلان ارسال کند، باید یک مجوز جداگانه دریافت کند. (در مورد مفهوم origin و تفاوت آن با آدرس یک سایت می توانید به این مقاله از سایت web.dev مراجعه کنید)

توجه داشته باشید با یک بار قبول یا رد این اجازه توسط کاربر، مقدار آن به ازای origin مربوطه در مرورگر ذخیره می شود و بعد ها به ازای صدا خوردن متد requestPermission، همان مقدار برگردانده خواهد شد. برای تغییر این مقدار لازم است که کاربر به تنظیمات مرورگر خود مراجعه کند و ... .

آبجکت Notification که توسط window ارائه می شود (زیر مجموعه ی window قرار دارد)، به ما این امکان را می دهد که اعلان ها را ایجاد کنیم و ظاهر آن را شخصی سازی کنیم.

قطعه کد زیر ساده ترین حالت ارسال یک اعلان برای کاربر است:

Notification.requestPermission()
new Notification('Hey')

برای شخصی سازی ظاهر Notification API راه هایی وجود دارد که به برخی از آنها اشاره می کنیم.

اضافه کردن body

معمولاً این قسمت را به صورت تک خط نمایش می دهند:

new Notification('Hey', {

  body: 'You should see this!'

})

اضافه کردن icon

با استفاده از این ویژگی، می توانیم یک آیکون به اعلان خود اضافه کنیم:

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

همچنین برای مطالعه ی بیشتر در مورد قابلیت های این API می توانید به مستند سایت MDN مراجعه کنید.

بستن اعلان

اگر بخواهیم اعلانی را که نمایش داده ایم ببندیم، نیاز داریم که اعلان خود را در یک متغیر ذخیره کنیم تا بعداً بتوانیم به آن ارجاع دهیم و از آن استفاده کنیم. قطعه کد زیر را ملاحظه کنید:

const notification = new Notification('Hey')

بعداً می توانیم با استفاده از کد ()notification.close اعلان باز شده را ببندیم.

در قسمت بعد از سری مقاله های «آموزش ارسال Notification در یک سایت»، می خواهیم قدم به قدم یک اعلان را به کمک Notification constructor ایجاد کنیم.