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

快樂平方發表於2019-05-09

前言

在很多場景下，需要一種通知的互動方式來提醒使用者，傳統方式下可以在頁面實現一個 Dialog，或通過修改網頁的 title 來實現訊息的通知。然而傳統的實現存在著一定的不足，在網頁最小化的情況下，無法檢視任何通知，導致使用者無法及時獲取通知資訊。

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

Notifications

Notifications API 的 Notification 介面用於配置和顯示使用者的桌面通知。這些通知的外觀和特定功能因平臺而異，但通常它們提供了一種向使用者非同步提供資訊的方法。

此 API 在 WebWorker 環境下也可以使用。注意：此 API 必須執行在 https 環境下，非 https 環境無法授權。

流程：

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

構造器

語法：

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
  }
});
複製程式碼