推送功能的運作方式

Matt Gaunt
X 首頁

在深入瞭解 API 之前，我們先從高階層面瞭解推送通知的完整流程。接著，當我們在後續步驟中逐步介紹個別主題或 API 時，您就會瞭解這些主題或 API 的重要性。

實作推送通知的三個主要步驟如下：

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

接著就來詳細瞭解各個步驟。

步驟 1：用戶端

第一步是「訂閱」使用者的即時訊息。

如要訂閱使用者，必須符合兩項條件。首先，請先取得使用者許可，才能傳送推播訊息。第二，從瀏覽器取得 PushSubscription。

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

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

Browser Support

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Source

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

應用程式伺服器金鑰 (又稱 VAPID 金鑰) 是伺服器的專屬金鑰。這類金鑰可讓推送服務瞭解哪個應用程式伺服器訂閱了使用者，並確保是同一個伺服器觸發推送訊息給該使用者。

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

1. 取得傳送推播訊息的權限。2. 取得 PushSubscription。3. 將 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，例如 Push API (也就是 Service Worker 指令碼以外的 API)。

您可以在服務工作站的「push」事件中執行任何背景工作。您可以發出 Analytics 呼叫、離線快取網頁，以及顯示通知。

1. 訊息會傳送到裝置。2. 瀏覽器喚醒 Service Worker。3. 已傳送 Push 事件。

以上就是推播訊息的完整流程。

後續步驟

程式碼研究室