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

自 Chrome 推出通知和推送消息功能以来,我们学到了很多。关于桌面级设备的一个具体反馈是,通知会一直保留在用户屏幕上,直到用户主动关闭。

在网页打开时,您可以创建一个简单的 JavaScript 计时器,以自动关闭通知。但现在,我们生活在有服务工作线程的世界中:Web 应用可以超出窗口生命周期,服务工作线程会尽快进入休眠状态以节省资源。这意味着,我们需要另辟蹊径,为用户打造良好的体验。

通知规范最近进行了更新,以便开发者能够指明系统不应自动关闭通知

通知有一个关联的“需要互动”偏好设置标志,该标志最初处于未设置状态。设置后,表示在屏幕足够大的设备上,通知应保持可用状态,直至用户激活或关闭通知。

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

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

在 Android 版 Chrome 中,由于通知会最小化到通知栏区域,因此系统会忽略 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'
        });
        });
    }
    });
}

试用演示版