때때로 데스크탑의 오른쪽 하단에 다음 메시지가 표시됩니다.
이 데스크탑 프롬프트는 HTML5의 새로운 웹 푸시 알림 기술입니다.
웹 알림 기술을 사용하면 페이지에서 페이지 외부의 시스템 수준에 표시되는 알림을 발행할 수 있습니다. 사용자에게 더 나은 경험을 제공할 수 있으며, 새 이메일 알림, 온라인 채팅방에서 받은 메시지 알림 등 다른 작업으로 바쁠 때에도 페이지에서 메시지 알림을 받을 수 있습니다.
추신: IE 외에도 모든 주요 최신 브라우저는 이 데스크톱 푸시를 기본적으로 지원합니다.
시작
메시지 알림을 만드는 방법은 매우 간단합니다. 코드는 다음과 같습니다.
var n = new 알림(Desktop push, { icon: 'img/icon.png', body: '첫 번째 데스크톱 알림입니다.', image:'img/1.jpg'});그러면 시스템 바탕 화면에 위에서 찍은 스크린샷 알림이 팝업으로 표시됩니다.
추신: 메시지 알림은 웹 서비스를 통해 페이지에 액세스할 때만 적용됩니다. 로컬 파일을 직접 두 번 클릭하면 아무런 효과가 없습니다. 즉, 브라우저를 직접 사용하여 로컬 파일을 여는 대신 서버에서 파일을 열어야 합니다.
물론 아무것도 안 보일 수도 있으니 걱정하지 말고 계속해서 읽어보세요.
기본 문법물론 위 알림을 표시하려면 먼저 알림의 기본 구문을 이해해야 합니다.
let myNotification = 새 알림(제목, 옵션);
제목: 알림이 실행될 때 알림 창 상단에 표시될 알림의 제목을 정의합니다.
옵션(선택 사항) 개체에는 알림에 적용되는 사용자 정의 설정 옵션이 포함되어 있습니다.
일반적으로 사용되는 옵션은 다음과 같습니다.body: 제목 아래에 표시되는 알림 본문입니다.
태그: 필요한 경우 알림을 새로 고치거나 교체하거나 제거할 수 있도록 각 알림의 ID와 유사합니다.
아이콘: 알림을 표시하는 아이콘
image: 알림 본문에 표시할 이미지의 URL입니다.
데이터: 알림과 연결하려는 모든 데이터입니다. 이는 모든 데이터 유형이 될 수 있습니다.
renotify: 새 알림이 이전 알림을 대체한 후 사용자에게 알려야 하는지 여부를 지정하는 부울입니다. 기본값은 false이며 이는 알림을 받지 않음을 의미합니다.
requireInteraction: 알림이 자동으로 닫히지 않고 사용자가 클릭하거나 닫을 때까지 활성 상태로 유지되어야 함을 나타냅니다. 기본값은 false입니다.
이 코드가 실행되면 브라우저는 다음 그림과 같이 사이트에서 메시지 알림을 표시하도록 허용할지 여부를 사용자에게 묻습니다.
사용자가 알림 허용을 클릭하고 승인한 경우에만 알림이 표시됩니다.
승인하다사용자가 허용 또는 차단을 클릭했는지 확인하는 방법은 무엇입니까?
Window의 알림 인스턴스에는 사용자의 인증 상태를 얻기 위한 requestPermission 함수가 있습니다.
// 먼저 알림을 표시할 수 있는 권한이 있는지 확인합니다. // 없으면 권한을 신청합니다. if (window.Notification && Notification.permission !== grant) { Notification.requestPermission(function (status) { //상태는 다음과 같습니다. 승인 상태 . //사용자가 허용을 클릭하면 상태는 '허가됨'입니다. // 사용자가 사용 안함을 클릭하면 상태는 '거부됨'입니다. // Chrome/Safari에서는 알림 권한을 사용할 수 있습니다. (Notification.permission !== 상태) {Notification.permission = 상태 } });참고: 사용자가 권한 부여의 오른쪽 상단에 있는 닫기 버튼을 클릭하면 상태 값은 기본값입니다.
그 후에는 알림 표시 여부를 결정하기 위해 상태 값이 부여되었는지 여부만 결정하면 됩니다.
알림 이벤트그러나 단순히 메시지 상자를 표시하는 것은 매력적이지 않으므로 메시지 알림은 어느 정도 상호 작용성을 가져야 하며 메시지 표시 전후에 이벤트가 포함되어야 합니다.
알림은 처음부터 일련의 이벤트 기능을 공식화했습니다. 개발자는 이러한 기능을 사용하여 포괄적인 방식으로 사용자 상호 작용을 처리할 수 있습니다.
onshow, onclick, onerror, onclose가 있습니다.
var n = newNotification(Desktop push, { icon: 'img/icon.png', body: '이것은 내 첫 번째 데스크톱 알림입니다.'}) //메시지 상자가 표시되면 onshow 함수가 트리거됩니다. // OK Do 일부 데이터를 기록하고 정기적으로 메시지 상자를 닫습니다. n.onshow = function() { console.log('Display message box'); //5초 후에 메시지 상자를 닫습니다. setTimeout(function() { n.close(); } , 3000);};//메시지 박스 클릭 시 호출 //해당 뷰 열기, 메시지 박스 닫기 및 기타 작업을 동시에 수행할 수 있습니다. n.onclick = function() { console.log('메시지 클릭 box'); // 해당 뷰를 엽니다. n.close();};//에러가 발생하면 onerror 함수가 호출됩니다. //부여된 권한이 없으면 생성 시에도 onerror 함수가 실행됩니다. 알림 객체 인스턴스 n.onerror = function() { console.log('메시지 상자 오류'); // 다른 작업 수행}; // 메시지 상자가 닫힐 때 onclose 함수가 호출됩니다. n.onclose = function() { console.log('메시지 상자 닫기' ) ; //다른 작업 수행};간단한 예
<!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>문서</title> </head> <body> <button>알림을 시작하려면 클릭하세요.</button> < / body> <script> window.addEventListener(load, function() { // 먼저 알림을 보낼 수 있는 권한이 있는지 확인합니다. // 없으면 권한을 요청합니다. if (window.Notification &&Notification.permission !== 부여됨) { Notification.requestPermission(function(status) { if (Notification.permission !== status) {Notification.permission = status; } }) } var 버튼 = document.getElementsByTagName(button)[0]; 버튼.addEventListener(click, function() { // 사용자가 동의하면 알림 생성 if (window.Notification && Notification.permission === 부여됨) { var n = new Notion(Hi!) } // 사용자가 알림 표시 여부를 선택하지 않는 경우 // 참고: Chrome에서는 권한 속성에 값이 있는지 확인할 수 없으므로 // 이 속성의 값을 확인하는 것은 안전하지 않습니다. else.if (window.Notification &&Notification.permission !== 거부됨) {Notification.requestPermission(function(status) { if (Notification.permission !== status) {Notification.permission = status; } // 사용자가 동의하는 경우 if (status === grant) { var n = newNotification(Hi!); } // 그렇지 않으면 일반 모드를 타협하여 사용할 수 있습니다. else { Alert(Hi!) } }); // 사용자가 알림 수락을 거부하는 경우 else { // 일반 모드 경고를 타협하여 사용할 수 있습니다. Alert(Hi!) } });인터페이스를 열면 승인 응용 프로그램이 팝업됩니다. 허용 버튼을 클릭하면 알림이 바탕 화면으로 전송되고 바탕 화면 오른쪽 하단에서 이 알림을 볼 수 있습니다.
위에서는 메시지만 표시했습니다.
if (상태 === 승인됨) { var n = 새 알림(안녕하세요);}예를 들어 메시지가 많으면 for 루프를 사용하여 많은 수의 알림을 시뮬레이션합니다.
for(var i=0; i<10; i++) { var n = 새 알림(Hi,+i);}10개의 알림이 표시된 것을 확인할 수 있습니다. 그러나 어떤 경우에는 많은 수의 알림을 표시하는 것이 사용자에게 고통스러울 수 있습니다.
예를 들어 인스턴트 메시징 앱이 수신되는 모든 메시지에 대해 사용자에게 메시지를 표시하는 경우입니다. 수백 개의 불필요한 알림으로 사용자의 데스크톱이 넘쳐나는 것을 방지하려면 보류 중인 메시지 대기열을 인계받아야 할 수도 있습니다.
따라서 새로 생성된 알림에는 태그를 추가해야 합니다.
이전 알림과 동일한 태그가 포함된 새 알림이 있는 경우 새 알림이 이전 알림을 대체하고 최신 알림만 바탕화면에 표시됩니다.
여전히 위의 예를 사용하면 트리거 알림에 태그 속성만 추가하면 됩니다.
for (var i = 0; i < 10; i++) { // 마지막으로 Hi! 9 내용이 포함된 알림만 표시됩니다. var n = newNotification(Hi! + i, {tag: 'soManyNotification'});} 마침내메시지 알림은 좋은 기능이지만 일부 사이트에서 이 기능을 악의적으로 사용할 가능성을 배제할 수는 없습니다. 사용자가 승인하면 때때로 일부 비우호적인 메시지가 푸시되어 사용자의 작업을 방해할 수 있습니다. 사이트의 권한을 비활성화합니다.
브라우저 주소 입력 상자 왼쪽에 있는 느낌표를 클릭하면 알림 옵션이 있으며 권한을 수정할 수 있습니다. 또는 알림 페이지에서 알림을 수정하는 옵션이 있으며, 특정 상황에 따라 승인 알림을 수정할 수 있습니다.
따라서 가장 기본적인 웹 알림이 구현됩니다.
요약위 내용은 편집자가 소개한 HTML5의 웹 알림 데스크탑 알림 기능 구현 방법입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!