مجله خبری هاست ایران » طراحی و توسعه » آموزش فعال کردن نوتیفیکیشن به وب‌سایت
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

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

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

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

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

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

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

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

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

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

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

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

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

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

نوتیفیکیشن در پنجره Notification مشخص می‌شود. کد زیر از نمونه کد Mozilla Developer Network استخراج‌شده، اما کمی تغییر در آن اجرا شده است.

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


مقاله مرتبط: راهنمای ارسال پوش نوتیفیکیشن از اپلیکیشن‌های Django


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

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

چگونه نوتیفیکیشن وب سایت را فعال کنیم

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

آموزش فعال کردنن نوتیفیکیشن در سایت

رویداد

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

کلام آخر

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

منبع startups.com
برچسب ها
ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه