前言

在很多場景下，需要一種通知的交互方式來提醒用戶，傳統(tǒng)方式下可以在頁面實(shí)現(xiàn)一個 Dialog，或通過修改網(wǎng)頁的 title 來實(shí)現(xiàn)消息的通知。然而傳統(tǒng)的實(shí)現(xiàn)存在著一定的不足，在網(wǎng)頁最小化的情況下，無法查看任何通知，導(dǎo)致用戶無法及時獲取通知信息。

給力的 W3C 推出了 Notifications API，專注于 WEB 的通知。

---

Notifications

Notifications API 的 Notification 界面用于配置和顯示用戶的桌面通知。 這些通知的外觀和特定功能因平臺而異，但通常它們提供了一種向用戶異步提供信息的方法。

此 API 在 WebWorker 環(huán)境下也可以使用。
注意：此 API 必須運(yùn)行在 https 環(huán)境下，非 https 環(huán)境無法授權(quán)。

流程：

構(gòu)造器

語法：

var myNotification = new Notification(title, options);

參數(shù)：

• title：DOMString，定義通知的標(biāo)題，該標(biāo)題在觸發(fā)時將顯示在通知窗口的頂部。
• options：
  • actions：NotificationActions 數(shù)組，表示在顯示通知時用戶可用的操作。 這些是用戶可以選擇的選項(xiàng)，以便在通知本身的上下文中對該動作起作用。 操作的名稱將發(fā)送到服務(wù)工作者通知處理程序，以使其知道用戶已選擇的操作。數(shù)組的成員應(yīng)該是對象文字。它可能包含以下值：（注意：此屬性只在 serviceWorker 環(huán)境下有效。click 時可以通過 event.action 來獲取）
    • action：DOMString，顯示在通知上的 action 標(biāo)志。
    • title：DOMString，顯示在通知上的 action 標(biāo)題。
    • icon：USVString，顯示在 action 上的 icon URL。
  • badge：包含圖像 URL 的U SVString，用于在沒有足夠空間顯示通知本身時表示通知，例如 Android Notification Bar。 在 Android 設(shè)備上，徽章應(yīng)能容納高達(dá)4倍分辨率的設(shè)備，大約 96 x 96 像素，并且圖像將自動屏蔽。
  • body：表示要在通知中顯示的額外內(nèi)容的字符串。
  • data：希望與通知關(guān)聯(lián)的任意數(shù)據(jù)。這可以是任何數(shù)據(jù)類型，通event.currentTarget.data 來獲取。
  • dir：顯示通知的方向。 它默認(rèn)為 auto，它只采用瀏覽器的語言設(shè)置行為，但你可以通過設(shè)置 ltr 和 rtl 的值來覆蓋該行為（盡管大多數(shù)瀏覽器似乎忽略這些設(shè)置。）
  • icon：USVString，包含要在通知中顯示的圖標(biāo)的URL。
  • lang：指定通知中使用的 lang。此字符串必須是有效的 BCP 47 語言標(biāo)記。
  • renotify：Boolean，指定在新通知替換舊通知后是否應(yīng)通知用戶。 默認(rèn)值為false，表示不會通知他們。
  • requirInteraction：表示通知應(yīng)保持活動狀態(tài)，直到用戶單擊或關(guān)閉它，而不是自動關(guān)閉。 默認(rèn)值為 false。必須帶 tag 才有效果。
  • silent：無論設(shè)備設(shè)置如何，都應(yīng)該發(fā)出一個布爾值，指定通知是否應(yīng)該是靜音，即不應(yīng)發(fā)出聲音或振動。 默認(rèn)值為 false，這意味著它不會是靜默的。
  • tag：給定通知的 ID，允許您在必要時使用腳本查找，替換或刪除通知。
  • timestamp：DOMTimeStamp 表示創(chuàng)建通知的時間。 它可用于指示通知實(shí)際的時間。 例如，這可能是在過去，當(dāng)通知用于因設(shè)備離線而無法立即傳遞的消息時，或?qū)碛糜诩磳㈤_始的會議時間。
  • vibrate：與通知顯示一起運(yùn)行的振動模式。 振動模式可以是具有少至一個成員的陣列。 值是以毫秒為單位的時間，其中偶數(shù)索引（0,2,4等）表示振動多長時間，奇數(shù)索引表示暫停多長時間。 例如，[300,100,400] 將振動 300ms，暫停 100ms，然后振動 400ms。

