Notification requestInteraction - 在桌面设备上提供更顺畅的通知用户体验

自从通知和推送消息在 Chrome 中推出以来,我们学到了很多东西。有关桌面设备类设备的具体反馈是,通知会一直保留在用户屏幕上并显示在用户屏幕上,直到用户主动关闭通知。

您可以创建一个会自动关闭通知的简单 JavaScript 计时器,当页面打开时。但我们现在生活在一个有 Service Worker 的世界:在那里,Web 应用可以存留在窗口生命周期结束后,并且 Service Worker 会尽快进入休眠状态以节省资源。这意味着,我们需要另一种方式来为用户打造良好的体验。

我们最近更新了通知规范,让开发者能够指明不应被系统自动关闭

通知具有关联的需要互动偏好设置标志,该标志最初未设置。设置后,表示在屏幕足够大的设备上,通知应一直保持随时可用,直到用户激活或关闭通知。

这可能看起来很奇怪,但这意味着什么,除非另有说明,否则应在短时间后从视图中移除通知。

Chrome 47(2015 年 10 月推出 Beta 版)现在支持 requireInteraction 选项。除非明确提供并设置为 true,否则桌面设备上的所有通知都将在大约 20 秒后关闭。但有趣的是,Chrome 最近刚从所有桌面平台(但 ChromeOS)中移除了通知中心,这意味着最小化的通知会被视为已关闭,并且无法在 Service Worker 中调用 getNotifications

在 Chrome(Android 版)中,由于通知会在通知托盘区域中最小化,因此 requireInteraction 选项会被忽略。

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'
        });
        });
    }
    });
}

试用演示版