JavaScript關(guān)于Web推送通知機(jī)制的示例分析

這篇文章給大家分享的是有關(guān)JavaScript關(guān)于Web推送通知機(jī)制的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

簡(jiǎn)介

Web 推送通知允許用戶在 Web 應(yīng)用程序需要更新時(shí)選擇是否接收更新消息，目的是在重新吸引用戶群注意的更新信息通常是對(duì)用戶來說有趣、重要、實(shí)時(shí)的內(nèi)容。

在這種情況下，使用 Service Worker 的原因是它們?cè)诤笈_(tái)工作。這對(duì)于推送通知非常有用，因?yàn)檫@意味著只有當(dāng)用戶與通知本身進(jìn)行交互時(shí)，它們的代碼才會(huì)被執(zhí)行。

推送和通知

推送和通知都有各自的 API

• 推送 —?當(dāng)服務(wù)器向 Service Worker 提供信息時(shí)調(diào)用它。

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

推送 ( Push )

實(shí)現(xiàn) Push 一般的三個(gè)步驟:

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

2. 發(fā)送推送通知 — 在服務(wù)器上實(shí)現(xiàn) API 調(diào)用，該調(diào)用觸發(fā)到用戶設(shè)備的推送消息。

3. 接受推送消息 — 在推送消息到達(dá)瀏覽器時(shí)處理它。

接下來討論更詳細(xì)的過程。

瀏覽器支持檢測(cè)

首先，我們需要檢查當(dāng)前瀏覽器是否支持推送消息，可以通過兩個(gè)簡(jiǎn)單的檢查來判斷是否支持推送消息:

1. 檢查 navigator 對(duì)象上的 serviceWorker

2. 檢查 window 對(duì)象上的 PushManager

代碼如下：

注冊(cè) Service Worker

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

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

請(qǐng)求許可

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

獲得權(quán)限的 API 相對(duì)簡(jiǎn)單，但是缺點(diǎn)是，API 已經(jīng) 從回調(diào)更改為返回 Promise。這就引入了一個(gè)問題:我們不知道當(dāng)前瀏覽器實(shí)現(xiàn)了 API 的哪個(gè)版本，因此必須同時(shí)實(shí)現(xiàn)和處理這兩個(gè)版本，如下：

調(diào)用 Notification.requestpermission() 會(huì)在瀏覽器顯示如下提示:

一旦權(quán)限被授予、關(guān)閉或阻塞，我們將會(huì)接收分別對(duì)應(yīng)的一個(gè)字符串:granted、default 或 denied。

請(qǐng)記住，如果用戶單擊了 Block 按鈕，你的 Web 應(yīng)用程序?qū)o法再次請(qǐng)求用戶的權(quán)限，直到他們通過更改權(quán)限狀態(tài)手動(dòng) “解除” 你的應(yīng)用程序的權(quán)限，此選項(xiàng)隱藏在設(shè)置面板中。

使用 PushManager 訂閱用戶

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

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

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

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

• applicationServerKey：推送服務(wù)器用來向客戶端應(yīng)用發(fā)送消息的公鑰。該值是應(yīng)用程序服務(wù)器生成的簽名密鑰對(duì)的一部分，可使用在 P-256 曲線上實(shí)現(xiàn)的橢圓曲線數(shù)字簽名（ECDSA）?？梢允?DOMString 或 ArrayBuffer。

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

你只需要為應(yīng)用程序創(chuàng)建一次 私鑰/公鑰對(duì)，一種方法是訪問 https://web-push-codelab.glit...。

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

流程大概是這樣的：

• 加載 Web 應(yīng)用程序后，通過調(diào)用 subscribe()方法傳遞服務(wù)器密鑰。

• 瀏覽器向一個(gè)推送服務(wù)發(fā)出網(wǎng)絡(luò)請(qǐng)求，該服務(wù)將生成一個(gè)端點(diǎn)，將該端點(diǎn)與密鑰關(guān)聯(lián)，并將該端點(diǎn)返回給瀏覽器。

• 瀏覽器將把這個(gè)端點(diǎn)添加到 PushSubscription 對(duì)象中，該對(duì)象通過 返回 subscribe() 的 promise 得到 。

之后，只要你想推送消息，都需要?jiǎng)?chuàng)建一個(gè) 授權(quán)頭(Authorization header)，其中包含使用應(yīng)用服務(wù)器的私鑰簽名的信息。當(dāng)推送服務(wù)接收到發(fā)送推送消息的請(qǐng)求時(shí)，它將通過查找已鏈接到該特定端點(diǎn)的公鑰(第二步)來驗(yàn)證消息頭。

PushSubscription  對(duì)象

PushSubscription 對(duì)象包含向用戶的設(shè)備發(fā)送推送消息所需的所有信息，如下:

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

• endpoint： 推送服務(wù)的 URL，要觸發(fā)推送消息，post請(qǐng)求。

• keys： 該對(duì)象包含用于加密通過推送消息發(fā)送的消息數(shù)據(jù)的值。

