PWA(Progressive Web App)入門系列：Notification

前言

在不少場景下，須要一種通知的交互方式來提醒用戶，傳統方式下能夠在頁面實現一個 Dialog，或經過修改網頁的 title 來實現消息的通知。然而傳統的實現存在着必定的不足，在網頁最小化的狀況下，沒法查看任何通知，致使用戶沒法及時獲取通知信息。

給力的 W3C 推出了 Notifications API，專一於 WEB 的通知。

---

Notifications

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

此 API 在 WebWorker 環境下也可使用。 注意：此 API 必須運行在 https 環境下，非 https 環境沒法受權。

流程：

構造器

語法：

var myNotification = new Notification(title, options);
複製代碼

參數：

• title：DOMString，定義通知的標題，該標題在觸發時將顯示在通知窗口的頂部。
• options：
  • actions：NotificationActions 數組，表示在顯示通知時用戶可用的操做。 這些是用戶能夠選擇的選項，以便在通知自己的上下文中對該動做起做用。 操做的名稱將發送到服務工做者通知處理程序，以使其知道用戶已選擇的操做。數組的成員應該是對象文字。它可能包含如下值：（注意：此屬性只在 serviceWorker 環境下有效。click 時能夠經過 event.action 來獲取）
    • action：DOMString，顯示在通知上的 action 標誌。
    • title：DOMString，顯示在通知上的 action 標題。
    • icon：USVString，顯示在 action 上的 icon URL。
  • badge：包含圖像 URL 的U SVString，用於在沒有足夠空間顯示通知自己時表示通知，例如 Android Notification Bar。 在 Android 設備上，徽章應能容納高達4倍分辨率的設備，大約 96 x 96 像素，而且圖像將自動屏蔽。
  • body：表示要在通知中顯示的額外內容的字符串。
  • data：但願與通知關聯的任意數據。這能夠是任何數據類型，通event.currentTarget.data 來獲取。
  • dir：顯示通知的方向。 它默認爲 auto，它只採用瀏覽器的語言設置行爲，但你能夠經過設置 ltr 和 rtl 的值來覆蓋該行爲（儘管大多數瀏覽器彷佛忽略這些設置。）
  • icon：USVString，包含要在通知中顯示的圖標的URL。
  • lang：指定通知中使用的 lang。此字符串必須是有效的 BCP 47 語言標記。
  • renotify：Boolean，指定在新通知替換舊通知後是否應通知用戶。 默認值爲false，表示不會通知他們。
  • requirInteraction：表示通知應保持活動狀態，直到用戶單擊或關閉它，而不是自動關閉。 默認值爲 false。必須帶 tag 纔有效果。
  • silent：不管設備設置如何，都應該發出一個布爾值，指定通知是否應該是靜音，即不該發出聲音或振動。 默認值爲 false，這意味着它不會是靜默的。
  • tag：給定通知的 ID，容許您在必要時使用腳本查找，替換或刪除通知。
  • timestamp：DOMTimeStamp 表示建立通知的時間。 它可用於指示通知實際的時間。 例如，這多是在過去，當通知用於因設備離線而沒法當即傳遞的消息時，或未來用於即將開始的會議時間。
  • vibrate：與通知顯示一塊兒運行的振動模式。 振動模式能夠是具備少至一個成員的陣列。 值是以毫秒爲單位的時間，其中偶數索引（0,2,4等）表示振動多長時間，奇數索引表示暫停多長時間。 例如，[300,100,400] 將振動 300ms，暫停 100ms，而後振動 400ms。

屬性

靜態屬性：

• permission：Notification.permission ，獲取當前用戶對通知的權限。值：
  • granted：用戶已受權顯示系統通知。
  • denied：用戶已拒絕顯示系統通知。
  • default：用戶未作決定，程序表現爲拒絕。

實例屬性：（含義同構造器中的 option）

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

事件

onclick

點擊顯示通知框時觸發的事件。

Notification.onclick = function(event) { ... };
複製代碼

能夠經過 preventDefault() 阻止焦點顯示到 notification 打開的 tab 上。 經過 event.currentTarget 來獲取屬性。

onclose

通知關閉時，觸發此事件。 必須調用 Notification.close() 才能觸發此事件。

Notification.onclose = function() { ... };
複製代碼

onerror

用做錯誤事件的事件處理程序。發生錯誤時，將調用指定的函數。若是爲null，則沒有錯誤處理程序生效。

Notification.onerror = EventListener;
複製代碼

onshow

通知出現的時候，觸發此事件。

Notification.onshow = function() { ... };
複製代碼

方法

靜態方法：

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

當前 permission 爲 default 時，出現受權通知：

注意：在 PC 中，當出現受權通知時，若是不作任何選擇，而是點擊右上角的關閉x，連續三次這種操做後，系統會自動設置爲 denied。

當前 permission 爲 granted 時，直接返回 Promise，執行 then 後的代碼。後續不須要在申請權限。

當前 permission 爲 denied 時，直接返回 Promise，執行 catch 後面的代碼。後續一直是拒絕狀態，再也不彈出受權框。此時 serviceWorker pushManager 不可用，訂閱會拋出錯誤。此狀態下，只能經過用戶本身去修改權限。

實例方法：

• close()：Notification 實例調用，關閉通知，觸發 onclose 事件。

---

實例

點擊通知 打開指定頁面

Notification.requestPermission().then(() => {
  var n = new Notification('天氣預報', {
    body: '今每天氣晴朗，詳情請點擊~',
    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('通知權限已禁止，請設置打開權限');
})
複製代碼

通知按鈕交互

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 環境處理代碼：

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

---

兼容性

---

博客名稱：王樂平博客

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

本做品採用 知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。