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ả một cách thụ động (email, tweet hoặc sự kiện lịch mới) và khi người dùng tương tác, bất kể thẻ nào đang được chọn. Có bản nháp đặc tả nhưng hiện không có 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 Notifications API có được hỗ trợ hay không
Chúng tôi kiểm tra xem webkitNotifications có được hỗ trợ hay không. Xin lưu ý rằng tên của webkitNotifications là do đây là một phần của bản nháp đặc tả. Bản đặc tả cuối cùng sẽ có hàm notifications() thay thế.
// 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 đến sẽ gửi một lỗi bảo mật nếu người dùng chưa cấp quyền theo cách thủ công cho trang web để hiển thị thông báo.
Để 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ụ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, bạn cần nhớ rằng phương thức requestPermission chỉ hoạt động trong các trình xử lý sự kiện do một 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 chưa 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 đối tượng tiếp nhận dữ liệu 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 có thể muốn đóng gói tất cả các sự kiện và thao tác này bằng cách tạo lớp Thông báo của riêng mình để giữ cho mã sạch hơn, mặc dù điều này nằm ngoài phạm vi của hướng dẫn này.