摘要：在端，盡管開發人員對其功能的需求很高，但出于某些原因，推送通知被引入的時間比較晚。發送推送通知在服務器上實現調用，該調用觸發到用戶設備的推送消息。推送服務推送服務是接收請求驗證請求并將推送消息發送到對應的瀏覽器。

這是專門探索 JavaScript 及其所構建的組件的系列文章的第9篇。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

如果你錯過了前面的章節，可以在這里找到它們：

JavaScript是如何工作的：引擎，運行時和調用堆棧的概述！

JavaScript是如何工作的：深入V8引擎&編寫優化代碼的5個技巧！

JavaScript如何工作:內存管理+如何處理4個常見的內存泄漏 !

JavaScript是如何工作的:事件循環和異步編程的崛起+ 5種使用 async/await 更好地編碼方式！

JavaScript是如何工作: 深入探索 websocket 和HTTP/2與SSE +如何選擇正確的路徑！

JavaScript是如何工作的:與 WebAssembly比較 及其使用場景 !

JavaScript是如何工作的:Web Workers的構建塊+ 5個使用他們的場景

JavaScript 是如何工作的：Service Worker 的生命周期及使用場景

推送通知在移動端非常常見。在 Web 端，盡管開發人員對其功能的需求很高，但出于某些原因，推送通知被引入 Web 的時間比較晚。

Web 推送通知允許用戶在 Web 應用程序需要更新時選擇是否接收更新消息，目的是在重新吸引用戶群注意的更新信息通常是對用戶來說有趣、重要、實時的內容。

推送通知的基礎是我們 上一篇 講的 Service Workers。

在這種情況下，使用 Service Worker 的原因是它們在后臺工作。這對于推送通知非常有用，因為這意味著只有當用戶與通知本身進行交互時，它們的代碼才會被執行。

推送和通知都有各自的 API

推送 —?當服務器向 Service Worker 提供信息時調用它。

通知 — 這是 Service Worker 或web應用程序中向用戶顯示信息的腳本的操作。

實現 Push 一般的三個步驟:

UI — 添加必要的客戶端邏輯來訂閱推送的用戶。這是 Web 應用程序 UI 需要的 JavaScript 邏輯，以便用戶能夠自己注冊來推送消息。

發送推送通知 — 在服務器上實現 API 調用，該調用觸發到用戶設備的推送消息。

接受推送消息 — 在推送消息到達瀏覽器時處理它。

接下來討論更詳細的過程。

首先，我們需要檢查當前瀏覽器是否支持推送消息，可以通過兩個簡單的檢查來判斷是否支持推送消息:

檢查 navigator 對象上的 serviceWorker

檢查 window 對象上的 PushManager

代碼如下：

如果瀏覽器支持該功能，下一步驟就是注冊 Service Worker。

如何注冊 Service Worker，上一篇文章 JavaScript 是如何工作的：Service Worker 的生命周期及使用場景 里面就有講過了。

Service Worker 注冊后，我們就可以開始訂閱該用戶。為此，我們需要得到用戶的許可才能給用戶發送推送消息。

獲得權限的 API 相對簡單，但是缺點是，API 已經 從回調更改為返回 Promise。這就引入了一個問題:我們不知道當前瀏覽器實現了 API 的哪個版本，因此必須同時實現和處理這兩個版本，如下：

調用 Notification.requestpermission() 會在瀏覽器顯示如下提示:

一旦權限被授予、關閉或阻塞，我們將會接收分別對應的一個字符串:granted、default 或 denied。

請記住，如果用戶單擊了 Block 按鈕，你的 Web 應用程序將無法再次請求用戶的權限，直到他們通過更改權限狀態手動 “解除” 你的應用程序的權限，此選項隱藏在設置面板中。

一旦注冊了 Service Worker 并獲得了許可，就可以在注冊 Service Worker 時通過調用registration.pushManager.subscribe() 訂閱用戶。

整個代碼片段可如下(包括注冊 Service Worker):

registration.pushManager.subscribe(options) 接受一個 options 對象，它包含必要參數和可選參數：

userVisibleOnly： 布爾值，表示返回的推送訂閱將只能被用于對用戶可見的消息。

applicationServerKey：推送服務器用來向客戶端應用發送消息的公鑰。該值是應用程序服務器生成的簽名密鑰對的一部分，可使用在 P-256 曲線上實現的橢圓曲線數字簽名（ECDSA）。可以是 DOMString 或 ArrayBuffer。

你的服務器需要生成一對 application server keys?——這些密鑰也稱為 VAPID 密鑰，它們是服務器特有的。它們是一對公鑰和私鑰。私鑰秘密存儲在你的終端，而公鑰則與客戶端交換。這些鍵允許推送服務知道哪個應用服務器訂閱了某個用戶，并確保觸發該用戶的推送消息的服務器是同一臺服務器。

你只需要為應用程序創建一次 私鑰/公鑰對，一種方法是訪問 https://web-push-codelab.glit...。

在訂閱用戶時，瀏覽器將 applicationServerKey(公共密鑰)傳遞給推送服務，這意味著推送服務可以將應用程序的公共密鑰綁定到用戶的 PushSubscription 。

流程大概是這樣的：

加載 Web 應用程序后，通過調用 subscribe()方法傳遞服務器密鑰。

瀏覽器向一個推送服務發出網絡請求，該服務將生成一個端點，將該端點與密鑰關聯，并將該端點返回給瀏覽器。

