前幾天，我們做了個(gè)小項(xiàng)目，然后去答辯。老師說(shuō)能不能在Web端加一個(gè)通知信息的東西，比方說(shuō)，我上傳了新的文件上去，你們就能及時(shí)收到通知，知道班里有人上傳新的文件了。我就想起facebook的桌面通知，所以就嘗試著寫起了demo
Notification 是什么？
簡(jiǎn)單的說(shuō)就是瀏覽器上的桌面通知。如下圖：
Notification就長(zhǎng)這樣！
怎么用 Notification
- 語(yǔ)法
let notification = new Notification(title, [options])
title: 必要的通知標(biāo)題
options: {
body: 通知的主要內(nèi)容
icon: 通知的中圖標(biāo)
dir: 文字的方向
tag: 給予通知一個(gè) id
data: 返回一個(gè)數(shù)據(jù)對(duì)象
...
}
事件：onclick, onerror, onclose, onshow
- 權(quán)限詢問(wèn)
if (!("Notification" in window)) {
console.log("你的瀏覽器不支持桌面通知");
} else if (Notification.permission === "granted") {
console.log('用戶允許桌面通知')
var notification = new Notification('這是個(gè)新通知');
} else if (Notification.permission !== "denied") {
Notification.requestPermission(function (permission) {
if (permission === "granted") {
var notification = new Notification('這是個(gè)新通知');
}
});
上面這段代碼的邏輯大概就是這樣：
- 首先判斷瀏覽器是不是支持通知
- 然后判斷用戶是不是允許桌面通知：granted（允許） denied（拒絕）
- 如果用戶既沒(méi)有允許，也沒(méi)有拒絕，那么我們就進(jìn)行權(quán)限詢問(wèn)
