在我們?nèi)粘5闹杏袨g覽各種應(yīng)用或者網(wǎng)頁的小伙伴們都會收到很多消息通知,那么今天我們就來講講關(guān)于:“html5消息通知怎么實現(xiàn)?實現(xiàn)方法分享! ”這個問題的相關(guān)內(nèi)容。
一、先睹為快
我們先來嘗試一個最簡單的例子,打開 chrome
開發(fā)者工具,粘貼代碼進去直接運行:
new Notification('Jartto's 消息通知', {
dir: 'rtl',
body: '這是一個消息,通過 Web Notification 發(fā)送,作為測試!',
icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'
})
并沒有出現(xiàn)什么消息通知,怎么回事?不要著急,接著往下看。
二、用戶授權(quán)
按照上面的示例,我們運行了,但是并沒有成功調(diào)起消息推送框。這時候需要查看一下是否用戶授權(quán),控制臺輸入: > Notification.permission
很快我們就會發(fā)現(xiàn),原來用戶許可是 default
,因為不知道用戶的選擇,所以瀏覽器的行為與 denied
時相同,即為拒絕。
三、兼容性
看到這些 HTML5
的高級 API
,總是會有一些顧慮。例子雖好,用起來也很方便,但是到底兼容性如何,這是一個值得思考的問題。
可以看到,基本上所有瀏覽器都支持了,除了 iOS Safari
和 Opera Mini
,所以移動端應(yīng)用需謹慎。
四、API 文檔
我們先來系統(tǒng)性的梳理一下 API,很簡單,花 5 分鐘過一下。
用例:
let notification = new Notification(title, options)
參數(shù):
title:一定會被顯示的通知標題
options:一個被允許用來設(shè)置通知的對象。它包含以下屬性:
- dir : 文字的方向;它的值可以是 auto (自動), ltr (從左到右), or rtl (從右到左)
- lang: 指定通知中所使用的語言。這個字符串必須在 BCP 47 language tag 文檔中是有效的。
- body: 通知中額外顯示的字符串
- tag: 賦予通知一個 ID ,以便在必要的時候?qū)νㄖM行刷新、替換或移除。
- icon: 一個圖片的 URL ,將被用于顯示通知的圖標。
屬性:
Notification.permission: 一個用于表明當前通知顯示授權(quán)狀態(tài)的字符串。可能的值包括:
denied
(用戶拒絕了通知的顯示),granted
(用戶允許了通知的顯示),default
(因為不知道用戶的選擇,所以瀏覽器的行為與denied
時相同)
方法:
- Notification.onclick:處理 click 事件的處理,每當用戶點擊通知時被觸發(fā)。
- Notification.onshow:處理 show 事件的處理,當通知顯示的時候被觸發(fā)。
- Notification.onerror:處理 error 事件的處理,每當通知遇到錯誤時被觸發(fā)。
- Notification.onclose:處理 close 事件的處理,當用戶關(guān)閉通知時被觸發(fā)。
- Notification.requestPermission():用于當前頁面想用戶申請顯示通知的權(quán)限。
- Notification.close():用于關(guān)閉通知。
Notification.requestPermission 這個方法只能被用戶行為調(diào)用(比如:onclick 事件),并且不能被其他的方式調(diào)用。
五、完整示例
按照上面 API ,我們來寫一個完整的示例:
function notifyMe(){
// 先檢查瀏覽器是否支持
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 檢查用戶是否同意接受通知
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// 否則我們需要向用戶獲取權(quán)限
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission){
// 如果用戶同意,就可以向他們發(fā)送通知
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// 最后,如果執(zhí)行到這里,說明用戶已經(jīng)拒絕對相關(guān)通知進行授權(quán)
// 出于尊重,我們不應(yīng)該再打擾他們了
}
那么通過這篇小編收集整理的文章內(nèi)容相信大家對于:“html5消息通知怎么實現(xiàn)?實現(xiàn)方法分享! ”這個問題的相關(guān)內(nèi)容就有所了解了吧!當然在html5中的問題和相關(guān)使用內(nèi)容方法不止如此,更多的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學(xué)習(xí)和了解。