瀏覽器將把這個端點添加到 PushSubscription 對象中，該對象通過 返回 subscribe() 的 promise 得到 。

之后，只要你想推送消息，都需要創建一個 授權頭(Authorization header)，其中包含使用應用服務器的私鑰簽名的信息。當推送服務接收到發送推送消息的請求時，它將通過查找已鏈接到該特定端點的公鑰(第二步)來驗證消息頭。

PushSubscription 對象包含向用戶的設備發送推送消息所需的所有信息，如下:

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

endpoint： 推送服務的 URL，要觸發推送消息，post請求。

keys： 該對象包含用于加密通過推送消息發送的消息數據的值。

一旦用戶被訂閱，并且你有了 PushSubscription 對象，就需要將其發送到服務器。在服務器上，你存對數據庫的訂閱，從現在開始使用它向該用戶發送推送消息。

當你想向用戶發送推送消息時，首先需要的是推送服務。通過 API 調用告訴服務器你現在需要要發送什么數據、向誰發送消息以及關于如何發送消息的任何標準。通常，這個 API 調用是在服務器上完成的。

推送服務是接收請求、驗證請求并將推送消息發送到對應的瀏覽器。

請注意，推送服務不是由你管理的——它是一個第三方服務。你的服務器是通過 API 與 推送服務通信的服務器。推送服務的一個例子是 谷歌的FCM。

推送服務處理所有繁重的任務，比如，如果瀏覽器處于脫機狀態，推送服務會在發送相應消息之前對消息進行排隊，等待瀏覽器的再次聯機。

每個瀏覽器都可以使用他們想要的任何推送服務，這是開發人員無法控制的。然而，所有的推送服務都有相同的 Api，所以這不會造成實現困難。

為了獲得處理推送消息請求的 URL，需要檢查 PushSubscription 對象中端點的存儲值。

推送服務 API 提供了一種向用戶發送消息的方法。API 是 Web 協議，它是一個 IETF 標準，定義了如何對推送服務進行 API 調用。

使用推送消息發送的數據必須加密。這樣，就可以阻止推送服務查看發送的數據。這一點很重要，因為瀏覽器決定使用哪個推送服務(它可能正在使用不受信任且不夠安全的某個推送服務)。

對于每條推送消息，也可以給出如下說明:

TTL ?— 定義消息在刪除和未發送之前應排隊多長時間。

優先級 — 定義每個消息的優先級，推送服務只發送高優先級的消息，確保用戶因為一些突發情況關機或者斷電等。

主題 — 為推送消息提供一個主題名稱，該名稱將用相同的主題替換掛起的消息，這樣，一旦設備處于活動狀態，用戶就不會收到過時的信息。

一旦按照上面的解釋將消息發送到推送服務，該消息將處于掛起狀態，直到發生以下情況之一:

設備上線

消息由于 TTL 而在隊列上過期

當推送服務傳遞消息時，瀏覽器將接收它，解密它，并在的 Service Worker 中分派一個 push 事件。這里最重要的是，即使 Web 頁面沒有打開，瀏覽器也可以執行你的 Service Worker。流程如下:

推送消息到達瀏覽器，瀏覽器解密它

瀏覽器喚醒 Service Worker

push 事件被分發給 Service Worker

設置推送事件監聽器的代碼應該與用 JavaScript 編寫的任何其他事件監聽器類似：

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.");
  }
});

需要了解 Service Worker 的一點是，你沒有 Service Worker 代碼運行時長的控制權。瀏覽器決定何時將其喚醒以及何時終止它。

在 Service Worker 中，event.waitUntil(promise)，告訴瀏覽器在該promse 未完成之前工作將一直進行中，如果它希望完成該工作，它不應該終止 Sercice Worker。

以下是一個處理 push 事件的例子:

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

  event.waitUntil(promise);
});

調用 self.registration.showNotification() 將向用戶顯示一個通知，并返回一個 promise，該 promise 在顯示通知后將執行 resolve 方法。

showNotification(title, options) 方法可以根據需要進行可視化調整，title 參數是一個字符串，而參數 options 是一個對象，內容如下:

{
  "http://": "Visual Options",
  "body": "",
  "icon": "",
  "image": "",
  "badge": "",
  "vibrate": "",
  "sound": "",
  "dir": "",

  "http://": "Behavioural Options",
  "tag": "",
  "data": "",
  "requireInteraction": "",
  "renotify": "",
  "silent": "",

  "http://": "Both Visual & Behavioural Options",
  "actions": "",

  "http://": "Information Option. No visual affect.",
  "timestamp": ""
}

可以了解更多的細節，每個選項在這里做什么- https://developer.mozilla.org...

當有緊急、重要和時間敏感的信息需要與用戶分享時，推送通知是吸引用戶注意力的好方法。

例如，我們在 SessionStack 計劃利用推送通知讓我們的用戶知道他們的產品何時出現崩潰、問題或異常。這將讓我們的用戶立即知道發生了什么錯誤。然后，他們可以將問題作為視頻回放，并利用我們的庫收集的數據(如DOM更改、用戶交互、網絡請求、未處理的異常和調試消息)查看發生在最終用戶身上的所有事情。

原文：

https://blog.sessionstack.com...

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

你的點贊是我持續分享好東西的動力，歡迎點贊！

干貨系列文章匯總如下，覺得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。