推送功能的運作方式

Matt Gaunt
X 首頁

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

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

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

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

步驟 1：用戶端

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

訂閱使用者需要兩個條件。首先，請向使用者索取權限，以便傳送推播訊息。第二，從瀏覽器取得 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 呼叫、離線快取網頁，以及顯示通知。

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

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

後續步驟

程式碼研究室