HTML5 데스크탑 알림(웹 알림) 예제 분석_html5 튜토리얼 기술

html5 데스크톱 알림(웹 알림)은 새 메시지가 온라인에 올 때 데스크톱 알림 효과가 필요할 때 매우 유용합니다. 다음은 html5의 새로운 속성에 대한 간략한 소개입니다.

여기에 좋은 데모가 있습니다: html5 웹 알림 데모

위의 데모에서 다음과 같이 필요한 기본 핵심 코드를 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

<script><br> var 알림 = window.Notification || window.mozNotification || window.webkitNotification;<br> <br>Notification.requestPermission(function (permission) {<br> // console.log(permission);<br> });<br> <br> function show() {<br> var 인스턴스 = new 알림(<br> "테스트 제목", {<br> body: " 테스트 메시지"<br> }<br> );<br> <br> instance.onclick = function () {<br> // 할 일<br> };<br> instance.onerror = function () {<br> // 할 일<br> };<br> 인스턴스 .onshow = function () {<br> // 할 일<br> };<br> instance.onclose = function () {<br> // 할 일<br> };<br> <br> return false; <br> }<br></script>

그 중: Notification.requestPermission 이 코드의 기능은 사용자 에게 권한을 요청하는 것입니다.

위의 예를 통해 우리는 이미 기본 아이디어를 얻었습니다. 문서를 먼저 로드할 때 사용자에게 권한을 요청하면 앞으로는 매우 쉬울 것입니다.

코드 복사

코드는 다음과 같습니다.

window.addEventListener('load', function () {
// 우선 알림에 대한 권한이 있는지 확인해보자
if (Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});

파이어폭스에서는 인증이 통과됐는데, 크롬에서는 항상 나오지 않더군요. 나중에 이 문단을 발견했습니다

코드 복사

코드는 다음과 같습니다.

버그가 아닙니다.

데스크톱 알림은 사용자 작업을 통해서만 실행될 수 있습니다.
JavaScript 콘솔에 입력하면 웹
페이지에 삽입된 원시 JavaScript 코드와 동일한 효과가 있습니다(사용자 작업 없음). 그러나 bar는
사용자 작업을 나타냅니다. (사용자는
알림을 활성화하기 위해 의도적으로 javascript 링크를 방문하고 있습니다. 아마도 onclick="" 대신 href="javascript："를 사용하는 경향이 있는 사이트의 경우
.

이건 별 문제가 아니라고 확신합니다.

은 Chrome에서 사용자가 수동으로 실행해야 합니다. 그렇지 않으면 Chrome 브라우저가 이 js를 무시합니다

그러나 사용자가 승인하도록 명시적으로 허용하는 버튼이나 하이퍼링크를 추가하는 것은 확실히 불가능합니다. 실제로 이것은 사용자가 자주 클릭하는 버튼에서 처리할 수 있습니다. Chrome에서는 한 번의 인증이 평생 유효합니다. 설정에 들어가셔서 차단하지 않으시면 됩니다.

이를 정리하면 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

function showMsgNotification(title, msg){
var 알림 = window.Notification || window.moz알림 || window.webkitNotification;

if (Notification &&Notification.permission === "granted") {
var instance = newNotification(
title, {
body: msg,
icon: "image_url"
}
);

instance.onclick = function () {
// 할 일
};
instance.onerror = function ( ) {
// 할 일
};
instance.onshow = function () {
// 할 일
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// 할 일
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// 사용자가 괜찮다고 한 경우
if (상태 === "허가됨") {
var 인스턴스 = 새 알림(
제목, {
본문: msg,
아이콘: "image_url"
}
) ;

instance.onclick = function () {
// 할 일
};
instance.onerror = function () {
// 할 일
};
instance.onshow = function () {
// 해야 할 일
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// 할 일
};

}else {
return false
}
});
}else{
false 반환;
}

}