Giới thiệu
Notifications API cho phép bạn hiển thị thông báo cho người dùng về các sự kiện nhất định, cả thụ động (email mới, tweet hoặc sự kiện trên lịch) và trên các lượt tương tác của người dùng, bất kể thẻ nào có tiêu điểm. Có thông số kỹ thuật nháp nhưng thông số này hiện không có trong bất kỳ tiêu chuẩn nào.
Bạn có thể làm theo các bước đơn giản sau để triển khai thông báo chỉ trong vài phút:
Bước 1: Kiểm tra xem có hỗ trợ API Thông báo hay không
Chúng ta kiểm tra xem webkitNotifications có được hỗ trợ hay không. Xin lưu ý rằng tên của webkitNotifications là do thuộc tính này là một phần của bản đặc tả nháp. Bản đặc tả cuối cùng sẽ có hàm notifications().
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
Bước 2: Cho phép người dùng cấp quyền cho một trang web để hiển thị thông báo
Bất kỳ hàm khởi tạo nào mà chúng tôi đề cập sẽ gửi một lỗi bảo mật nếu người dùng chưa cấp quyền cho trang web hiển thị thông báo theo cách thủ công.
Để xử lý ngoại lệ, bạn có thể sử dụng câu lệnh try-catch, nhưng cũng có thể sử dụng phương thức checkPermission cho cùng một mục đích.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Nếu ứng dụng web không có quyền hiển thị thông báo, thì phương thức requestPermission sẽ hiển thị một thanh thông tin:
Tuy nhiên, điều rất quan trọng là bạn phải nhớ rằng phương thức requestPermission chỉ hoạt động trong trình xử lý sự kiện do thao tác của người dùng kích hoạt, chẳng hạn như sự kiện chuột hoặc bàn phím, để tránh các thanh thông tin không mong muốn. Trong trường hợp này, hành động của người dùng là nhấp vào nút có mã nhận dạng "show_button".
Đoạn mã trên sẽ không bao giờ hoạt động nếu người dùng không nhấp rõ ràng vào một nút hoặc đường liên kết kích hoạt requestPermission tại một thời điểm nào đó.
Bước 3: Đính kèm trình nghe và các thao tác khác
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Tại thời điểm này, bạn nên đóng gói tất cả các sự kiện và hành động này bằng cách tạo lớp Notification (Thông báo) của riêng mình để mã gọn gàng hơn, mặc dù việc này nằm ngoài phạm vi của hướng dẫn này.