Giới thiệu
API Thông báo cho phép bạn hiện thông báo cho người dùng về các sự kiện nhất định, cả theo cách thụ động (email, tweet hoặc sự kiện trên lịch mới) và trên hoạt động 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ố bản nháp nhưng hiện chưa có thông số kỹ thuật nào theo chuẩn.
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 tôi sẽ kiểm tra xem webkitNotifications có được hỗ trợ hay không. Xin lưu ý rằng tên của webkitNotifications là vì đây là một phần của thông số kỹ thuật nháp. Thay vào đó, thông số kỹ thuậ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 trang web hiển thị thông báo
Mọi hàm khởi tạo mà chúng tôi đã đề cập đều sẽ báo 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ệ này, bạn có thể sử dụng câu lệnh try-catch nhưng bạn 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, một điều rất quan trọng cần nhớ là phương thức requestPermission chỉ hoạt động trong các trình xử lý sự kiện được kích hoạt bởi một thao tác của người dùng (như sự kiện bằng 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à lượt nhấp vào nút có mã "show_button".
Đoạn mã trên sẽ không bao giờ hoạt động nếu tại một thời điểm nào đó, người dùng chưa nhấp vào nút hoặc đường liên kết kích hoạt requestPermission một cách rõ ràng.
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, có thể bạn muốn gói gọn tất cả sự kiện và hành động này để tạo lớp Notification của riêng mình để giữ cho 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.