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

데모 사용해 보기