웹브라우저에서 알림을 받아보자, HTML5 Notification

Notification API (HTML5)

스터디 용도로 웹소켓으로 채팅 프로그램을 만들어보던 중 일반 메신저들처럼 알림 기능이 있으면 좋겠다는 말을 듣고 브라우저에서 지원해 주는 알림기능을 이용해 보고자 찾아봤습니다.

HTML5에서 Notification API를 지원합니다.

간단하게 사용하기 위한 방법은 매우 심플합니다.

1. 알림권한을 허용받고

Notification.requestPermission();

2. 메시지를 띄운다.

new Notification("타이틀", {body:'메세지 내용'});

알림 권한 허용받기

Notification.requestPermission();

위 메소드를 호출하면 아래와 같이 사용자에게 알림을 허용할 것인지를 물어보게 됩니다.

아래에 나와있는 설명처럼 permission 프로퍼티에 허용이면 "granted"가, 거절이면 "denied"가 저장됩니다.

조금만 더 활용해서 아래 코드와 같이 권한을 받을 수 있게 했습니다.

//알림 권한 요청
function getNotificationPermission() {
    // 브라우저 지원 여부 체크
    if (!("Notification" in window)) {
        alert("데스크톱 알림을 지원하지 않는 브라우저입니다.");
    }
    // 데스크탑 알림 권한 요청
    Notification.requestPermission(function (result) {
        // 권한 거절
        if(result == 'denied') {
            alert('알림을 차단하셨습니다.\n브라우저의 사이트 설정에서 변경하실 수 있습니다.');
            return false;
        }
    });
}

알림 띄우기

new Notification("타이틀", {body:'메세지내용'});

위와 같이 인스턴스를 생성하면 알림 메시지가 아래 캡쳐화면처럼 나오게 됩니다.

위 코드에서 {body:'메세지용'} 에 다양한 actions, badge, body, data, dir, icon, image 과 같은 프로퍼티들을 셋팅할 수 있습니다.

API에서는 권한을 물어보는 requestPermission() 메소드와 함께 close()라는 알림을 닫는 기능을 하는 메소드를 제공해줍니다.

조금 더 활용해서 메세지가 3초 뒤 닫히는 다음과 같은 메세지 띄우기 함수를 만들어 봤습니다.

// 알림 띄우기
function notify(msg) {
    var options = {
        body: msg
    }
    
    // 데스크탑 알림 요청
    var notification = new Notification("DororongJu", options);
    
    // 3초뒤 알람 닫기
    setTimeout(function(){
        notification.close();
    }, 3000);
}

보다 더 다양한 정보는 여기에 잘 나와있습니다.

웹소켓 스터디 소스에 알림을 적용시킨 결과 영상 첨부합니다.