html5中NotificationAPI怎么用-創(chuàng)新互聯(lián)

這篇文章主要介紹html5中Notification API怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到莊浪網(wǎng)站設(shè)計(jì)與莊浪網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋莊浪地區(qū)。用戶權(quán)限

想要向用戶顯示通知消息，需要獲取用戶權(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('用戶還沒(méi)選擇，去向用戶申請(qǐng)權(quán)限吧');}
請(qǐng)求權(quán)限

當(dāng)用戶還沒(méi)選擇的時(shí)候，我們需要向用戶去請(qǐng)求權(quán)限。Notification 對(duì)象提供了 requestPermission() 方法請(qǐng)求用戶當(dāng)前來(lái)源的權(quán)限以顯示通知。

以前基于回調(diào)的語(yǔ)法已經(jīng)棄用（當(dāng)然在現(xiàn)在的瀏覽器中還是能用的），最新的規(guī)范已將此方法更新為基于 promise 的語(yǔ)法：

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è)識(shí)別標(biāo)簽，相同tag時(shí)只會(huì)打開(kāi)同一個(gè)通知窗口。

    • icon：要在通知中顯示的圖標(biāo)的URL。

    • image：要在通知中顯示的圖像的URL。

    • data：想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)。

    • requireInteraction：通知保持有效不自動(dòng)關(guān)閉，默認(rèn)為false。

還有一些其他的參數(shù)，因?yàn)橛貌涣嘶蛘邲](méi)什么用這里就沒(méi)必要說(shuō)了。

var n = new Notification('狀態(tài)更新提醒',{
    body: '你的朋友圈有3條新?tīng)顟B(tài)，快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true})

通知消息的效果圖如下：

html5中Notification API怎么用

關(guān)閉通知

從上面的參數(shù)可以看出，并沒(méi)有一個(gè)參數(shù)用來(lái)配置顯示時(shí)長(zhǎng)的。我想要它 3s 后自動(dòng)關(guān)閉的話，這時(shí)可以調(diào)用 close() 方法來(lái)關(guān)閉通知。

var n = new Notification('狀態(tài)更新提醒',{
    body: '你的朋友圈有3條新?tīng)顟B(tài)，快去查看吧'})setTimeout(function() {
    n.close();}, 3000);
事件

Notification 接口的 onclick屬性指定一個(gè)事件偵聽(tīng)器來(lái)接收 click 事件。當(dāng)點(diǎn)擊通知窗口時(shí)會(huì)觸發(fā)相應(yīng)事件，比如打開(kāi)一個(gè)網(wǎng)址，引導(dǎo)用戶回到自己的網(wǎng)站去。

var n = new Notification('狀態(tài)更新提醒',{
    body: '你的朋友圈有3條新?tīng)顟B(tài)，快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }})n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打開(kāi)網(wǎng)址
    n.close();                              // 并且關(guān)閉通知}
應(yīng)用場(chǎng)景

前面說(shuō)那么多，其實(shí)就是為了用。那么到底哪些地方可以用到呢？

現(xiàn)在網(wǎng)站的消息提醒，大多數(shù)都是在消息中心顯示個(gè)消息數(shù)量，然后發(fā)郵件告訴用戶，這流程完全沒(méi)有錯(cuò)。不過(guò)像我這種用戶，覺(jué)得別人點(diǎn)個(gè)贊，收藏一下都要發(fā)個(gè)郵件提醒我，老是要去刪郵件（強(qiáng)迫癥），我是覺(jué)得挺煩的甚至關(guān)閉了郵件提醒。

當(dāng)然這里并不是說(shuō)要用 Notification，畢竟它和郵件的功能完全不一樣。

我覺(jué)得比較適合的是新聞網(wǎng)站。用戶瀏覽新聞時(shí)，可以推送給用戶實(shí)時(shí)新聞。以騰訊體育為例，它就使用了 Notification API。在頁(yè)面中引入了一個(gè) notification2017_v0118.js，有興趣可以看看別人是怎么成熟的使用的。

一進(jìn)入頁(yè)面，就獲取授權(quán)，同時(shí)自己頁(yè)面有個(gè)浮動(dòng)框提示你允許授權(quán)。如果允許之后，就開(kāi)始給你推送通知了。不過(guò)它在關(guān)閉標(biāo)簽卡的時(shí)候，通知也會(huì)被關(guān)閉，那是因?yàn)楸O(jiān)聽(tīng)了頁(yè)面 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)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章標(biāo)題：html5中NotificationAPI怎么用-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article22/gghcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、商城網(wǎng)站、軟件開(kāi)發(fā)、外貿(mào)建站、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

綿陽(yáng)服務(wù)器托管