들어가며
최근 핫한 메신저 서비스 중 하나인 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 을 잘 활용한다면 브라우저 레벨을 벗어나 사용자와 반응할 수 있는 웹 어플리케이션이 만드는데 도움이 될 수 있을 것이다.