toggle menu

[HTML5] 바탕화면에 메시지를 띄우는 Desktop Notification 사용 방법 정리

2015.09.18 16:51 HTML5

들어가며


최근 핫한 메신저 서비스 중 하나인 Slack 을 웹버전으로 사용하다보면, 브라우저가 아닌 바탕화면에 알림 메시지가 뜨는 것을 볼 수 있다. 프로그램을 설치한 것도 아닌데, 브라우저를 벗어나 바탕화면에 알림 메시지가 표시될 수 있는 이유는 HTML5의 기능 중 하나인 Desktop Notification 을 사용했기 때문이다.




Desktop Notification 사용 방법


Desktop Notification 을 사용하는 방법은 매우 단순하다. 크게 나누어보면, Desktop Notification 권한을 요청하는 부분과, Desktop Notification 을 보내는 부분으로 나누어서 생각할 수 있다.


먼저 아래의 예제를 확인해보자.




Desktop Notification 권한을 요청하는 것은 Notification.requestPermission 메서드를 사용해서 처리한다. Notification.requestPermission 메서드를 실행하면 현재 도메인에 대한 Desktop Notification 권한을 허용할지 여부를 브라우저 레벨에서 사용자에게 확인하게 된다.


사용자가 허용했는지 거절했는지 여부는 Notification.requestPermission 을 실행할 때 등록한 콜백의 파라메터로 전달되고, 거절하면 'denied', 허용하면 'granted'가 파라메터에 담겨져 온다.


//데스크탑 알림 권한 요청 버튼을 누르면,
requestPermissionButton.on("click", function () {
	//데스크탑 알림 권한 요청
    Notification.requestPermission(function (result) {

        //요청을 거절하면,
        if (result === 'denied') {
            return;
        }
        //요청을 허용하면,
        else {
            //데스크탑 알림 권한 요청 버튼을 비활성화
            requestPermissionButton.attr('disabled', 'disabled');
            //데스크탑 메시지 입력폼을 활성화
            notificationMessage.removeAttr('disabled');
            //데스크탑 메시지 요청 버튼을 활성화
            notificationButton.removeAttr('disabled');
            return;
        }
    });
});


한번만 허용하면 브라우저가 열려있는 동안 Notification.permission 에 허용 여부가 저장되고 다시 묻지 않는다.


이제 Desktop Notification 권한을 얻었다면, 실제 Notification 을 띄워볼 차례다.


//데스크탑 알림 버튼을 누르면,
notificationButton.on("click", function () {
    var message = notificationMessage.val();
    
    //메시지를 입력한 경우에만,
    if (message !== null && message.length > 0) {
        
        var options = {
            body: message,
            icon: iconDataURI
        }
       
        //데스크탑 알림 요청
        var notification = new Notification("데스크탑 알림 예제 타이틀", options);
        
        //알림 후 5초 뒤,
        setTimeout(function () {
            //얼람 메시지 닫기
            notification.close();
        }, 5000);
    }
});


메시지를 보낼 때는 Notification 을 new 키워드로 생성해서 보내게 된다. 첫 번째 파라메터에는 알림 제목이 들어가고, 두번째 파라메터에는 옵션이 들어간다.

옵션은 다양한 항목들이 있는데, 여기에서는 가장 많이 사용되는, 메시지 내용(body)과 메시지 아이콘(icon)만 사용하고 있다. 이 외의 옵션에 대해서는 MDN의 Desktop Notification 항목을 참고하면 된다.


기본적으로 Desktop Notification 은 자동으로 닫히지 않는데, setTimeout 등을 사용해서 임의로 닫아주도록 예제를 작성해봤다. 한번에 표시될 수 있는 Desktop Notification 의 양이 제한되어 있으므로 실제 사용할 때는 이러한 표시 전략을 잘 세우는 것도 중요할 것으로 보인다.




마치며


오래전 글과 이미지 정도만 보여주던 웹이 이제는 적절한 설계와 구현만 받쳐준다면 데스크탑 어플리케이션에 근접한 기능성을 제공할 수 있는 상황이 되고 있다. 이번에 다룬 Desktop Notification 을 잘 활용한다면 브라우저 레벨을 벗어나 사용자와 반응할 수 있는 웹 어플리케이션이 만드는데 도움이 될 수 있을 것이다.




HTML5 관련 포스팅 더보기