屬性

靜態(tài)屬性：

• permission：Notification.permission ，獲取當(dāng)前用戶對通知的權(quán)限。值：
  • granted：用戶已授權(quán)顯示系統(tǒng)通知。
  • denied：用戶已拒絕顯示系統(tǒng)通知。
  • default：用戶未做決定，程序表現(xiàn)為拒絕。

實(shí)例屬性：（含義同構(gòu)造器中的 option）

• actions
• badge
• body
• data
• dir
• lang
• tag
• icon
• image
• renotify
• requireInteraction
• silent
• timestamp
• vibrate

事件

onclick

點(diǎn)擊顯示通知框時觸發(fā)的事件。

Notification.onclick = function(event) { ... };

可以通過 preventDefault() 阻止焦點(diǎn)顯示到 notification 打開的 tab 上。
通過 event.currentTarget 來獲取屬性。

onclose

通知關(guān)閉時，觸發(fā)此事件。
必須調(diào)用 Notification.close() 才能觸發(fā)此事件。

Notification.onclose = function() { ... };

onerror

用作錯誤事件的事件處理程序。發(fā)生錯誤時，將調(diào)用指定的函數(shù)。如果為null，則沒有錯誤處理程序生效。

Notification.onerror = EventListener;

onshow

通知出現(xiàn)的時候，觸發(fā)此事件。

Notification.onshow = function() { ... };

方法

靜態(tài)方法：

• requestPermission()：請求通知權(quán)限。返回 Promise，類型為 Notification.permission。

當(dāng)前 permission 為 default 時，出現(xiàn)授權(quán)通知：

注意：在 PC 中，當(dāng)出現(xiàn)授權(quán)通知時，如果不做任何選擇，而是點(diǎn)擊右上角的關(guān)閉x，連續(xù)三次這種操作后，系統(tǒng)會自動設(shè)置為 denied。

當(dāng)前 permission 為 granted 時，直接返回 Promise，執(zhí)行 then 后的代碼。后續(xù)不需要在申請權(quán)限。

當(dāng)前 permission 為 denied 時，直接返回 Promise，執(zhí)行 catch 后面的代碼。后續(xù)一直是拒絕狀態(tài)，不再彈出授權(quán)框。此時 serviceWorker pushManager 不可用，訂閱會拋出錯誤。此狀態(tài)下，只能通過用戶自己去修改權(quán)限。

實(shí)例方法：

• close()：Notification 實(shí)例調(diào)用，關(guān)閉通知，觸發(fā) onclose 事件。

---

實(shí)例

點(diǎn)擊通知 打開指定頁面

Notification.requestPermission().then(() => {var n = new Notification('天氣預(yù)報(bào)', {body: '今天天氣晴朗，詳情請點(diǎn)擊~',icon: 'https://img.alicdn.com/tfs/TB1XPvwUVzqK1RjSZFvXXcB7VXa-1024-1024.png',requireInteraction: true,data: {nav: 'https://baidu.com'}});n.onclick = event => {n.close();if(event.currentTarget.data.nav) {window.open(event.currentTarget.data.nav);}}; }).catch(() => {alert('通知權(quán)限已禁止，請?jiān)O(shè)置打開權(quán)限'); })

通知按鈕交互

actions 必須在 serviceWorker 中使用。

navigator.serviceWorker.ready.then(swReg => {Notification.requestPermission().then(() => {swReg.showNotification('好友請求', {body: '美女向你打招呼~',icon: 'https://img.alicdn.com/tfs/TB1qyPtU3HqK1RjSZFEXXcGMXXa-640-859.png',requireInteraction: true,actions: [{action: 'yes',title: '加好友',}, {action: 'no',title: '拒絕'}]});}) })

sw 環(huán)境處理代碼：

self.addEventListener("notificationclick", function(event) {console.log("notificationclick", event);event.notification.close();if(event.action == 'yes') {// ***} else if(event.action == 'no') {// xxx} });

---

兼容性

---

博客名稱：王樂平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本作品采用知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議進(jìn)行許可。

總結(jié)

以上是生活随笔為你收集整理的PWA(Progressive Web App)入门系列：Notification的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。