簡介
Web 推送通知允許用戶在 Web 應用程序需要更新時選擇是否接收更新消息，目的是在重新吸引用戶群注意的更新信息通常是對用戶來說有趣、重要、實時的內容。
在這種情況下，使用 Service Worker 的原因是它們在後臺工作。這對於推送通知非常有用，因為這意味著只有當用戶與通知本身進行交互時，它們的代碼才會被執行。
推送和通知
推送和通知都有各自的 API
- 推送 — 當服務器向 Service Worker 提供信息時調用它。
- 通知 — 這是 Service Worker 或web應用程序中向用戶顯示信息的腳本的操作。
推送 ( Push )
實現 Push 一般的三個步驟:
- UI — 添加必要的客戶端邏輯來訂閱推送的用戶。這是 Web 應用程序 UI 需要的 JavaScript 邏輯，以便用戶能夠自己註冊來推送消息。
- 發送推送通知 — 在服務器上實現 API 調用，該調用觸發到用戶設備的推送消息。
- 接受推送消息 — 在推送消息到達瀏覽器時處理它。
接下來討論更詳細的過程。
瀏覽器支持檢測
首先，我們需要檢查當前瀏覽器是否支持推送消息，可以通過兩個簡單的檢查來判斷是否支持推送消息:
- 檢查 navigator 對象上的 serviceWorker
- 檢查 window 對象上的 PushManager
代碼如下：
註冊 Service Worker
如果瀏覽器支持該功能，下一步驟就是註冊 Service Worker。
如何註冊 Service Worker， 裡面就有講過了。
請求許可
Service Worker 註冊後，我們就可以開始訂閱該用戶。為此，我們需要得到用戶的許可才能給用戶發送推送消息。
獲得權限的 API 相對簡單，但是缺點是，API 已經 從回調更改為返回 Promise。這就引入了一個問題:我們不知道當前瀏覽器實現了 API 的哪個版本，因此必須同時實現和處理這兩個版本，如下：
調用 Notification.requestpermission() 會在瀏覽器顯示如下提示:
一旦權限被授予、關閉或阻塞，我們將會接收分別對應的一個字符串:granted、default 或 denied。
請記住，如果用戶單擊了 Block 按鈕，你的 Web 應用程序將無法再次請求用戶的權限，直到他們通過更改權限狀態手動 “解除” 你的應用程序的權限，此選項隱藏在設置面板中。
使用 PushManager 訂閱用戶
一旦註冊了 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 密鑰，它們是服務器特有的。它們是一對公鑰和私鑰。私鑰秘密存儲在你的終端，而公鑰則與客戶端交換。這些鍵允許推送服務知道哪個應用服務器訂閱了某個用戶，並確保觸發該用戶的推送消息的服務器是同一臺服務器。
在訂閱用戶時，瀏覽器將 applicationServerKey(公共密鑰)傳遞給推送服務，這意味著推送服務可以將應用程序的公共密鑰綁定到用戶的 PushSubscription 。
流程大概是這樣的：
- 加載 Web 應用程序後，通過調用 subscribe()方法傳遞服務器密鑰。
- 瀏覽器向一個推送服務發出網絡請求，該服務將生成一個端點，將該端點與密鑰關聯，並將該端點返回給瀏覽器。
- 瀏覽器將把這個端點添加到 PushSubscription 對象中，該對象通過 返回 subscribe() 的 promise 得到 。
之後，只要你想推送消息，都需要創建一個 授權頭(Authorization header)，其中包含使用應用服務器的私鑰簽名的信息。當推送服務接收到發送推送消息的請求時，它將通過查找已鏈接到該特定端點的公鑰(第二步)來驗證消息頭。
PushSubscription 對象
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 提供了一種向用戶發送消息的方法。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 是一個對象，內容如下:
當有緊急、重要和時間敏感的信息需要與用戶分享時，推送通知是吸引用戶注意力的好方法。
例如，我們在 SessionStack 計劃利用推送通知讓我們的用戶知道他們的產品何時出現崩潰、問題或異常。這將讓我們的用戶立即知道發生了什麼錯誤。然後，他們可以將問題作為視頻回放，並利用我們的庫收集的數據(如DOM更改、用戶交互、網絡請求、未處理的異常和調試消息)查看發生在最終用戶身上的所有事情。
歡迎關注
閱讀更多 代碼開發 的文章
關鍵字: 瀏覽器 跳槽那些事兒 JavaScript
