Notification API는 사용자에게 알림 정보를 표시하는 데 사용되는 HTML5의 새로운 데스크톱 알림 API입니다. 이 알림은 브라우저와 분리되어 있습니다. 사용자가 현재 탭 페이지에 머물지 않거나 브라우저를 최소화하더라도 알림 정보는 여전히 상단에 표시됩니다.
사용자에게 알림 메시지를 표시하려면 사용자 권한을 얻어야 하며, 동일한 도메인 이름에 대해 한 번만 권한을 얻으면 됩니다. 알림은 특정 웹사이트의 광고가 알림을 남용하거나 사용자에게 영향을 미치는 것을 방지하기 위해 사용자가 허용한 권한을 통해서만 작동할 수 있습니다. 그렇다면 사용자가 허용되는지 여부를 어떻게 알 수 있습니까?
Notification.permission 이 속성은 현재 알림 표시의 인증 상태를 나타내는 데 사용됩니다. 가능한 값은 다음과 같습니다.
기본값: 사용자의 선택을 알 수 없음, 기본값.
허용됨: 사용자가 허용되었습니다.
denied: 사용자가 거부했습니다.
if(Notification.permission === 'granted'){ console.log('用户允许通知');}else if(Notification.permission === 'denied'){ console.log('用户拒绝通知');}else{ console.log('用户还没选择,去向用户申请权限吧');}
사용자가 아직 선택하지 않은 경우 사용자에게 권한을 요청해야 합니다. 알림 객체는 알림을 표시하기 위해 현재 소스에서 사용자 권한을 요청하는 requestPermission() 메서드를 제공합니다.
이전 콜백 기반 구문은 더 이상 사용되지 않으며(물론 현재 브라우저에서는 계속 사용할 수 있음) 최신 사양에서는 이 메서드를 약속 기반 구문으로 업데이트했습니다.
Notification.requestPermission().then(function(permission) { if(permission === 'granted'){ console.log('用户允许通知'); }else if(permission === 'denied'){ console.log('用户拒绝通知'); }});
사용자 가져오기 승인 후 푸시 알림을 보낼 수 있습니다.
var notification = new Notification(title, options)
매개변수는 다음과 같습니다.
title: 알림 제목
options: 알림 설정 옵션(선택 사항).
body: 알림 내용입니다.
tag: 알림을 나타내는 식별 태그입니다. 동일한 태그로 동일한 알림 창만 열립니다.
icon: 알림에 표시될 아이콘의 URL입니다.
html5 데스크톱 알림의 알림 API에 대한 자세한 설명: 알림에 표시될 이미지의 URL입니다.
data: 알림과 연결하려는 작업 유형의 데이터입니다.
requireInteraction: 알림은 유효한 상태로 유지되며 자동으로 닫히지 않습니다. 기본값은 false입니다.
몇 가지 다른 매개변수가 있지만 사용할 수 없거나 쓸모가 없으므로 여기서 언급할 필요는 없습니다.
var n = new Notification('状态更新提醒',{ body: '你的朋友圈有3条新状态,快去查看吧', tag: 'linxin', icon: 'http://blog.gdfengshuo.com/html5 데스크톱 알림의 알림 API에 대한 자세한 설명s/avatar.jpg', requireInteraction: true})
알림 메시지의 렌더링은 다음과 같습니다.
위 매개변수에서 볼 수 있듯이 표시 기간을 구성하는 매개변수가 없습니다. 3초 후에 자동으로 닫히도록 하려면 close() 메서드를 호출하여 알림을 닫을 수 있습니다.
var n = new Notification('状态更新提醒',{ body: '你的朋友圈有3条新状态,快去查看吧'})setTimeout(function() { n.close();}, 3000);
알림 인터페이스의 onclick 속성은 클릭 이벤트를 수신할 이벤트 리스너를 지정합니다. 알림 창을 클릭하면 URL을 열고 사용자를 자신의 웹 사이트로 다시 안내하는 등 해당 이벤트가 트리거됩니다.
var n = new Notification('状态更新提醒',{ body: '你的朋友圈有3条新状态,快去查看吧', data: { url: 'http://blog.gdfengshuo.com' }})n.onclick = function(){ window.open(n.data.url, '_blank'); // 打开网址 n.close(); // 并且关闭通知}
위에서 언급했듯이 실제로 사용하기 위한 것입니다. 그럼 어디에 사용될 수 있나요?
웹사이트의 대부분의 메시지 알림은 이제 메시지 센터에 메시지 수를 표시한 다음 사용자에게 이 프로세스에 문제가 없음을 알리는 이메일을 보냅니다. 하지만 저 같은 사용자는 누군가가 좋아요를 누르거나 저장해 놓으면 알림을 주기 위해 이메일을 보내는데, 저는 항상 그 이메일을 삭제해야 합니다(강박 장애). 이메일 알림.
물론 이것이 알림을 사용해야 한다는 의미는 아닙니다. 결국 알림은 이메일과 완전히 다른 기능을 가지고 있습니다.
내 생각에는 뉴스 사이트가 더 적합한 것 같아요. 사용자가 뉴스를 검색하면 실시간 뉴스가 사용자에게 푸시될 수 있습니다. Tencent Sports를 예로 들면 알림 API를 사용합니다. 알림2017_v0118.js가 페이지에 소개되어 있습니다. 관심이 있으시면 다른 사람들이 이를 어떻게 성숙하게 사용하는지 확인할 수 있습니다.
페이지에 들어가자마자 승인을 받게 됩니다. 동시에 승인을 허용하라는 메시지가 페이지에 떠있습니다. 허용되면 푸시 알림이 전송되기 시작합니다. 그러나 탭을 닫으면 unload 이벤트 전에 페이지를 수신하므로 알림도 꺼집니다.
위 내용은 html5 데스크톱 알림의 알림 API에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!