알림 needInteraction: 데스크톱에서의 더 원활한 알림 UX

Chrome에서 알림과 푸시 메시지를 도입한 후 많은 것을 배웠습니다. 데스크톱 클래스 기기에 관한 한 가지 구체적인 피드백은 사용자가 직접 닫을 때까지 알림이 사용자의 화면에 계속 표시되고 표시된다는 것이었습니다.

페이지가 열리면 자동으로 알림을 닫는 간단한 JavaScript 타이머를 만들 수 있습니다. 하지만 지금은 서비스 워커가 있는 세상에 살고 있습니다. 즉, 웹 앱이 창의 수명을 지나도 지속될 수 있으며, 서비스 워커는 리소스를 절약하기 위해 가능한 한 빨리 절전 모드로 전환됩니다. 즉, 사용자에게 좋은 환경을 만들 수 있는 다른 방법이 필요합니다.

개발자가 알림을 시스템에서 자동으로 닫으면 안 됨을 나타낼 수 있도록 알림 사양을 최근에 업데이트했습니다.

알림에는 처음에 설정되지 않은 관련 상호작용 필요 환경설정 플래그가 있습니다. 설정된 경우 화면이 충분히 큰 기기에서 사용자가 알림을 활성화하거나 닫을 때까지 알림을 계속 사용할 수 있어야 함을 나타냅니다.

이상하게 보일 수도 있지만 달리 지시가 없는 한 짧은 시간 후에 알림을 뷰에서 삭제해야 한다는 의미입니다.

이제 Chrome 47 (2015년 10월 베타)에서 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'
        });
        });
    }
    });
}

데모 사용해 보기