[JavaScript] 브라우저 밖 알림 기능

개요

브라우저 안에서의 알림은 alert로 가능합니다. 하지만 사용자가 브라우저를 보고 있지 않다면 의미가 없기 때문에 브라우저 밖에서도 확인 가능한 알림 기능에 대해 알아봤습니다.

 

방법

Notification

방법은 바로 내장 객체인 Notification을 사용하는것 이었습니다.

window.Notification은 브라우저에서 사용자에게 알림을 표시하기 위한 JS의 내장 객체입니다.

이 객체를 사용하면 브라우저 밖에서도 사용자에게 알림을 보낼 수 있습니다.

구현 방법은 다음과 같습니다.

 

구현

1. 권한 요청

Notification처럼 브라우저 밖에서도 js 코드가 영향을 주기 위해선 사용자의 허가가 있어야 합니다.

requestPermission으로 권한 허용 여부를 물어볼 수 있습니다.

코드는 다음과 같이 사용할 수 있습니다.

// 브라우저가 알림을 지원하는지 확인
if (window.Notification) {

    // 알림 권한 허용 여부 물어보기  
    Notification.requestPermission().then(function(permission) {

    if (permission === 'granted') {
        // 권한 허용 됐을 때
    }else {
        // 권한 거부 됐을 때
    }
  });
}

 

2. 알림 내용 세팅

Notification에서 제공하는 옵션은 제목, 내용, 아이콘, 클릭이벤트 이렇게 크게 4가지이고

코드는 다음과 같이 작성할 수 있습니다.

var notification = new Notification('알림 제목', {
    body: '알림 내용',
    icon: '알림 아이콘 URL'
});

// 사용자가 알림을 클릭했을 때 실행될 함수 설정
notification.onclick = function() {
    // 사용자가 알림을 클릭했을 때 실행할 작업
    console.log('알림이 클릭되었습니다.');
};

 

 

전체 코드

알림을 확인하기 쉽게 5초 타이머를 세팅해 뒀습니다.

버튼 클릭 후 브라우저를 최소화한 후 알림을 확인해 보세요.

※ 이때 브라우저를 종료하면 알림이 동작하지 않습니다

<button onclick="timer()">5초 후 알림 타이머</button>

<script>
    window.onload = function () {
        if (window.Notification) {
            Notification.requestPermission();
        }
    }

    function timer() {
        setTimeout(function () {
            notify();
        }, 5000);
    }

    function notify() {
        if (Notification.permission !== 'granted') {
            alert('notification is disabled');
        }
        else {
            var notification = new Notification('푸시 알림 제목', {
                icon: 'http://junhere.com/assets/images/logo.png',
                body: '푸시 알림 내용',
            });

            notification.onclick = function () {
                window.open('https://junhere.tistory.com/28');
            };
        }
    }
</script>

동작화면