一旦用戶被訂閱，并且你有了 PushSubscription 對(duì)象，就需要將其發(fā)送到服務(wù)器。在服務(wù)器上，你存對(duì)數(shù)據(jù)庫的訂閱，從現(xiàn)在開始使用它向該用戶發(fā)送推送消息。

發(fā)送推送消息

當(dāng)你想向用戶發(fā)送推送消息時(shí)，首先需要的是推送服務(wù)。通過 API 調(diào)用告訴服務(wù)器你現(xiàn)在需要要發(fā)送什么數(shù)據(jù)、向誰發(fā)送消息以及關(guān)于如何發(fā)送消息的任何標(biāo)準(zhǔn)。通常，這個(gè) API 調(diào)用是在服務(wù)器上完成的。

推送服務(wù)

推送服務(wù)是接收請(qǐng)求、驗(yàn)證請(qǐng)求并將推送消息發(fā)送到對(duì)應(yīng)的瀏覽器。

請(qǐng)注意，推送服務(wù)不是由你管理的——它是一個(gè)第三方服務(wù)。你的服務(wù)器是通過 API 與 推送服務(wù)通信的服務(wù)器。推送服務(wù)的一個(gè)例子是 谷歌的FCM。

推送服務(wù)處理所有繁重的任務(wù)，比如，如果瀏覽器處于脫機(jī)狀態(tài)，推送服務(wù)會(huì)在發(fā)送相應(yīng)消息之前對(duì)消息進(jìn)行排隊(duì)，等待瀏覽器的再次聯(lián)機(jī)。

每個(gè)瀏覽器都可以使用他們想要的任何推送服務(wù)，這是開發(fā)人員無法控制的。然而，所有的推送服務(wù)都有相同的 Api，所以這不會(huì)造成實(shí)現(xiàn)困難。

為了獲得處理推送消息請(qǐng)求的 URL，需要檢查 PushSubscription 對(duì)象中端點(diǎn)的存儲(chǔ)值。

推送服務(wù) API

推送服務(wù) API 提供了一種向用戶發(fā)送消息的方法。API 是 Web 協(xié)議，它是一個(gè) IETF 標(biāo)準(zhǔn)，定義了如何對(duì)推送服務(wù)進(jìn)行 API 調(diào)用。

使用推送消息發(fā)送的數(shù)據(jù)必須加密。這樣，就可以阻止推送服務(wù)查看發(fā)送的數(shù)據(jù)。這一點(diǎn)很重要，因?yàn)闉g覽器決定使用哪個(gè)推送服務(wù)(它可能正在使用不受信任且不夠安全的某個(gè)推送服務(wù))。

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

• TTL ?—  定義消息在刪除和未發(fā)送之前應(yīng)排隊(duì)多長(zhǎng)時(shí)間。

• 優(yōu)先級(jí) — 定義每個(gè)消息的優(yōu)先級(jí)，推送服務(wù)只發(fā)送高優(yōu)先級(jí)的消息，確保用戶因?yàn)橐恍┩话l(fā)情況關(guān)機(jī)或者斷電等。

• 主題 — 為推送消息提供一個(gè)主題名稱，該名稱將用相同的主題替換掛起的消息，這樣，一旦設(shè)備處于活動(dòng)狀態(tài)，用戶就不會(huì)收到過時(shí)的信息。

瀏覽器中的推送事件

一旦按照上面的解釋將消息發(fā)送到推送服務(wù)，該消息將處于掛起狀態(tài)，直到發(fā)生以下情況之一:

• 設(shè)備上線

• 消息由于 TTL 而在隊(duì)列上過期

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

• 推送消息到達(dá)瀏覽器，瀏覽器解密它

• 瀏覽器喚醒 Service Worker

• push 事件被分發(fā)給 Service Worker

設(shè)置推送事件監(jiān)聽器的代碼應(yīng)該與用 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.');
  }
});

需要了解 Service Worker 的一點(diǎn)是，你沒有 Service Worker 代碼運(yùn)行時(shí)長(zhǎng)的控制權(quán)。瀏覽器決定何時(shí)將其喚醒以及何時(shí)終止它。

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

以下是一個(gè)處理 push 事件的例子:

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

  event.waitUntil(promise);
});

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

showNotification(title, options) 方法可以根據(jù)需要進(jìn)行可視化調(diào)整，title 參數(shù)是一個(gè)字符串，而參數(shù) options  是一個(gè)對(duì)象，內(nèi)容如下:

{
  "//": "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>"
}

可以了解更多的細(xì)節(jié)，每個(gè)選項(xiàng)在這里做什么- https://developer.mozilla.org...

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

例如，我們?cè)?SessionStack 計(jì)劃利用推送通知讓我們的用戶知道他們的產(chǎn)品何時(shí)出現(xiàn)崩潰、問題或異常。這將讓我們的用戶立即知道發(fā)生了什么錯(cuò)誤。然后，他們可以將問題作為視頻回放，并利用我們的庫收集的數(shù)據(jù)(如DOM更改、用戶交互、網(wǎng)絡(luò)請(qǐng)求、未處理的異常和調(diào)試消息)查看發(fā)生在最終用戶身上的所有事情。

感謝各位的閱讀！關(guān)于JavaScript關(guān)于Web推送通知機(jī)制的示例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！