زمان مطالعه:  حدود 5 دقیقه

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

روش های متفاوتی برای نمایش اطالاعیه ها وجود داره که چند مورد اون رو بررسی خواهیم کرد. شبکه های اجتماعی مثل فیس بوک، تویتر و LinkedIn به دلیل این که ممکنه در لحظه حجم بالایی از اطلاعیه ها رو دریافت کنن، شماره تعداد اطلاعیه ها را در سربرگ مرورگر نمایش میدن. وبسایت Trello اما اطلاعیه ها رو با قرار دادن یک دایره قرمز کوچک (نشان) در کنار فاوآیکون (ویکی پدیا فارسی) نمایش میده.


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

با استفاده از Document Title


اول شروع می کنیم مثل شبکه های اجتماعی فیس بوک و تویتر، عدد اطلاعیه ها رو در سربرگ نشون بدیم. این روش همون طور که گفتم برای شبکه های اجتماعی مناسب تره، چون ممکنه در مدت زمان کوتاهی حجم زیادی اطلاعیه برای کاربر ارسال بشه.

در یک روش عملی تر و یک پروژه جدی ممکنه ما اطلاعات رو از هر راه و در هر تعدادی بگیریم (در این زمینه باید با دوستان توسعه دهنده خودتون مشروت کنید). در این مورد آموزشی فرض رو بر این قرار میدیم که تعداد بروز رسانی ها رو دریافت کردیم و می خوایم با جاوا اسکریپت اون رو نشون بدیم. حالا، ما تعداد پیش فرض اطلاعیه ها رو صفر عدد در نظر می گیریم و اون رو در یک متغییر می ریزیم :
var count = 0;
بعد به حیاتی ترین بخش کد هامون یعنی عنوان سربرگ (document.title) میرسیم. برای اینکه مقدار عنوان سربرگ جاری رو همیشه و به راحتی داشته باشیم اون رو در یک متغییر به اسم title می ریزیم، به شکل ریز :
var title = document.title;
حالا ما یک تابع برای تغییر مقدار رشته (متن) در عنوان سربرگ ایجاد میکنیم : 
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
همون طور که می بینید، از  اپراتور ++ جاوا اسکریپت استفاده کردم. برای این از ++ استفاده کردم چون باعث میشه مقدار متغییر count ما در هر بار اجرا تابع یک  (1) واحد افزایش پیدا کنه. ما برای متغییر خودمون مقدار اولیه 0 رو در نظر گرفتیم و حالا اگر یک بار تابع اجرا بشه مقداری اون عدد 1 خواهد بود. از اون جایی که ما به یک API برای به دست آوردن تعداد واقعی اطلاعیه ها دسترسی نداریم، از اپراتور ++ برای شبیه سازی افزایش تعداد عدد اطلاعیه ها استفاده کردیم. 

