html5 데스크탑 알림: Notifycations 애플리케이션 소개_html5 튜토리얼 기술

HTML5의 데스크톱 알림(웹 알림)은 현재 페이지 창에 메시지 상자를 표시할 수 있습니다. 이 메시지 상자는 탭 창에 걸쳐 표시되므로 사용자가 웹을 탐색하기 위해 여러 탭을 열 때 알림을 더 편리하고 쉽게 확인할 수 있습니다. 현재 웹킷 커널만이 이 기능을 지원합니다.
이 기능을 활성화하려면 Chrome의 http 모드에서 열어야 합니다.
데스크탑 알림 기능은 window.webkitNotifications 개체(웹킷 커널)에 의해 구현됩니다.
window.webkitNotifications 개체에는 속성이 없으며 다음 네 가지 메서드가 있습니다.
1.requestPermission()
　이 권한이 있는 경우 이 메서드는 사용자에게 메시지 알림 권한을 신청하는 데 사용됩니다. 현재 열려 있지 않으면 브라우저가 인증 인터페이스를 팝업으로 표시합니다. 사용자가 인증하면 상태 값(0, 1 또는 2의 정수)이 객체 내부에 생성됩니다.
0: 사용자가 다음에 동의함을 나타냅니다. 메시지 알림 기능은 이 상태에서만 사용할 수 있습니다.
1: 사용자가 거부하거나 동의하지 않는 상태를 나타냅니다.
2: 사용자가 메시지 알림을 거부함을 나타냅니다.
2.checkPermission()
　 requestPermission()에서 적용한 권한의 상태 값을 가져오는 메소드입니다.
3.createNotification()
이 메소드는 알림 메시지를 순수 메시지로 생성합니다.
iconURL: 메시지에 표시되는 아이콘 주소
title: 메시지 제목,
body: 메시지 본문의 텍스트 내용
이 메서드는 알림 개체를 반환하며 이 개체에 대해 더 많은 설정을 지정할 수 있습니다.
Notification 객체의 속성 및 메소드:

코드 복사

코드는 다음과 같습니다.

dir: ""
onclick: null
onclose: null
ondisplay: 함수(이벤트) {
onerror: null
onshow: null
replaceId: ""
tag : ""
__proto__: 알림
addEventListener: function addEventListener() { [네이티브 코드] }
cancel: function cancel() { [네이티브 코드] }
close: function close( ) { [ 네이티브 코드] }
생성자: function 알림() { [네이티브 코드] }
dispatchEvent: function dispatchEvent() { [네이티브 코드] }
removeEventListener: function RemoveEventListener() { [네이티브 코드 ] }
show: function show() { [native code] }
__proto__: Object

dir: 메시지 배열 방향을 설정합니다. 가능한 값은 "auto"입니다. (자동), "ltr"(왼쪽에서 오른쪽으로), "rtl"(오른쪽에서 왼쪽으로).
태그: 메시지에 태그 이름을 추가합니다. 이 속성이 설정되면 새 메시지 알림이 있을 때 동일한 레이블이 있는 메시지가 동일한 메시지 상자에만 표시되고 후자의 메시지 상자가 이전 메시지 상자를 대체합니다. 그렇지 않으면 여러 메시지 프롬프트 상자가 나타납니다. 메시지 상자는 최대 3개까지 표시됩니다. 3개 이상이면 이후 메시지 알림이 차단됩니다.
onshow: 이 이벤트는 메시지 상자가 표시될 때 트리거됩니다.
onclick: 이 이벤트는 메시지 상자를 클릭할 때 트리거됩니다.
onclose: 이 이벤트는 메시지가 닫힐 때 트리거됩니다. onerror: 오류가 발생할 때 이 이벤트가 트리거됩니다.
메서드:
addEventListener &&removeEventListener: 이벤트를 추가하고 제거하는 일반적인 메서드
표시: 메시지 알림 상자 표시
닫기; 메시지 알림 상자;
취소: 메시지 알림 상자를 닫습니다.

4.createHTMLNotification() 이 메서드는 메시지를 HTML로 변환하고 하나의 매개변수(HTML 파일의 URL)를 허용합니다. 이 메소드는 또한 알림 객체를 반환합니다.
예시:

코드 복사코드는 다음과 같습니다.

<머리>


<본문>
<양식>