راهنمای افزودن نوتیفیکیشن به وب‌سایت

رابط کاربری نوتیفیکیشن در پلتفرم موبایلی، دسکتاپ و وب بخشی از تجربه تعامل دیجیتالی ما بوده است. دریافت این نوتیفیکیشن‌ها در پلتفرم وب مخصوصاً به واسطه Notification API و در مرورگر امکان‌پذیر است.

Notification API ابتدا در OS X Mountain Lion در دسترس قرار گرفت؛ اما حالا همه مرورگرهای امروزی و مدرن ازجمله اوپرا و Edge از آن پشتیبانی می‌کنند. Notification API همه وب‌سایت‌های معمولی و اپلیکیشن‌های مبتنی بر وب را مانند Slack و Intercom قادر می‌سازد هرگاه پیام وارده وجود دارد یا کسی در بازخوردی به حساب کاربری‌تان اشاره می‌کند، نوتیفیکیشن را به شما نشان دهد. این نوع نوتیفیکیشن در macOS در گوشه بالا سمت راست به نمایش درمی‌آید و پس از مدت کوتاهی هم پنهان می‌شود. برای دسترسی به همه نوتیفیکیشن‌ها باید به Notification Center مراجعه کنید.

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

اجازه ارسال نوتیفیکیشن

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

window.Notification.permission

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

کاربران می‌توانند دریافت نوتیفیکیشن را بعداً یا هر زمان دیگری که در نظر دارند و از زبانه تنظیمات مرورگر با ورود به Preference لغو کنند.

اجرای نوتیفیکیشن

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

در کدهای قبلی تابعی به نام notifyMe ایجاد کردیم تا تابع Notification را در برگیرد. بدین ترتیب می‌توانیم دو برهان title و options را به وجود بیاوریم.

سپس کافی است تنها این برهان‌ها را به آنچه می‌خواهیم در نوتیفیکیشن به نمایش درآید، تغییر دهیم. در این مثال، می‌خواهیم title را به Hello World تغییر دهیم و عبارت Welcome to our website را جایگزین options کنیم.

اگر کاربران هنوز اجازه دریافت نوتیفیکیشن را صادر نکرده‌اند، Safari ابتدا امکان صدور اجازه را به شکل Allow یا Don’t Allow و در قالب نوتیفیکیشن برای کاربران به نمایش درمی‌آورد.

به محض صدور اجازه توسط کاربر، نوتیفیکیشن مانند تصویر زیر به نمایش درمی‌آید.

رویداد

علاوه بر مورد مذکور، می‌توانیم نوتیفیکیشن را در رویدادهایی و به همین مناسبت به نمایش درآوریم. برای مثال با استفاده از روش jQuery.on تنظیمات را به شکلی نهایی می‌کنیم که نوتیفیکیشن با کلیک کردن کاربر به نمایش درآید.

کلام آخر

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