Web Notification API که در Javascript قرار داده شده، به شما این اجازه رو میده که Notificationهای مختلف با محتویات مورد نظر خودتون رو به کاربران چه در مرورگرهای Desktop و چه در مرورگرهای Mobile نمایش بدین. پشتیبانی مرورگرها از Web Notification API بصورت کامل نیست.
همونطور که میبینید همه مرورگرها این ویژگی رو پشتیبانی نمیکنن و فقط مرورگرهای جدید از اون پشتیبانی میکنن. به احتمال زیاد شما خیلی زیاد با این نمونه از Notificationها در سایتهای مختلف روبرو شده اید. بدلیل اینکه Web Notification API هنوز بصورت کامل پشتیبانی نمیشه، ما از ابزار Open source بنام Push.js استفاده میکنیم که همه کارهای مورد نظر رو برای ما انجام میده و امکانات ویژه زیادی رو نیز در اختیارمون میزاره.
در ابتدا یک فایل بنام notification.html میسازیم و کدهای زیر رو درونش قرار میدیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browser Notification with Push.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#demo-btn {
padding: 18px;
color: #fff;
background-color: #1E88E5;
outline: 0;
border: 0;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
opacity: 0.9;
border-radius: 4px;
margin: 45px auto;
display: block;
font-weight: bold;
}
</style>
</head>
<body>
<button id="demo-btn">Show notification</button>
</body>
</html>
همونطور که دیدید کدهای ابتدایی رو قرار دادیم و به دکمه مورد نظر، استایل هایی رو اعمال کردیم. حالا میخوایم با کلیک بر روی این دکمه، Notificationهای مورد نظر ما نمایش داده بشن. در ابتدا باید ابزار Push.js رو وارد فایل html خودمون بکنیم. برای اینکار از cdn استفاده میکنیم. بصورت زیر:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.13/push.min.js"></script>
درخواست اجازه از کاربران:
کاربرانی که وارد سایتتون میشن، باید قبل از نمایش Notificationها به سایت شما این اجازه رو بدن که شما امکان نمایش Notification به اونا رو داشته باشید. اینکار به وسیله پیام از قبل ساخته شده توسط مرورگر، انجام میشه که احتمالا زیاد با اون روبرو شده اید.
ابزار Push.js بصورت اتوماتیک، زمانی که بخواید اولین Notification رو بفرستید، از کاربران اجازه میگیره و جوابی که کاربر به این سایت میده رو مرورگر ذخیره میکنه. علاوه بر این، شما بعضی اوقات قصد دارید که بصورت دستی و شخصی، این درخواست اجازه رو از کاربران داشته باشید. برای اینکار بصورت زیر عمل میکنیم:
Push.Permission.request();
با اینکار میتونین از کاربرانتون بخواید که اجازه بدن یا بلاک کنن.
ساخت Notification:
برای ساخت و نمایش یک Notification میتونین از متد Push.create استفاده کنید. این متد تعدادی ویژگی و متد رو میگیره و مطابق با اونا، Notification رو میسازه. شما میتونین همه ویژگی‌ها و متدهای موجود رو در اینجا ببینید. کدهای زیر رو در نظر بگیرید:
Push.create('Hi there!', {
body: 'This is a notification.',
icon: '7l-logo.png',
timeout: 8000, // Timeout before notification closes automatically.
vibrate: [100, 100, 100], // An array of vibration pulses for mobile devices.
onClick: function() {
// Callback for when the notification is clicked.
console.log(this);
}
});
همونطور که میبینید عنوان این Notification رو Hi there قرار دادیم و متن بدنه اصلی اون رو هم درون body قرار دادیم. با استفاده از ویژگی icon میتونیم آیکون و تصویر مورد نظرمون رو برای Notification قرار بدیم و با استفاده از ویژگی timeout مشخص میکنیم که چند ثانیه بعد از باز شدن Notification، بصورت اتوماتیک بسته بشه. ویژگی vibrate هم فقط برای موبایل قابل استفاده است و باعث میشه زمانی که Notification نمایش داده میشه، دستگاه کاربر بصورت ویبره و لرزش در بیاد و کاربران بهتر Notification رو متوجه بشن. همونطور که دیدید متد onClick رو هم برای Notification قرار دادیم و با اینکار اگر بر روی Notification کلیک بشه، شئ مربوط به این پیام در Console نمایش داده میشه. حالا شما باید این پیام رو متناسب با رویداد مورد نظر خودتون نمایش بدین. مثلا ما میخوایم با کلیک بر روی دکمه ساخته شده، این پیام نمایش داده بشه. پس کدها بصورت زیر خواهند شد:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browser Notification with Push.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#demo-btn {
padding: 18px;
color: #fff;
background-color: #1E88E5;
outline: 0;
border: 0;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
opacity: 0.9;
border-radius: 4px;
margin: 45px auto;
display: block;
font-weight: bold;
}
</style>
</head>
<body>
<button id="demo-btn">Show notification</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.13/push.min.js"></script>
<script type="text/javascript">
Push.Permission.request();
document.getElementById('demo-btn').onclick = function () {
Push.create('Hi there!', {
body: 'This is a notification from 7Learn.com.',
icon: '7l-logo.png',
timeout: 8000, // Timeout before notification closes automatically.
vibrate: [100, 100, 100], // An array of vibration pulses for mobile devices.
onClick: function() {
// Callback for when the notification is clicked.
console.log(this);
}
});
};
</script>
</body>
</html>
با اینکار اگر بر روی دکمه مورد نظر کلیک کنیم، پیام زیر نمایش داده میشه:
به همین راحتی.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
واقعا دمتون گرم. خیلی سرچ کردم هیچ جا درست آموزش نداده بودن
بسیار ممنون
ممنون
در بعضی از سایتا دیدم که استایل دادن به نوتیفیکشن ها !
چطور انجام میشه |؟”
اگه میشه اون سایتی که میگید رو معرفی کنید تا دقیقتر پاسختون رو بدم
http://p30download.com/
این سایت از امکانات سایت آنلاین onesignal استفاده میکنه. سایت onesignal امکانات زیادی رو به صورت رایگان در اختیارتون قرار میده که میتونین Notification هاتون رو تقریبا در همه دستگاه ها و مرورگرها به خوبی نمایش بدین و با کاربرانتون ارتباط برقرار کنید. میتونین از امکانات این سایت برای وبسایت یا اپلیکیشن موبایل خودتون استفاده کنید.
موفق باشید