推送功能的運作方式

Matt Gaunt

在深入瞭解 API 之前，我們先從高層次的角度，從頭到尾瞭解推播。這樣一來，當我們稍後逐步介紹個別主題或 API 時，您就會瞭解其重要性及原因。

導入推送功能的三個主要步驟如下：

1. 新增用戶端邏輯，讓使用者訂閱推播通知 (也就是網頁應用程式中的 JavaScript 和 UI，用於註冊使用者以接收推播訊息)。
2. 從後端/應用程式發出的 API 呼叫，可觸發推播訊息至使用者裝置。
3. 當推播訊息送達裝置時，Service Worker JavaScript 檔案會收到「推播事件」。您可以在這個 JavaScript 中顯示通知。

接著就來詳細說明各步驟的內容。

步驟 1：用戶端

第一步是讓使用者「訂閱」推播訊息。

訂閱使用者需要兩項資訊。首先，取得使用者權限，以便傳送推播訊息。第二，從瀏覽器取得 PushSubscription。

PushSubscription 包含向該使用者傳送推播訊息所需的所有資訊。您可以將其視為使用者裝置的 ID。

這一切都是透過 JavaScript 搭配 Push API 完成。

Browser Support

• 42
• 17
• 44
• 16

Source

在訂閱使用者之前，您需要產生一組「應用程式伺服器金鑰」，我們稍後會說明。

應用程式伺服器金鑰 (也稱為 VAPID 金鑰) 是伺服器專屬的金鑰，這組金鑰可讓推播服務知道哪個應用程式伺服器訂閱了使用者，並確保是同一個伺服器觸發推播訊息給該使用者。

使用者訂閱後，您會取得 PushSubscription，接著需要將 PushSubscription 詳細資料傳送至後端/伺服器。在伺服器上，您會將這項訂閱項目儲存至資料庫，並用來傳送推播訊息給該使用者。

步驟 2：傳送推播訊息

如要傳送推播訊息給使用者，您必須對推播服務發出 API 呼叫。這項 API 呼叫會包含要傳送的資料、訊息收件者，以及訊息傳送方式的任何條件。這項 API 呼叫通常是從伺服器執行。

您可能會思考以下問題：

• 誰是推送服務？什麼是推送服務？
• API 的樣貌是 JSON、XML 還是其他格式？
• API 的功能

誰是推送服務？什麼是推送服務？

推播服務會接收網路要求、驗證要求，並將推播訊息傳送至適當的瀏覽器。如果瀏覽器處於離線狀態，訊息會排入佇列，直到瀏覽器連上網路為止。

每個瀏覽器都可以使用任何想要的推送服務，開發人員無法控制。這不是問題，因為每個推播服務都預期相同的 API 呼叫。也就是說，您不必在意推送服務是誰，只要確保 API 呼叫有效即可。

如要取得觸發推送訊息的適當網址 (即推送服務的網址)，只要查看 PushSubscription 中的 endpoint 值即可。

以下是從 PushSubscription 取得的值範例：

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

在本例中，端點為 https://random-push-service.com/some-kind-of-unique-id-1234/v2/。推送服務為「random-push-service.com」，每個端點都是使用者專屬，以「some-kind-of-unique-id-1234」表示。開始使用推送通知時，您會注意到這個模式。

訂閱項目中的金鑰將在稍後說明。

API 的樣貌

我曾提到，每個網路推播服務都預期會收到相同的 API 呼叫。這個 API 就是網路推送通訊協定。這項 IETF 標準定義了如何對推播服務發出 API 呼叫。

API 呼叫需要設定特定標頭，且資料必須是位元組串流。我們會介紹可執行這項 API 呼叫的程式庫，以及如何自行執行。

API 的功能

API 可讓您傳送訊息給使用者 (無論是否包含資料)，並提供如何傳送訊息的操作說明。

透過推播訊息傳送的資料必須經過加密。這是為了防止推送服務 (可能是任何人) 檢視與推送訊息一起傳送的資料。這點很重要，因為瀏覽器會決定要使用哪項推播服務，這可能會導致瀏覽器使用不安全或不安全的推播服務。

觸發推送訊息時，推送服務會收到 API 呼叫，並將訊息排入佇列。這則訊息會留在佇列中，直到使用者裝置連上網路，且推播服務可以傳送訊息為止。您可以向推播服務提供指令，定義推播訊息的排入佇列方式。

操作說明包含下列詳細資料：

• 推播訊息的存留時間。這會定義訊息在移除和未傳送前，應排入佇列的時間長度。

• 定義訊息的緊急程度。如果推播服務只傳送高優先順序訊息，以延長使用者電池續航力，這項功能就非常實用。

• 為推播訊息指定「主題」名稱，系統就會以這則新訊息取代任何待處理的訊息。

步驟 3：將事件推送至使用者裝置

我們傳送推播訊息後，推播服務會將訊息保留在伺服器上，直到發生下列任一事件：

1. 裝置連上網路，推播服務傳送訊息。
2. 訊息到期。如果發生這種情況，推送服務會從佇列中移除訊息，且不會傳送。

推送服務傳送訊息時，瀏覽器會收到訊息、解密所有資料，並在 Service Worker 中調度 push 事件。

Service Worker 是一種「特殊」JavaScript 檔案。即使網頁未開啟，瀏覽器也能執行這個 JavaScript。即使瀏覽器關閉，也能執行 JavaScript。Service Worker 也提供網頁不支援的 API，例如推播 API (也就是只能在 Service Worker 指令碼中使用的 API)。

您可以在 Service Worker 的「push」事件中執行任何背景工作。您可以進行數據分析呼叫、離線快取網頁，以及顯示通知。

這就是推送訊息的完整流程。

後續步驟

• 網路推播通知總覽
• 推送機制
• 訂閱使用者
• 權限使用者體驗
• 使用網頁推送程式庫傳送訊息
• 網頁推送通訊協定
• 處理推送事件
• 顯示通知
• 通知行為
• 常見通知模式
• 推播通知常見問題
• 常見問題和回報錯誤

程式碼研究室

• 建構推播通知用戶端
• 建構推播通知伺服器