چگونگی استفاده از API نوتیفیکیشن در وبسایت
نوتیفیکیشن، اینترفیس دیجیتالی و تعاملی، در دسکتاپ و تلفنهای همراه و همچنین در وب میباشد. استفاده از اینترفیس نوتیفیکیشن در وبسایتتان، با API نوتیفیکیشن در مرورگر امکان پذیر است.
API نوتیفیکیشن برای اولین بار در OS X در دسترس بود و اکنون توسط تمامی مرورگرهای مدرن، پشتیبانی میشود. این API به وبسایتها و وب اپلیکیشنها این امکان را میدهد تا هنگام دریافت پیام جدید یا هر اتفاق خاص دیگر در اکانت کاربر، به آن نوتیفیکیشن ازسال کنند. این نوتیفیکیشن در macOS، مانند عکس زیر در قسمت بالا سمت راست صفحه نمایش داده خواهد شد و پس از زمان مشخصی پنهان خواهد شد.
در ادامه به یادگیری نحوه استفاده از این API خواهیم پرداخت.
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۵۹ هزار تومان
اجازه استفاده از API نوتیفیکیشن
ابتدا بریم سراغ دریافت اجازه نمایش نوتیفیکیشن از کاربر. قبل از اینکه به کاربران سایت نوتیفیکیشن نمایش دهیم، کاربران باید این اجازه را به ما بدهند. نوتیفیکیشن شامل سه سطح default ،granted و denied میباشد. برای چک کردن سطح اجازه ما برای نوتیفیکیشن، میتوانیم کد زیر را در کنسول مرورگر بنویسیم:
window.Notification.permission
با استفاده از کد بالا، سطح فعلی مجوزمان برای نمایش نوتیفیکیشن را در کنسول چاپ کردیم که برای من مقدار granted نمایش داده شد.
کاربران میتوانند نوتیفیکیشن ها را بعدا بوسیله گزینهای که در اختیار خواهند داشت deny یا رد کنند. همچنین در هر زمان که خواستند میتوانند از تنظیمات مرورگر، نوتیفیکیشن ها را قطع کنند.
اجرای API نوتیفیکیشن
با استفاده از آبجکت Notification در API نوتیفیکیشن، میتوانیم پیغام مورد نظر را به کاربر نمایش دهیم. به کد زیر توجه نمایید:
function notifyMe( title, options ) { // Check if the browser supports notifications if ( ! ( 'Notification' in window ) ) { $( '.support, .no-permission, .notify-click' ).hide(); return; } $( '.no-support' ).hide(); // Check whether notification permissions have already been granted. if (Notification.permission === "granted") { $( '.no-permission' ).hide(); var notification = new Notification( title, options ); } // Otherwise, we need to ask the user for permission. else if (Notification.permission !== "denied") { Notification.requestPermission().then(function ( permission ) { if (permission === "granted") { $( '.no-permission' ).hide(); var notification = new Notification( title, options ); } }); } }
در کد بالا، یک فانکشن بنام notifyMe ساختیم که دو پارامتر title و options را دریافت میکند. سپس به سادگی این پارامترها را با مقادیری که در نظر داشتیم در نوتیفیکیشن نمایش داده شوند، جایگزین میکنیم. من میخواهم به عنوان title مقدار “Hello World” و به عنوان محتوای نوتیفیکیشن در پارامتر option، مقدار “Welcome to our site” را نمایش دهیم:
notifyMe( 'Hi, there! 👋', { body: 'Welcome to our website' });
اگر کاربران مجوزهای نوتیفیکیشن را در مرورگرشان ست نکرده باشند، مرورگر برایشان دو گزینه Allow (تائید) و Block (رد) برای دریافت نوتیفیکیشنهای سایت، نمایش خواهد داد.
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۵۹ هزار تومان
در صورتی که کاربر سطح granted (مجاز) را برای نوتیفیکیشن ست کرده باشد، نوتیفیکیشن باید طوری که در عکس زیر میبینید نمایش داده شود.
Event
همچنین ما میتوانیم نوتیفیکیشنها را بر اساس وقوع یک Event در سایتمان، نمایش دهیم. در مثال زیر، با استفاده از متد on در JQuery، نمایش نوتیفیکیشن را برای هنگام کلیلک دکمهای با کلاس button ست کردیم:
۲ ۳ $('.button').on('click', function() { notifyMe( 'Hi, there 👋', { body: 'You\'ve just clicked the button.' }); });
نتیجه گیری
به این ترتیب میتوان پی برد که استفاده از API نوتیفیکیشن در وبسایتها و اپلیکیشنهایمان بسیار ساده است. در این مطلب بطور خیلی بیسیک و ساده نحوه بکارگیری آنرا یاد گرفتیم اما شما باید طبق نیاز خود، کدها را دوباره بنویسید. پشتیبانی مرورگرها از این API بسیار خوب است؛ در تمامی مرورگرهای مهم و مدرن و همچنین تعدادی مرورگر موبایل کار میکند. میتوانید از طریق لینک زیر سورس این API را دریافت کنید و طبق نیازتان آنرا سفارشی سازی کنید