您好,登錄后才能下訂單哦!
這篇文章主要介紹html5中Notification API怎么用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
想要向用戶顯示通知消息,需要獲取用戶權(quán)限,而相同的域名只需要獲取一次權(quán)限。只有用戶允許的權(quán)限下,Notification 才能起到作用,避免某些網(wǎng)站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的?
Notification.permission 該屬性用于表明當(dāng)前通知顯示的授權(quán)狀態(tài),可能的值包括:
default :不知道用戶的選擇,默認(rèn)。
granted :用戶允許。
denied :用戶拒絕。
if(Notification.permission === 'granted'){ console.log('用戶允許通知');}else if(Notification.permission === 'denied'){ console.log('用戶拒絕通知');}else{ console.log('用戶還沒選擇,去向用戶申請權(quán)限吧');}
當(dāng)用戶還沒選擇的時(shí)候,我們需要向用戶去請求權(quán)限。Notification 對象提供了 requestPermission() 方法請求用戶當(dāng)前來源的權(quán)限以顯示通知。
以前基于回調(diào)的語法已經(jīng)棄用(當(dāng)然在現(xiàn)在的瀏覽器中還是能用的),最新的規(guī)范已將此方法更新為基于 promise 的語法:
Notification.requestPermission().then(function(permission) { if(permission === 'granted'){ console.log('用戶允許通知'); }else if(permission === 'denied'){ console.log('用戶拒絕通知'); }});
獲取用戶授權(quán)之后,就可以推送通知了。
var notification = new Notification(title, options)
參數(shù)如下:
title:通知的標(biāo)題
options:通知的設(shè)置選項(xiàng)(可選)。
body:通知的內(nèi)容。
tag:代表通知的一個(gè)識別標(biāo)簽,相同tag時(shí)只會打開同一個(gè)通知窗口。
icon:要在通知中顯示的圖標(biāo)的URL。
image:要在通知中顯示的圖像的URL。
data:想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)。
requireInteraction:通知保持有效不自動關(guān)閉,默認(rèn)為false。
還有一些其他的參數(shù),因?yàn)橛貌涣嘶蛘邲]什么用這里就沒必要說了。
var n = new Notification('狀態(tài)更新提醒',{ body: '你的朋友圈有3條新狀態(tài),快去查看吧', tag: 'linxin', icon: 'http://blog.gdfengshuo.com/images/avatar.jpg', requireInteraction: true})
通知消息的效果圖如下:
從上面的參數(shù)可以看出,并沒有一個(gè)參數(shù)用來配置顯示時(shí)長的。我想要它 3s 后自動關(guān)閉的話,這時(shí)可以調(diào)用 close() 方法來關(guān)閉通知。
var n = new Notification('狀態(tài)更新提醒',{ body: '你的朋友圈有3條新狀態(tài),快去查看吧'})setTimeout(function() { n.close();}, 3000);
Notification 接口的 onclick屬性指定一個(gè)事件偵聽器來接收 click 事件。當(dāng)點(diǎn)擊通知窗口時(shí)會觸發(fā)相應(yīng)事件,比如打開一個(gè)網(wǎng)址,引導(dǎo)用戶回到自己的網(wǎng)站去。
var n = new Notification('狀態(tài)更新提醒',{ body: '你的朋友圈有3條新狀態(tài),快去查看吧', data: { url: 'http://blog.gdfengshuo.com' }})n.onclick = function(){ window.open(n.data.url, '_blank'); // 打開網(wǎng)址 n.close(); // 并且關(guān)閉通知}
前面說那么多,其實(shí)就是為了用。那么到底哪些地方可以用到呢?
現(xiàn)在網(wǎng)站的消息提醒,大多數(shù)都是在消息中心顯示個(gè)消息數(shù)量,然后發(fā)郵件告訴用戶,這流程完全沒有錯(cuò)。不過像我這種用戶,覺得別人點(diǎn)個(gè)贊,收藏一下都要發(fā)個(gè)郵件提醒我,老是要去刪郵件(強(qiáng)迫癥),我是覺得挺煩的甚至關(guān)閉了郵件提醒。
當(dāng)然這里并不是說要用 Notification,畢竟它和郵件的功能完全不一樣。
我覺得比較適合的是新聞網(wǎng)站。用戶瀏覽新聞時(shí),可以推送給用戶實(shí)時(shí)新聞。以騰訊體育為例,它就使用了 Notification API。在頁面中引入了一個(gè) notification2017_v0118.js,有興趣可以看看別人是怎么成熟的使用的。
一進(jìn)入頁面,就獲取授權(quán),同時(shí)自己頁面有個(gè)浮動框提示你允許授權(quán)。如果允許之后,就開始給你推送通知了。不過它在關(guān)閉標(biāo)簽卡的時(shí)候,通知也會被關(guān)閉,那是因?yàn)楸O(jiān)聽了頁面 beforeunload 事件。
function addOnBeforeUnload(e) { FERD_NavNotice.notification.close();}if(window.attachEvent){ window.attachEvent('onbeforeunload', addOnBeforeUnload);} else { window.addEventListener('beforeunload', addOnBeforeUnload, false);}
以上是“html5中Notification API怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。