摘要：推送通知這一功能在移動端已經(jīng)非常普遍。消息推送和通知消息推送和通知是兩個不同的接口。消息通知網(wǎng)絡(luò)應(yīng)用中的服務(wù)工作線程或者腳本進行操作向用戶顯示消息通知。是消息推送服務(wù)之一。可以從對象的屬性值獲得處理消息推送的請求地址。

原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。

本系列持續(xù)更新中，Github 地址請查閱這里。

這是 JavaScript 工作原理的第九章。

現(xiàn)在讓我們把注意力轉(zhuǎn)移到網(wǎng)頁推送通知：我們將會查看其構(gòu)造，探索發(fā)送／接收通知背后的過程以及最后分享一下我們在 SessionStack 是如何計劃利用這些功能來創(chuàng)建新的產(chǎn)品功能的。

推送通知這一功能在移動端已經(jīng)非常普遍。不知為何，網(wǎng)頁端的推送通知是千呼萬喚始出來，即使大多數(shù)開發(fā)者強烈地要求實現(xiàn)這一功能。

網(wǎng)頁推送通知允許用戶選擇定時從網(wǎng)絡(luò)應(yīng)用獲取及時信息。它旨在為用戶重新獲取其感興趣，重要和及時的信息。

推送服務(wù)是基于服務(wù)工作線程的，服務(wù)工作線程在之前的文章中有詳細闡述過。

這個情況下，之所以采用服務(wù)工作線程是因為它會在后臺運行，從而不會阻塞界面的渲染。對于推送通知來說，這是相當重要的，因為這意味著只有當用戶和推送通知本身進行交互操作才會執(zhí)行推送通知的相關(guān)代碼。

消息推送和通知是兩個不同的接口。

消息推送－消息推送服務(wù)器向服務(wù)工作線程推送消息時調(diào)用。

消息通知－網(wǎng)絡(luò)應(yīng)用中的服務(wù)工作線程或者腳本進行操作向用戶顯示消息通知。

實現(xiàn)消息推送大概有以下三個步驟：

界面－添加客戶端邏輯來讓用戶訂閱推送服務(wù)。在網(wǎng)絡(luò)應(yīng)用界面中書寫 JavaScript 代碼邏輯來讓用戶注冊消息推送服務(wù)。

發(fā)送消息－在服務(wù)器端實現(xiàn)接口調(diào)用來觸發(fā)向用戶設(shè)備推送消息。

接收消息－一旦在瀏覽器端接收到推送消息則處理之。

現(xiàn)在，讓我們詳細闡述整個過程。

首先，需要檢測當前瀏覽器是否支持消息推送服務(wù)。可以采用以下兩種簡單的檢查：

檢測 navigator 對象上的 serviceWorker 屬性

檢測 window 對象上的 PushManager 屬性

都檢測代碼如下：

if (!("serviceWorker" in navigator)) {
   // 當前瀏覽器不支持服務(wù)器工作線程，禁用或者隱藏界面
  return; 
}

if (!("PushManager" in window)) {
  // 當前瀏覽器不支持推送服務(wù)，禁用或者隱藏界面 
  return; 
}

現(xiàn)在，消息推送功能是支持的。下一下即注冊服務(wù)工作線程。

從之前的文章中你應(yīng)該很熟悉如何注冊服務(wù)工作線程。

當注冊服務(wù)工作線程之后，接下來進行用戶訂閱的相關(guān)操作。這需要獲得用戶的授權(quán)來向其推送消息。

獲得授權(quán)的接口相當?shù)暮唵蔚幸粋€缺點即接口 接受的參數(shù)以前是一個回調(diào)函數(shù)現(xiàn)在是一個 Promise。因為無法知曉當前瀏覽器支持的接口版本，所以需要進行兼容處理。

類似這樣：

