推送功能的運作方式

Matt Gaunt

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

實作推播的三個重要步驟如下:

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

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

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

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

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

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

瀏覽器支援

  • 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」事件中執行任何背景工作。您可以發出 Analytics 呼叫、離線快取網頁,以及顯示通知。

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

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

後續步驟

程式碼研究室