حالا یک تابع دیگه ایجاد میکنیم که برای ما تابع changeTitle() رو اجرا کنه : 
function newUpdate() {
update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;
در تابع بالا فرض کردیم می خوایم هر 2000 میلی ثانیه (2 ثانیه) یک بار اطلاعیه جدید داشته باشیم. تابع ما یعنی changeTitle() به طور منظم در فاصله زمانی مشخصی تکرار میشه. در ادامه هم کدی رو نوشتیم که تا صفحه بارگذاری شد تابع رو اجرا کنه.



روشی که توضیح دادیم کاملا ساده بود. عدد تعداد اطلاعیه ها رو بدست آوردیم و همون عدد رو در سربرگ مرورگر چاپ کریدم. درضمن شما میتونید وابسته به سلیقه خودتون به جای استفاده از ( ) برای تعداد اطلایه ها از [ ] یا { } هم استفاده کنید، کافیه یه تغییرات کوچیک در تابع changeTitle() ایجاد کنید.

با استفاده از فاوآیکون

حالا در روش دوم یاد میگیریم فاوآیکون رو تغییر بدیم (مثل برنامه تحت وب Trello). برای این کار ما به دو تا فاوآیکون نیاز دایم، اولی در حالت عادی که خبری از هیچ اطلاعیه ای نیست و دومی برای وقتی که اطلاعیه جدید برای کاربر اومده.



برای این کار لازمه تا اول فاوآیکون اولیه (در حالت عادی بدون اطلاعیه) را به سند (صفحه وب) خدمون لینک کنیم.

<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>

حالا مسیر فاوآیکون جدید رو در یک متغییر جاوا اسکریپت قرار میدیم.

var iconNew = 'img/favicon-dot.gif';
دقیقا مثل روش اول ما دو تا تابع ایجاد میکنیم:
function changeFavicon() {
document.getElementById('favicon').href = iconNew;
}
function newUpdate() {
update = setInterval(changeFavicon, 3000);
setTimeout(function() {
clearInterval( update );
}, 3100);
}

var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;
تابع اول، changeFavicon() فاوآیکن اولیه رو با فاوآیکونی که یک نقطه قزمز (نشان) داره جایگزین میکنه. تابع دوم، newUpdate() کنترول میکند تا تابع اول دریک زمان مشخص انجام بشه.



روش دوم از روش اول سخت تر نبود; درسته ؟ در واقع این روش از تغییر رشته درون سربرگ مرورگر که در روش اولن امجام دادیم خیلی ساده تر بود. به علاوه، شما میتوانید با خلاقیت بیشتری فاوآیکون دوم را طراحی کنید. به طور مثال شما میتونید فاوآیکون دوم رو با یک نقطه قرمز چشمک زن قرار بدین(در این مورد یکم باید دقت کنید) یا اصلا ممکنه تمام رنگ فاوآیکون و آیکون رو تغییر بدین.

توجه :  مرورگر گوگل کروم (Chrome) از فاوآیکون های انیمشینی GIF پشتیبانی نمیکنه.

با استفاده از Favico.js

به عنوان آخرین روش، میخوایم از یک کتابخونه جاوا اسکریپت که به اون Favico.js میگن و توسط  Miroslav Magda نوشته شده، استفاده کنیم. این کتابخونه ویژگی های زیادی رو به ما میده که حتی میشه براش مطلب جدا داخل وبلاگ درست کرد. یکی از ویژگی هایی جالب این کتابخونه که قصد بررسی اون رو داریم، نشون دادن عدد اطلاعیه ها همراه علامت در فاوآیکون هست (میشه گفت ترکیبی از دو روش بالا).


برای شروع، با استفاده از جاوا اسکریپت ما شئ Favico را تعریف میکنیم که شامل رنگ پس زمینه، نوع انیمیشن، رنگ متن و موقعیت نشان در فاوآیکون باشه.

var favicon = new Favico({
position :'up',
animation :'popFade',
bgColor :'#dd2c00',
textColor :'#fff0e2'
});

حالا چندتا تابع می نویسیم که شئ ما رو اجرا کنه و درنهایت اون نشان دلخواهی رو میخواییم برامون در فاوآیکون اجرا کنه.

var num = 0;
function generateNum() {
num++;
return num;
}

function showFaviconBadge() {
var num = generateNum();
favicon.badge(num);
}

function newUpdate() {
update = setInterval(showFaviconBadge, 2000);
}

var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

این کد تا حدودی شبیه به همون روش اولی بود که انجام دادیم. اول با ایجاد یک تابع اون اعداد فرضی رو که میخواستیم در نشان (همراه فاوآیکون) نوشن بدیم رو شبیه سازی کردیم. در تابع دوم که همون showFaviconBadge() باشه، اعداد رو در نشان و نشان رو در کنار فاوآیکون قرار دایدم. تابع آخر که newUpdate() باشه، میاد و در زمان مشخصی تابع دوم رو اجرا میکنه تا بتونیم دریافت اطلاعیه ها رو شبیه سازی کنیم. خط آخر هم ناگفته پیداست که تابع newUpdate() رو به محض بارگذاری صفحه اجرا میکنه.



در نهایت

داخل این آموزش، یاد گرفتیم که چه طور از سربرگ مرورگر به عنوان یک رسانه برای اطلاع دادن به کاربر استفاده کنیم. ما روش های مختلفی که در وبسایت های محبوب مثل تویتر، فیس بوک و برنامه تحت وب Trello استفاده شدن رو با یه سری محدویت ها بازسازی کردیم.

باز هم ممکنه شما دوست داشته باشید یک سری تغییرات اعمال کنید که این روش ها با برنامه تحت وب شما سازگار تر بشه ولی در نهایت این مثال ها یک شورع خوب بودن و امیدوارم ازشون لذت برده باشد.


ترجمه  آزاد  از  وبسیات  tutsplus.com