Chúng tôi đã học hỏi được nhiều điều kể từ khi Thông báo và Tin nhắn đẩy ra mắt trong Chrome. Một ý kiến phản hồi cụ thể về các thiết bị loại Máy tính là thông báo sẽ vẫn hiển thị trên màn hình của người dùng cho đến khi người dùng chủ động đóng.
Khi trang đang mở, bạn có thể tạo một bộ hẹn giờ JavaScript đơn giản sẽ tự động đóng thông báo. Nhưng giờ đây, chúng ta đang sống trong một thế giới có worker dịch vụ: nơi các ứng dụng web có thể hoạt động sau thời gian tồn tại của một cửa sổ và các worker dịch vụ được đưa vào trạng thái ngủ nhanh nhất có thể để tiết kiệm tài nguyên. Điều này có nghĩa là chúng ta cần một cách khác để tạo trải nghiệm tốt cho người dùng.
Thông số kỹ thuật của Thông báo đã được cập nhật gần đây để nhà phát triển có thể cho biết rằng hệ thống không được tự động đóng thông báo.
Thông báo có một cờ tuỳ chọn yêu cầu tương tác được liên kết, ban đầu cờ này chưa được đặt. Khi được đặt, cho biết rằng trên các thiết bị có màn hình đủ lớn, thông báo sẽ luôn sẵn sàng cho đến khi người dùng kích hoạt hoặc đóng thông báo.
Điều này có vẻ kỳ lạ, nhưng ngụ ý rằng thông báo sẽ bị xoá khỏi chế độ xem sau một khoảng thời gian ngắn, trừ phi bạn yêu cầu khác.
Chrome 47 (phiên bản thử nghiệm vào tháng 10 năm 2015) hiện hỗ trợ tuỳ chọn requireInteraction
. Trừ phi bạn cung cấp rõ ràng và đặt thành true
, tất cả thông báo trên máy tính sẽ bị đóng sau khoảng 20 giây. Tuy nhiên, điều thú vị là gần đây, Chrome mới xoá Trung tâm thông báo khỏi tất cả nền tảng máy tính (ngoại trừ ChromeOS). Điều này có nghĩa là các thông báo được thu nhỏ được coi là bị đóng và không thể truy cập được trong lệnh gọi đến getNotifications
trong một worker dịch vụ.
Trên Chrome cho Android, vì các thông báo được thu nhỏ trong khu vực khay thông báo, nên tuỳ chọn requireInteraction
sẽ bị bỏ qua.
navigator.serviceWorker.register('sw.js');
function showNotifications() {
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('requireInteraction: true', {
body: 'Requires interaction',
icon: '../images/touch/chrome-touch-icon-192x192.png',
requireInteraction: true,
tag: 'require-interaction'
});
registration.showNotification('requireInteraction: false', {
body: 'Does not require interaction',
icon: '../images/touch/chrome-touch-icon-192x192.png',
requireInteraction: false,
tag: 'no-require-interaction'
});
});
}
});
}