摘要:只有用戶允許的權限下,才能起到作用,避免某些網站的廣告濫用或其它給用戶造成影響。對象提供了方法請求用戶當前來源的權限以顯示通知。代表通知的一個識別標簽,相同時只會打開同一個通知窗口。要在通知中顯示的圖像的。通知保持有效不自動關閉,默認為。
最近在和阿里云客服進行備案溝通的過程中,時常看到阿里云能夠在桌面上實現消息推送,感覺很是神奇,因此就進行了下搜索學習;發現主要用到了Web Notification 來實現桌面消息的推送具體原理如下:
Notification API 是 HTML5 新增的桌面通知 API,用于向用戶顯示通知信息。該通知是脫離瀏覽器的,即使用戶沒有停留在當前標簽頁,甚至最小化了瀏覽器,該通知信息也一樣會置頂顯示出來。
用戶權限想要向用戶顯示通知消息,需要獲取用戶權限,而相同的域名只需要獲取一次權限。只有用戶允許的權限下,Notification 才能起到作用,避免某些網站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的?
Notification.permission 該屬性用于表明當前通知顯示的授權狀態,可能的值包括: default :不知道用戶的選擇,默認。 granted :用戶允許。 denied :用戶拒絕。 if(Notification.permission === "granted"){ console.log("用戶允許通知");}else if(Notification.permission === "denied"){ console.log("用戶拒絕通知");}else{ console.log("用戶還沒選擇,去向用戶申請權限吧"); }請求權限
當用戶還沒選擇的時候,我們需要向用戶去請求權限。Notification 對象提供了 requestPermission() 方法請求用戶當前來源的權限以顯示通知。
以前基于回調的語法已經棄用(當然在現在的瀏覽器中還是能用的),最新的規范已將此方法更新為基于 promise 的語法:
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:代表通知的一個識別標簽,相同tag時只會打開同一個通知窗口。 icon:要在通知中顯示的圖標的URL。 image:要在通知中顯示的圖像的URL。 data:想要和通知關聯的任務類型的數據。 requireInteraction:通知保持有效不自動關閉,默認為false。
還有一些其他的參數,因為用不了或者沒什么用這里就沒必要說了。
var n = new Notification("狀態更新提醒",{
body: "你的朋友圈有3條新狀態,快去查看吧", tag: "linxin", icon: "http://blog.gdfengshuo.com/images/avatar.jpg", requireInteraction: true
})
通知消息的效果圖如下:
image
關閉通知
從上面的參數可以看出,并沒有一個參數用來配置顯示時長的。我想要它 3s 后自動關閉的話,這時可以調用 close() 方法來關閉通知。
var n = new Notification("狀態更新提醒",{
body: "你的朋友圈有3條新狀態,快去查看吧"})setTimeout(function() { n.close();}, 3000);
事件
Notification 接口的 onclick屬性指定一個事件偵聽器來接收 click 事件。當點擊通知窗口時會觸發相應事件,比如打開一個網址,引導用戶回到自己的網站去。
var n = new Notification("狀態更新提醒",{ body: "你的朋友圈有3條新狀態,快去查看吧", data: { url: "http://blog.gdfengshuo.com" } }) n.onclick = function(){ window.open(n.data.url, "_blank"); // 打開網址 n.close(); // 并且關閉通知 }
應用場景
前面說那么多,其實就是為了用。那么到底哪些地方可以用到呢?
現在網站的消息提醒,大多數都是在消息中心顯示個消息數量,然后發郵件告訴用戶,這流程完全沒有錯。不過像我這種用戶,覺得別人點個贊,收藏一下都要發個郵件提醒我,老是要去刪郵件(強迫癥),我是覺得挺煩的甚至關閉了郵件提醒。
當然這里并不是說要用 Notification,畢竟它和郵件的功能完全不一樣。
我覺得比較適合的是新聞網站。用戶瀏覽新聞時,可以推送給用戶實時新聞。以騰訊體育為例,它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js,有興趣可以看看別人是怎么成熟的使用的。
一進入頁面,就獲取授權,同時自己頁面有個浮動框提示你允許授權。如果允許之后,就開始給你推送通知了。不過它在關閉標簽卡的時候,通知也會被關閉,那是因為監聽了頁面 beforeunload 事件。
function addOnBeforeUnload(e) {
FERD_NavNotice.notification.close();}if(window.attachEvent){ window.attachEvent("onbeforeunload", addOnBeforeUnload);} else { window.addEventListener("beforeunload", addOnBeforeUnload, false);
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109502.html
摘要:只有用戶允許的權限下,才能起到作用,避免某些網站的廣告濫用或其它給用戶造成影響。對象提供了方法請求用戶當前來源的權限以顯示通知。代表通知的一個識別標簽,相同時只會打開同一個通知窗口。要在通知中顯示的圖像的。通知保持有效不自動關閉,默認為。 最近在和阿里云客服進行備案溝通的過程中,時常看到阿里云能夠在桌面上實現消息推送,感覺很是神奇,因此就進行了下搜索學習;發現主要用到了Web Not...
摘要:是新增的,用于向用戶配置和顯示桌面通知。通知不自動關閉,默認為自動關閉。在瀏覽器下,沒有關閉請求權限的選項,用戶必須選擇同意拒絕。 showImg(https://segmentfault.com/img/remote/1460000018227718); Notification是HTML5新增的API,用于向用戶配置和顯示桌面通知。上次在別的網站上看到別人的通知彈窗,好奇之余也想知...
摘要:消息提示無非三種方式聲音提示,桌面彈窗和閃爍提醒。聲音提示注意聲音提示前提示已經加載了聲音文件,有文章寫的很多是臨時一個對象,然后這樣做是非常不好的,因為你每次調用聲音的時候都會去后臺請求一下這個聲音文件。所以先加載出來是最好的方法。 web消息提示無非三種方式:聲音提示,桌面彈窗和title閃爍提醒。下面做一一介紹。 聲音提示 注意聲音提示前提示已經加載了聲音文件,有文章寫的很多是臨...
閱讀 1376·2021-10-14 09:43
閱讀 4209·2021-09-27 13:57
閱讀 4552·2021-09-22 15:54
閱讀 2548·2021-09-22 10:54
閱讀 2350·2021-09-22 10:02
閱讀 2108·2021-08-27 13:11
閱讀 867·2019-08-29 18:44
閱讀 1639·2019-08-29 15:20