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

알림과 푸시 메시지가 Chrome에 도입된 이후 많은 것을 배웠습니다. 1개 데스크톱 클래스 기기에 대한 특정 피드백은 알림이 사용자가 적극적으로 닫을 때까지 화면에 계속 표시됩니다.

페이지가 열리면 자동으로 실행되는 간단한 자바스크립트 타이머를 만들 수 있습니다. 알림을 닫습니다 하지만 이제 우리는 서비스 워커가 있는 세상에 살고 있습니다. 웹 앱이 서비스 워커가 최대한 빨리 절전 모드로 전환됩니다 리소스를 절약할 수 있습니다 즉, 사용자에게 좋은 환경을 제공하기 위한 다른 방법이 필요합니다.

최근에는 알림 사양이 업데이트되어 개발자가 시스템에서 알림을 자동으로 닫으면 안 됨을 나타냅니다.

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

이상하게 보일 수도 있지만 알림이 달리 명시되지 않는 한 잠시 후에 보기에서 삭제되어야 합니다.

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

데모 사용해 보기