HTML5 알림(데스크탑 알림) 기능 사용 예제_html5 튜토리얼 기술

1. HTML5 알림 소개
HTML5 알림은 데스크톱 알림입니다. 현재 브라우저는 여전히 브라우저와 데스크톱 간의 통신을 격리하는 엄격한 샌드박스 모드에서 작동합니다. 알림은 샌드박스에 걸쳐 있을 수 있으므로 메시지가 최소화된 경우에도 브라우저가 사용자에게 메시지를 알릴 수 있습니다.
2. Desktop Reminder API

코드 복사

코드는 다음과 같습니다.

window.webkitNotifications

API에는 3가지 메소드가 있습니다:

코드 복사

코드는 다음과 같습니다.

requestPermission 데스크톱 알림 요청
checkPermission 데스크톱 알림 권한 확인(PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)
createNotification 데스크톱 알림 생성

3. 데스크톱 알림 예제
데스크톱 알림 API를 사용하여 20분마다 데스크톱에 메시지를 보내 사용자에게 휴식을 취하도록 알리는 작은 함수를 작성해 보겠습니다.
코드는 다음과 같습니다.

코드를 복사하세요

코드는 다음과 같습니다.

if(window.webkitNotifications) {
if(window.webkitNotifications.checkPermission()==0){
setInterval(function(){
var popup = window.webkitNotifications.createNotification("avator.jpg ","루화 따뜻한 알림: ","컴퓨터 장시간 보면 눈이 나빠지니, 쉬세요~");
popup.show();
},1000 * 60 * 20);

}else{
window.webkitNotifications.requestPermission();
}
}else{
Alert('브라우저는 데스크톱 알림을 지원하지 않습니다~!');
}

그러면 20분 후에 바탕화면이 나타납니다.