15
تشکر

آشنایی با Notification API در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

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

در ادامه مطلب همراه ما باشید…

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

این API هنوز در حالت پیشنویس (Working Draft) است، اما مرورگر Chrome +22 و Firefox +22 و Safari +6 از این API پشتیبانی میکنند. اطلاعات بیشتر

برای اینکه بفهمیم که مرورگر کاربر از این API پشتیبانی میکند یا خیر باید مقدار notification را در شی window جستجو کنیم. مانند زیر:

if(window.Notification) {
  //Supported
} else {
  //Not supported
}

نحوه کار

تنها با اجرا کردن کد زیر میتوانیم یک پیغام جدید ایجاد کنیم.

new Notification("Hi there!");

اما ممکن است کاربر قبلا سایت اجازه سایت ما را برای استفاده از این API گرفته باشد، بنابراین ابتدا باید چک کنیم که آیا سایت اجازه استفاده از این API را دارد یا خیر، و در صورتی که این اجازه را نداشت درخواست اینکار را برای کاربر ارسال کنیم.

برای پیدا کردن نوع دسترسی از Notification.permission استفاده میکنیم. این خاصیت یا مقدار granted به معنی اجازه داشتن و یا مقدار denied به معنی اجازه نداشتن را برمیگرداند.

if(Notification.permission == 'granted') {
  var notification = new Notification("New message");
} else {
  Notification.requestPermission();
}
Notification API

Notification API

تنظیمات

میتوانیم کمی ظاهر Notification را نیز تغییر دهیم. در واقع فقط میتوانیم direction را تغییر و همچنین یک آیکون اضافه کنیم. اینکار با اضافه کردن یک object از تنظیمات به Notification انجام میشود.

var options = {
  icon: 'icon.png',
  dir: 'rtl'
}

if(Notification.permission == 'granted') {
  var notification = new Notification("شما یک پیام جدید دارید.", options);
} else {
  Notification.requestPermission();
}
Notification API

Notification API

رویداد ها

ٔNotification API چهار رویداد دارد: onclick, onshow, onerror, onclose، که هر کدام از آنها با توجه به اسم آن در زمان مشخص اجرا میشوند. برای مثال در کد زیر از رویداد onclose استفاده کردیم.

var notification = new Notification("New message");
notification.onclose = function() {
  console.log('closed');
}

مشاهده دمو

لینک های مفید

MDN: Notification API
Using the Notifications API – html5rocks

  • مسعود می‌گه:

    این یک ثانیه میاد و میره میخوام تا کاربر روش کلیک نکرده نمایش داده بشه

  • مسعود می‌گه:

    چطوری تو یه صفحه php صداش بزنم یا فراخوانی کنم ؟؟؟؟؟؟؟
    لطفا

  • mahdikhanzadi می‌گه:

    قسمت تشکر سایت کار نمیکنه , بررسی کنید مشکلش چیه , برا همین مطلب هرچی تشکر زدم کار نکرد و صفر باقی موند

  • mahdikhanzadi می‌گه:

    توی سایت موزیلا نوشته که این دستور برای موزیلا 22 به بالا هست !!!! پس فعلا بلا استفاده هست چون به جز موزیلا اینترنت اکسپلورر رو هم باید در نظر گرفت اخه وقتی یه سایتی برا شرکتی طراحی میشه کاربرای اون سایت نمیدونن موزیلا چیه اینترنت اکسپلورر چیه و همینجوری با هر مرورگری میان تو سایت و اگه قرار باشه از اخرین تکنولوژی برای ساختن سایت استفاده بشه سایت برا هرکس یه جاش کار میکنه ده تا جاش کار نمیکنه

    • محمد جهانی می‌گه:

      خب شما میتونی به راحتی با یه شرط کوچیک وجود این امکان رو بررسی کنی و در صورت وجود، از اون استفاده و در صورت عدم وجود، از روش‌های جایگزین بهره ببری. اینکه بخوایم برای یه جماعت خاص و محدود، خودمون رو عقب نگه داریم و به جلو پیش نریم، به نظر من اشتباهه. نکته بعدی اینه که شما برای طراحی هر وبسایت میبایست مخاطبتون رو هم در نظر بگیرید. به عنوان مثال برای همین وبسایت چون کاربرا و خواننده‌هاش عموماً افراد مطلعی هستن، استفاده از امکانات مرورگرهای جدید مشکل خاصی ایجاد نمیکنه. در نهایت اگه استفاده از این موارد لازم و ضروری بود و نبودشون به کارکرد وبسایت یا اپلیکیشنتون ضربه میزد، میتونید از کاربر درخواست کنید که مرورگر خودش رو عوض کنه و یه لیست از مرورگرها بهش بدید تا دانلود و نصب کنه. موفق باشید. (:

  • mahdikhanzadi می‌گه:

    کاش اون قمست اپشنش رو بیشتر توضیح میدادید , به هر حال رفتم از منبعش که گذاشتید نگاه کردم متوجه شدم.
    نسبت به دستور الرت alert خیلی بهتره چون میشه قسمت های مختلفش رو کنترل کرد ولی زیاد کاربردی نیست مثلا ما میتونیم یک تگ div بسازیم بعد هروقت خواستیم پیغامی رو در صفحه نشون بدیم اون رو با جاوا اسکریپت ظاهرش کنیم , هم بهتره و هم توسط همه مرورگر ها پشتیبانی میشه و هم میشه ظاهرش رو هرجور دوس داریم طراحی کنیم


  • نظرات این مطلب بسته است.