HTML5 데스크톱 알림 알림 API 사용

Foreword

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})

알림 메시지의 렌더링은 다음과 같습니다.

Close 알림

위 매개변수에서 볼 수 있듯이 표시 기간을 구성하는 매개변수가 없습니다. 3초 후에 자동으로 닫히도록 하려면 close() 메서드를 호출하여 알림을 닫을 수 있습니다.

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态，快去查看吧'})setTimeout(function() {
    n.close();}, 3000);

Event

알림 인터페이스의 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 이벤트 전에 페이지를 수신하므로 알림도 꺼집니다.

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();}if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);}

Compatible

호환성에 대해 말하자면 당연히 많은 것들이 있고, 각 브라우저의 성능은 조금씩 다를 것입니다. 거의 모든 모바일 버전이 지원되지만, 다행히 IE를 제외한 대부분의 PC 버전이 지원됩니다. 따라서 사용하기 전에 브라우저가 알림을 지원하는지 확인해야 합니다.

위 내용은 HTML5 데스크톱 알림 알림 API 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!