순수한 Javascript를 사용하여 알림 보내기

알림 전송 권한 요청

우리는 Notification.requestPermission을 사용하여 사용자에게 웹 사이트에서 알림을 받기를 원하는지 묻습니다.

Notification.requestPermission(function() {
 if (Notification.permission === 'granted') {
 // user approved.
 // use of new Notification(...) syntax will now be successful
 } else if (Notification.permission === 'denied') {
 // user denied.
 } else { // Notification.permission === 'default'
 // user didn’t make a decision.
 // You can’t send notifications until they grant permission.
 }
});

Firefox 47부터 .requestPermission 메서드는 권한 부여에 대한 사용자의 결정을 처리할 때 약속을 반환할 수도 있습니다.

Notification.requestPermission().then(function(permission) {
 if (!('permission' in Notification)) {
 Notification.permission = permission;
 }
 // you got permission !
 }, function(rejection) {
 // handle rejection here.
 }
);

알림 보내기

사용자가 알림 전송 권한 요청을 승인한 후 간단한 알림을 보낼 수 있습니다.
사용자에게 *Hey *라고 말합니다.

new Notification('Hey', { body: 'Hello, world!', icon: 'url to an .ico image' });

그러면 다음과 같은 알림이 전송됩니다.

Hey
Hello, world!

알림 닫기

.close() 메서드를 사용하여 알림을 닫을 수 있습니다.

let notification = new Notification(title, options);
// do some work, then close the notification
notification.close()

setTimeout 기능을 활용하여 나중에 알림을 자동으로 닫을 수 있습니다.

let notification = new Notification(title, options);
setTimeout(() => {
 notification.close()
}, 5000);

위의 코드는 알림을 생성하고 5초 후에 닫습니다.

알림 이벤트

알림 API 사양은 알림에 의해 발생할 수 있는 2개의 이벤트를 지원합니다.

클릭 이벤트입니다.

이 이벤트는 알림 본문(닫는 X 및 알림 제외)을 클릭하면 실행됩니다.
구성 버튼).

예시:

notification.onclick = function(event) {
 console.debug("you click me and this is my event object: ", event);
}

오류 이벤트

알림은 표시할 수 없는 것과 같은 잘못된 일이 발생할 때마다 이 이벤트를 실행합니다.

notification.onerror = function(event) {
 console.debug("There was an error: ", event);
}