起因：在做一些交互式頁面時菱父，如果切換到瀏覽器其他頁面灾螃，或者是縮小了瀏覽器等等凿试，都可能導致忽略了該關注的頁面有新的消息或回調匹舞，所以需要有比較友好的提醒方式（例如有個消息彈窗提示）褐鸥。
解決：Notification 一個H5的新特性，可以實現(xiàn)Web的桌面通知功能赐稽。它生成的消息通知不需要依附某個頁面叫榕，而是依附于瀏覽器，從而可以讓我們不需要停留在頁面上姊舵。
使用桌面通知流程：
1晰绎、檢查瀏覽器是否支持Notification；
2括丁、檢查瀏覽器的通知權限荞下；
3、若沒有權限，先獲取瀏覽器的通知權限锄弱；
4考蕾、創(chuàng)建消息通知；
5会宪、展示消息通知肖卧；
6、設置關閉回調掸鹅；
示例場景：聊天會話塞帐；
預計效果：每次新消息都彈窗提醒，且點擊彈窗可打開對應會話巍沙，關閉該會話所有消息通知葵姥，保留其他會話消息通知；
小坑：Windows上谷歌瀏覽器每次只展示一個彈窗句携，360榔幸、搜狗每次最多展示3個；Mac上谷歌跟360都可展示所有彈窗矮嫉，無搜狗瀏覽器可安裝削咆，不知道效果；
使用示例：
// 消息通知提示音
const notificationAudio = new Audio('https://img-fe.tengzhihh.com/audio/c58fb135c2546f.mp3');
// 消息彈窗數(shù)組
const notificationInstanceArr: Array<{ [propName: string]: number | Notification }> = [];
Function handleNotification () {
// 檢查是否支持
if (!('Notification' in window)) {
console.log('瀏覽器不支持消息通知');
return;
}
// 創(chuàng)建配置項
const options = {
body: '您有新的未讀消息', // 展示內容
silent: false, // 是否靜音
lang: 'ZH',
sticky: true, // 是否粘性展示蠢笋，不輕易被清理
// renotify: true, // 彈窗內容更新拨齐，是否重新通知，需與tag搭配使用
requireInteraction: true, // 是否保持昨寞，不自動關閉
};
// 檢查權限是否已獲取 已獲取為granted
if (Notification.permission !== 'granted') {
// 未允許權限瞻惋，則申請權限
Notification.requestPermission(function (status) {
if (status == 'granted') {
// 創(chuàng)建提醒
const notification = new Notification('新消息提醒', options);
// 設置點擊事件
notification.onclick = function () {
handleMessageFocus(data);
};
// 存儲通知實例，保留最新三個
if (notificationInstanceArr.length == 3) {
const instance = notificationInstanceArr.shift()?.instance;
instance?.close();
}
notificationInstanceArr.push({
id: target.id,
instance: notification,
});
// 播放通知音頻
notificationAudio?.play();
}
});
} else {
// 已有權限援岩，重復操作即可
const notification = new Notification('新消息提醒', options);
notification.onclick = function () {
handleMessageFocus(data);
};
if (notificationInstanceArr.length == 3) {
const instance = notificationInstanceArr.shift()?.instance;
instance?.close();
}
notificationInstanceArr.push({
id: target.id,
instance: notification,
});
notificationAudio?.play();
}
}
function handleMessageFocus (target) {
// 可以在這里 根據(jù)新消息target歼狼，處理展示具體會話邏輯
// ...
// 展示原有頁面
window.focus();
// 刪除點擊的會話通知
for (let i = 0; i < notificationInstanceArr.length; i++) {
if (notificationInstanceArr[i].id == target.id) {
notificationInstanceArr[i].instance.close();
notificationInstanceArr.splice(i, 1);
i--;
}
}
}
注意：系統(tǒng)設置、瀏覽器設置相關的權限都能導致通知無效享怀，無效時可以優(yōu)先看看權限設置蹂匹。
