溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關JavaScript關于Web推送通知機制的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
Web 推送通知允許用戶在 Web 應用程序需要更新時選擇是否接收更新消息，目的是在重新吸引用戶群注意的更新信息通常是對用戶來說有趣、重要、實時的內容。
在這種情況下，使用 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 是一個對象，內容如下:
{
"//": "Visual Options",
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
"//": "Behavioural Options",
"tag": "<String>",
"data": "<Anything>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"silent": "<Boolean>",
"//": "Both Visual & Behavioural Options",
"actions": "<Array of Strings>",
"//": "Information Option. No visual affect.",
"timestamp": "<Long>"
}可以了解更多的細節，每個選項在這里做什么- https://developer.mozilla.org...
當有緊急、重要和時間敏感的信息需要與用戶分享時，推送通知是吸引用戶注意力的好方法。
例如，我們在 SessionStack 計劃利用推送通知讓我們的用戶知道他們的產品何時出現崩潰、問題或異常。這將讓我們的用戶立即知道發生了什么錯誤。然后，他們可以將問題作為視頻回放，并利用我們的庫收集的數據(如DOM更改、用戶交互、網絡請求、未處理的異常和調試消息)查看發生在最終用戶身上的所有事情。
感謝各位的閱讀！關于JavaScript關于Web推送通知機制的示例分析就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
