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

自從 Chrome 導入「通知」和「推送訊息」功能以來,我們學到了許多。針對電腦級裝置,其中一項具體意見回饋是,通知會持續顯示並顯示在使用者的螢幕上,直到使用者主動關閉為止。

開啟網頁時,可以建立可自動關閉通知的簡易 JavaScript 計時器。但現在,我們與 Service Worker 共同生活:網頁應用程式可以超過視窗的生命週期,服務工作站會盡快進入休眠狀態以節省資源。換句話說,我們需要其他方式,才能帶給使用者良好的體驗。

通知規格最近已更新,可讓開發人員表示系統「不應」自動關閉通知

通知含有相關聯的需要互動偏好設定標記 (一開始為未設定)。設定後,表示在具有足夠大螢幕的裝置上,通知應隨時可供存取,直到使用者啟用或關閉通知為止。

這聽起來可能很奇怪,但這只是表示除非另有說明,我們安排一小段時間後就會從檢視畫面中移除通知。

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

立即試用