需要互動通知 - 電腦上的通知使用者體驗更流暢

Paul Kinlan

自從 Chrome 推出通知和推播訊息功能後，我們學到很多。關於電腦類裝置的特定意見回饋之一是，通知會持續顯示在使用者的螢幕上，直到使用者主動關閉為止。

開啟網頁時，您可以建立簡單的 JavaScript 計時器，自動關閉通知。不過，現在我們處在服務工作者的世界中：網頁應用程式可在視窗生命週期結束後繼續運作，而服務工作者會盡快進入休眠狀態，以節省資源。因此，我們需要另闢蹊徑，為使用者提供良好的體驗。

通知規格最近已更新，開發人員現在可以指出系統「不應」自動關閉通知。

通知會附帶相關的「需要互動」偏好設定旗標，該旗標一開始會設為未設定。設定後，表示在螢幕足夠大的裝置上，通知應保持可用狀態，直到使用者啟用或關閉通知為止。

這聽起來可能很奇怪，但這表示除非另有指示，否則通知應在短時間後移除。

Chrome 47 (2015 年 10 月的 Beta 版) 現已支援 requireInteraction 選項。除非明確提供並設為 true，否則電腦上的所有通知會在大約 20 秒後關閉。有趣的是，Chrome 最近剛從所有電腦平台 (但不包括 ChromeOS) 移除通知中心，這表示最小化通知會視為已關閉，且無法在服務工作者中呼叫 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'
        });
        });
    }
    });
}

試用示範模式。