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 API 호출하는 것이 불가능하도록 바뀌었기 때문에 아래의 예제는 정상적으로 실행되지 않는다.


예제를 확인하려면, 위 예제의 결과 페이지에 해당하는 아래 링크를 직접 열어서 테스트할 수 있다.


https://fiddle.jshell.net/eu81273/232ssuvh/show/





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 관련 포스팅 더보기