function requestPermission() {
  return new Promise(function(resolve, reject) {
    const permissionResult = Notification.requestPermission(function(result) {
      // 使用回調(diào)來處理廢棄的接口版本
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  })
  .then(function(permissionResult) {
    if (permissionResult !== "granted") {
      throw new Error("Permission not granted.");
    }
  });
}

調(diào)用 Notification.requestPermission() 會向用戶彈出以下的提示框：

當獲得，關(guān)閉以及禁止權(quán)限的時候，就可以得到 granted，default 或者 denied 的結(jié)果字符串。

需要注意的是當用戶點擊 禁止 按鈕，網(wǎng)絡(luò)應(yīng)用將不會再次詢問用戶授權(quán)直到用戶手動開啟更改授權(quán)狀態(tài)。該選項隱藏于設(shè)置面板中。

點擊地址欄最左邊的信息按鈕即可彈出授權(quán)的彈窗。

一旦服務(wù)工作線程注冊成功且獲得授權(quán)，就可以在注冊服務(wù)器線程的時候通過調(diào)用 registration.pushManager.subscribe() 來訂閱用戶。

整個代碼片斷如下（包括注冊服務(wù)工作線程）：

function subscribeUserToPush() {
  return navigator.serviceWorker.register("service-worker.js")
  .then(function(registration) {
    var subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: btoa(
        "BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U"
      )
    };

    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) {
    console.log("PushSubscription: ", JSON.stringify(pushSubscription));
    return pushSubscription;
  });
}

registration.pushManager.subscribe(options） 中有一個 options 對象參數(shù)，其中包含有必須或者可選的參數(shù)：

userVisibleOnly：返回的推送訂閱是否僅對訂閱用戶可見。必須設(shè)置為 true 否則會出錯（這是歷史原因造成的）。

applicationServerKey：一個包含公鑰的 Base64 編碼的 DOMString 字符串或者 ArrayBuffer ，消息推送服務(wù)器用來驗證應(yīng)用服務(wù)器。

消息推送服務(wù)器需要生成一對應(yīng)用服務(wù)器密鑰對－即 VAPID 密鑰對，這對于消息推送服務(wù)器來說是唯一的。它們是由一對公鑰和私鑰所組成的。私鑰秘密存儲于推送服務(wù)器端，公鑰用來和客戶端進行交換通訊用的。這些密鑰讓推送服務(wù)辨別訂閱用戶的應(yīng)用服務(wù)器以及確保觸發(fā)推送消息到指定用戶的是同一個應(yīng)用服務(wù)器。

你只需要一次性生成應(yīng)用程序私有/公有密鑰對。可以訪問 https://web-push-codelab.glit... 生成密鑰對。

當訂閱用戶的時候，瀏覽器向推送服務(wù)傳入 applicationServerKey (公鑰)，意即推送服務(wù)把應(yīng)用服務(wù)器公鑰和用戶的 PushSubscription 綁定在一起。

過程如下：

網(wǎng)絡(luò)應(yīng)用加載完成然后，調(diào)用 subscribe ，傳入服務(wù)器公鑰。

瀏覽器向消息推送服務(wù)發(fā)起請求生成一個端點信息并連同密鑰信息一起返回給瀏覽器。

瀏覽器把端信息添加到由 subscribe() promise 所返回的 PushSubscription 對象中。

之后，每當需要推送信息的時候，必須發(fā)送一個認證頭其中包含應(yīng)用服務(wù)器私鑰簽名的信息。

每當推送服務(wù)接收到推送消息的請求，它會通過在傳輸頭中查找已經(jīng)和指定端（第二步中）綁定的公鑰來進行驗證。

PushSubscription 包含了向用戶設(shè)備推送信息所必備的一切信息。大概包含如下信息：

{
  "endpoint": "https://domain.pushservice.com/some-id",
  "keys": {
    "p256dh":
"BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=",
    "auth":"FPssMOQPmLmXWmdSTdbKVw=="
  }
}

endpoint 即是推送服務(wù)地址。當需要推送消息時，向該地址發(fā)起 POST 請求。

keys 對象包含用來加密隨推送消息一起發(fā)送的信息數(shù)據(jù)的值。

當用戶訂閱之后且返回了 PushSubscription 對象，你需要把它保存在推送服務(wù)器上。這樣就可以把該訂閱相關(guān)數(shù)據(jù)保存在數(shù)據(jù)庫之中然后從今以后，就可以根據(jù)數(shù)據(jù)庫中的存儲值來給指定的用戶發(fā)送消息。

當需要發(fā)送消息到用戶的時候，首先需要有一個消息推送服務(wù)。你通知推送服務(wù)（通過接口調(diào)用）需要推送的數(shù)據(jù)，消息推送的目標用戶以及任意條件下如何發(fā)送消息。一般情況下，這些接口調(diào)用是由消息推送服務(wù)器來完成的。

消息推送服務(wù)是用來接收消息推送請求，驗證請求以及推送消息到指定的用戶瀏覽器端。

請注意這里的消息推送服務(wù)并不是由你來控制的－它是第三方服務(wù)。服務(wù)器只是通過接口來和消息推送服務(wù)進行通訊。Google’s FCM 是消息推送服務(wù)之一。

消息推送服務(wù)會處理核心的事務(wù)。比如，當瀏覽器離線，推送服務(wù)在發(fā)送各自的消息之前會排隊消息且等待直到瀏覽器連網(wǎng)。

開發(fā)人員可以選擇讓瀏覽器使用任意的消息推送服務(wù)。

然而，所有的消息推送服務(wù)都擁有一樣的接口，這樣就不會由于接口不一而增加消息推送實現(xiàn)的難度。

可以從 PushSubscription 對象的 endpoint 屬性值獲得處理消息推送的請求 URL 地址。

消息推送服務(wù)接口提供了向用戶發(fā)送消息的一種方法。該接口是一個被稱為 Web Push Protocol 的 IETF 標準協(xié)議，里面定義了如何調(diào)用消息推送服務(wù)。

推送的消息必須得加密。這樣可以防止消息推送服務(wù)窺視到發(fā)送的數(shù)據(jù)。這是至關(guān)重要的因為客戶端可以決定使用哪個消息推送服務(wù)（可能會使用一些不被信任和不安全的消息推送服務(wù)）。

消息推送參數(shù)：

TTL－定義消息在被刪除且不能夠傳輸之前在隊列中的保存時長。

Priority－定義了每條消息的優(yōu)先級，這樣就可以讓消息推送服務(wù)只推送高優(yōu)先級的消息以方便用戶節(jié)省設(shè)備的電力。

Topic－為推送消息設(shè)置主題名稱這樣就可以使用相同的主題名稱來置換掉掛起的消息，所以一旦設(shè)備激活，用戶就不會收到過期的消息。

每當發(fā)送消息到如上的推送服務(wù)，消息會處于待發(fā)送狀態(tài)直到發(fā)生以下幾種情況：

設(shè)備連網(wǎng)。

隊列中的消息停留時長超過設(shè)置的 TTL。

當消息推送服務(wù)傳輸消息到瀏覽器，瀏覽器會接收到，解密，然后分派給服務(wù)工作線程 push 事件。

劃重點這里即使沒有打開網(wǎng)頁，瀏覽器仍然可以執(zhí)行服務(wù)工作線程。會發(fā)生如下事件：

瀏覽器解密接收的推送消息。

瀏覽器喚醒服務(wù)工作線程。

服務(wù)工作線程接收到 push 事件。

監(jiān)聽推送事件和在 JavaScript 中寫的其它事件監(jiān)聽非常類似。

self.addEventListener("push", function(event) {
  if (event.data) {
    console.log("This push event has data: ", event.data.text());
  } else {
    console.log("This push event has no data.");
  }
});

需要理解服務(wù)工作線程的一點即其運行時間是不可人為控制的。只有瀏覽器可以喚醒和結(jié)束它。

在服務(wù)工作線程中，event.waitUntil(promise) 告訴瀏覽器服務(wù)工作線程正在處理消息直到 promise 解析完成，如果想要完成消息的處理，那么瀏覽器就不應(yīng)該中止服務(wù)工作線程。

以下為處理 push 事件的示例：

self.addEventListener("push", function(event) {
  var promise = self.registration.showNotification("Push notification!");

  event.waitUntil(promise);
});

調(diào)用 self.registration.showNotification() 向用戶彈出一個通知并且返回一個 promise，一旦通知顯示完成即解析完成。

可以采用可視化的方法來設(shè)置符合自己需求的 showNotification(title, options) 方法。title 參數(shù)是字符串而 options 是一個類似如下的對象：

{
  "http://": "視覺選項",
  "body": "",
  "icon": "",
  "image": "",
  "badge": "",
  "vibrate": "",
  "sound": "",
  "dir": "",

  "http://": "行為選項",
  "tag": "",
  "data": "",
  "requireInteraction": "",
  "renotify": "",
  "silent": "",

  "http://": "視覺和行為選項",
  "actions": "",

  "http://": "信息選項。沒有視覺效果",
  "timestamp": ""
}

可以在這里查看到每個選項的更加詳細的內(nèi)容。

每當想要和用戶分享緊急，重要及緊迫的信息的時候，消息推送服務(wù)是用來通知用戶的一個絕佳的方式。

https://developers.google.com...

https://developers.google.com...

https://developers.google.com...

https://developers.google.com...

以下皆為自己擴展的內(nèi)容。

服務(wù)工作線程可以采用類似如下的代碼來進行處理：

self.addEventListener("notificationclick", function(event) {
  console.log("[Service Worker] Notification click Received.");
  
  event.notification.close();

  event.waitUntil(clients.openWindow("https://developers.google.com/web/"));
});

nodejs 可以使用這里的庫來構(gòu)建推送服務(wù)器。

做一個網(wǎng)頁消息推送所需要的條件即：

消息推送服務(wù)器（調(diào)用消息推送服務(wù)及生成 VAPID 公鑰和私鑰對）。

檢查瀏覽器端兼容性，獲取授權(quán)，使用消息推送服務(wù)器生成的公鑰并生成訂閱對象，保存該訂閱對象到推送服務(wù)器上面。

消息推送服務(wù)（第三方服務(wù)）。

一張流程圖來表示吧：