Hiển thị thông báo trình duyệt từ ứng dụng web

Chú ý: Chỉ được hỗ trợ bởi Chrome & firefix.

Demo

Chúng ta làm theo các bước sau đây:

Bước 1: Bắt đầu thông báo trình duyệt. 

Đoạn code này sẽ khởi tạo hệ thống thông báo trình duyệt.

document.addEventListener('DOMContentLoaded', function () {
    if (Notification.permission !== "granted"){
         Notification.requestPermission();
    }
});

Sau khi DOM được load hoàn tất thì đối tượng Notification sẽ kiểm tra quyền nhận thông báo của trình duyệt người dùng. Nếu quyền đó chưa được cấp thì đối tương Notification sẽ gửi yêu cầu cho phép trình duyệt nhận thông báo tới người dùng. Nếu người dùng cho phép thì chúng ta tiếp túc các bước tiếp theo.

Các bạn có thể tham khảo thêm tại https://developer.chrome.com/apps/notifications

if (Notification.permission !== "granted"){
    Notification.requestPermission();
}

Bước 2: Xây dựng hàm Notification.

function notifyBrowser(title,desc,url) {
	// Nếu notification không được cấp trên trình duyệt người dùng
	if (Notification.permission !== "granted"){
		Notification.requestPermission();
	}else{
		var notification = new Notification(title, {
			icon:'http://example.com/logo.png',
			body: desc,
		});
		/* Sự kiện khi click vào notification .*/
		notification.onclick = function () {
			window.open(url); 
		};
		/* Hàm Callback khi người dùng đóng notification. */
		notification.onclose = function () {
			console.log('Notification closed');
		};
	}
}

Bước 3: Khai báo mảng.

var posts = [
	[
	"Bài 9: Các hàm xử lý chuỗi trong php.",
	"http://www.chiasephp.net/c9d9-bai-9-cac-ham-xu-ly-chuoi-trong-php.html",
        "Bài 9: Các hàm xử lý chuỗi trong php."
	],
	[
	"Bài 08: Câu lệnh Insert thêm dữ liệu trong MySQL.",
	"http://www.chiasephp.net/c22d22-bai-08-cau-lenh-insert-them-du-lieu-trong-mysql.html",
        "Bài 08: Câu lệnh Insert thêm dữ liệu trong MySQL."
	],
	[
	"Bài 09: Lệnh SELECT lấy dữ liệu trong MySQL.",
	"http://www.chiasephp.net/c23d23-bai-09-lenh-select-lay-du-lieu-trong-mysql.html"
        "Bài 09: Lệnh SELECT lấy dữ liệu trong MySQL."
	]
];

Bước 4: Set Interval

setInterval(function(){ 
	var x = Math.floor((Math.random() * 10) + 1); 
	var title =posts[x][0];
	var url =posts[x][1];
	var desc =posts[x][2];
	notifyBrowser(title,desc,url);
}, 120000); 

Chúc các bạn thành công !