Thông báo yêu cầu tương tác – Trải nghiệm người dùng thông báo mượt mà hơn trên máy tính để bàn

Chúng tôi đã học hỏi được rất nhiều kể từ khi tính năng Thông báo và Nhắn tin đẩy xuất hiện trong Chrome. Một ý kiến phản hồi cụ thể về các thiết bị cấp Máy tính là thông báo sẽ luôn ở quanh màn hình của người dùng cho đến khi người dùng chủ động đóng thông báo.

Khi trang đang mở, bạn có thể tạo một bộ tính giờ JavaScript đơn giản để tự động đóng thông báo. Tuy nhiên, chúng ta hiện đang sống trong một thế giới với trình chạy dịch vụ: nơi các ứng dụng web có thể hoạt động lâu hơn một cửa sổ và trình chạy dịch vụ được chuyển sang chế độ ngủ nhanh nhất có thể để tiết kiệm tài nguyên. Điều này có nghĩa là chúng tôi cần một cách khác để tạo ra trải nghiệm tốt cho người dùng.

Gần đây, chúng tôi đã cập nhật thông số kỹ thuật Thông báo để nhà phát triển có thể cho biết rằng hệ thống không nên tự động đóng thông báo.

Một thông báo có cờ ưu tiên yêu cầu tương tác liên kết chưa được thiết lập ban đầu. 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 hiển thị cho đến khi người dùng kích hoạt hoặc đóng thông báo.

Điều này nghe có vẻ lạ, nhưng hệ thống sẽ xoá thông báo khỏi chế độ xem sau một khoảng thời gian ngắn trừ phi có thông báo khác.

Chrome 47 (thử nghiệm vào tháng 10 năm 2015) hiện hỗ trợ tùy chọn requireInteraction. Trừ phi được cung cấp đặt thành true một cách rõ ràng, 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 vừa xoá Trung tâm thông báo khỏi tất cả các nền tảng máy tính (trừ ChromeOS). Điều này có nghĩa là các thông báo được giảm thiểu sẽ được coi là đã bị loại bỏ và không truy cập được trong lệnh gọi đến getNotifications trong trình chạy dịch vụ.

Trên Chrome dành cho Android, vì các thông báo được thu nhỏ trong khu vực khay thông báo nên lựa 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'
        });
        });
    }
    });
}

Dùng thử bản minh hoạ.