推送功能的運作方式

Matt Gaunt

在深入瞭解 API 之前,讓我們從整體角度來看看推送的整個過程。之後,當我們逐步介紹個別主題或 API 時,您就會瞭解這些主題和 API 的重要性。

實作推送功能的三個重要步驟如下:

  1. 新增用戶端邏輯,讓使用者訂閱推播 (也就是在網路應用程式中註冊使用者推播訊息的 JavaScript 和 UI)。
  2. 從後端/應用程式發出的 API 呼叫,可觸發推播訊息傳送至使用者的裝置。
  3. 服務工作者 JavaScript 檔案,會在推送內容抵達裝置時收到「推送事件」。您可以透過這段 JavaScript 顯示通知。

讓我們進一步瞭解每個步驟的內容。

步驟 1:用戶端

第一步是「訂閱」使用者,推送訊息。

訂閱使用者需要兩個條件。首先,請使用者取得權限,以便傳送推送訊息。第二,從瀏覽器取得 PushSubscription

PushSubscription 包含我們需要的所有資訊,可用於向該使用者傳送推播訊息。您可以將這個 ID 視為使用者裝置的 ID。

這些操作都是透過 Push API 以 JavaScript 完成。

瀏覽器支援

  • Chrome:42。
  • Edge:17。
  • Firefox:44。
  • Safari:16 歲。

資料來源

在訂閱使用者之前,您必須產生一組「應用程式伺服器金鑰」,我們會在後續說明。

每個伺服器專屬的應用程式伺服器金鑰,也稱為 VAPID 金鑰。這類標籤可讓推播服務得知哪個應用程式伺服器訂閱了使用者,並確保是同一個伺服器觸發傳送推播訊息給該使用者。

使用者訂閱並取得 PushSubscription 後,您必須將 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 就是 Web Push 通訊協定。這是 IETF 標準,定義了如何對推播服務提出 API 呼叫。

API 呼叫需要設定特定標頭,且資料必須為位元組串流。我們將探討可為我們執行此 API 呼叫的程式庫,以及如何自行執行此操作。

API 可做什麼?

這個 API 可讓您以 / 不含資料的訊息向使用者傳送訊息,並提供「如何」訊息傳送的操作說明。

您透過推送訊息傳送的資料必須經過加密。這是因為推送服務 (可以是任何人) 將無法查看隨推送訊息傳送的資料。這點很重要,因為瀏覽器會決定要使用哪種推播服務,這可能會讓瀏覽器使用不安全的推播服務。

當您觸發推送訊息時,推送服務會收到 API 呼叫,並將訊息加入佇列。直到使用者的裝置上線,推播服務才能傳送訊息,這則訊息才會從佇列中移除。您可以提供給推送服務的操作說明定義推送訊息排入佇列的方式。

操作說明包含以下詳細資訊:

  • 推播訊息的有效時間。此屬性定義訊息在移除前可排入佇列多久,且不會傳送。

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

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

當伺服器想要傳送推播訊息時,會向推播服務提出網路推播通訊協定要求。

步驟 3:在使用者的裝置上推送事件

我們傳送推播訊息後,推播服務會將您的訊息保留在伺服器上,直到發生下列其中一項事件為止:

  1. 裝置上線後,推送服務就會傳送訊息。
  2. 訊息過期。如果發生這種情況,推播服務會將訊息從佇列中移除,而該訊息將永遠不會傳送。

當推播服務傳送訊息時,瀏覽器會接收訊息、解密任何資料,並在服務工作者中調度 push 事件。

服務工作者是「特殊」的 JavaScript 檔案。瀏覽器可以在不開啟網頁的情況下執行這段 JavaScript。甚至可以在瀏覽器關閉時執行這段 JavaScript。Service Worker 也有網頁無法使用的 API (例如推送),也就是無法使用 Service Worker 指令碼的 API。

您可以在服務工作站的「push」事件中執行任何背景工作。您可以離線執行分析呼叫、快取頁面,並顯示通知。

當推播服務將推播訊息傳送至使用者的裝置時,服務工作站會收到推播事件

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

後續步驟

程式碼研究室