Hướng dẫn làm hiển thị thông báo trên Browser tab

Bài viết hướng dẫn cách hiển thị notification trên browser tab thường hay được các trang mạng xã hội sử dụng

Sử dụng Document Title

Chúng ta sẽ bắt đầu bằng việc gắn số thông báo trên tiêu đề trang giống như Facebook hay Twitter vẫn dùng.
Trong thực tế có rất nhiều cách để chúng ta có thể làm được việc này, trong bài này, chúng ta sẽ sử dụng javascript để làm việc này.

<script>
	var count = 0;
	var title = document.title;
	function changeTitle() {
		count++;
		var newTitle = '(' + count + ') ' + title;
		document.title = newTitle;
	}
	function newUpdate() {
		update = setInterval(changeTitle, 1000);
	}
	var docBody  = document.getElementById('site-body');
	docBody.onload = newUpdate;
	// Stop button
	function stop() {
  	clearInterval(update);
	}
	var btnStop  = document.getElementById('stop');
	btnStop.onclick  = stop;
</script>

var count = 0;

var title = document.title;

function changeTitle() {

count++;

var newTitle = '(' + count + ') ' + title;

document.title = newTitle;

}

function newUpdate() {

update = setInterval(changeTitle, 1000);

}

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

docBody.onload = newUpdate;

// Stop button

function stop() {

clearInterval(update);

}

var btnStop = document.getElementById('stop');

btnStop.onclick = stop;

</script>

Đầu tiên sử dụng biến count để đếm số notification.
Hàm changeTitle() sẽ làm nhiệm vụ thay đổi phần tiêu đề trang web, với mỗi khi có thông báo (notification) sẽ được tăng thêm 1.
Hàm newUpdate() sẽ làm nhiệm vụ cập nhật lại tiêu đề này với thời gian 1000 mili giây 1 lần.

Sử dụng favicon

Có thể sử dụng favicon để làm cho phần notification của chúng ta thêm đẹp hơn bằng đoạn mã sau.

<script>
	var icon        = 'img/favicon.gif?v3';
	var iconNew     = 'img/favicon-dot.gif?v5';
	// var iconAnimate = 'img/favicon-dot-animated.gif?v4'; // does not work in Chrome
	function changeFavicon() {
		document.getElementById('favicon').href = iconNew;
		// document.getElementById('favicon').href = iconAnimate; // does not work in Chrome
	}
	function newUpdate() {
		update = setInterval(changeFavicon, 3000);
		setTimeout(function( ) { clearInterval( update ); }, 3100);
	}
	var docBody  = document.getElementById('site-body');
	docBody.onload = newUpdate;
	// 
	function reset() {
		document.getElementById('favicon').href = icon;
	}
	var btnReset = document.getElementById('reset');
	btnReset.onclick = reset;
</script>

var icon = 'img/favicon.gif?v3';

var iconNew = 'img/favicon-dot.gif?v5';

// var iconAnimate = 'img/favicon-dot-animated.gif?v4'; // does not work in Chrome

function changeFavicon() {

document.getElementById('favicon').href = iconNew;

// document.getElementById('favicon').href = iconAnimate; // does not work in Chrome

}

function newUpdate() {

update = setInterval(changeFavicon, 3000);

setTimeout(function( ) { clearInterval( update ); }, 3100);

}

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

docBody.onload = newUpdate;

function reset() {

document.getElementById('favicon').href = icon;

}

var btnReset = document.getElementById('reset');

btnReset.onclick = reset;

</script>

Sử dụng favico.js

Cuối cùng, sử dụng thư viện javascript gọi file favico.js được phát triển bởi Miroslav Magda

<script>
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;
// Stop button
function stop() {
	clearInterval(update);
}
var btnStop  = document.getElementById('stop');
btnStop.onclick  = stop;
</script>

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;

// Stop button

function stop() {

clearInterval(update);

}

var btnStop = document.getElementById('stop');

btnStop.onclick = stop;

</script>

Tổng kết

Như vậy chúng ta đã có thể tạo số thông báo trên browser Tab cực kỳ tiện lợi thông qua một vài đoạn code đơn giản. Hy vọng tip này sẽ giúp ích cho bạn trong các thiết kế sau này.

[Tips] hiển thị thông báo trên Browser tab

Sử dụng Document Title

Sử dụng favicon

Sử dụng favico.js

Tổng kết

Like this:

Có liên quan

Nguyễn Trung Hiếu

Sử dụng Document Title

Sử dụng favicon

Sử dụng favico.js

Tổng kết

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu