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

PHP & MySQL 26/01/2017 01:43 1922
Hôm nay tôi sẽ hướng dẫn các bạn hiển thị thông báo của trình duyệt từ ứng dụng website của bạn. Đối tượng Notification

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 !

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.