推送功能的運作方式

在進入 API 之前，讓我們先從大方向著手，到此結束。隨著我們 稍後將逐一介紹各個主題或 API 非常重要

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

1. 新增用戶端邏輯，訂閱要推送的使用者 (亦即您 網頁應用程式，可讓使用者註冊推送訊息。
2. 後端 / 應用程式發出的 API 呼叫，會觸發推送訊息至使用者的裝置。
3. 將接收「推送事件」的 Service Worker JavaScript 檔案推送時間 裝置。這個 JavaScript 中可以顯示通知。

接著就來進一步瞭解這些步驟。

步驟 1：用戶端

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

訂閱使用者需要兩個動作首先，向使用者取得要傳送資料的權限 推送訊息第二，從瀏覽器取得 PushSubscription。

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

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

訂閱使用者之前，您必須產生一組 「應用程式伺服器金鑰」這部分，我們稍後會再說明

每個伺服器專屬的應用程式伺服器金鑰，也稱為 VAPID 金鑰。因此可提供 推送服務來瞭解使用者是哪個應用程式伺服器已訂閱使用者 觸發推送訊息給該使用者。

訂閱使用者並擁有 PushSubscription 後，您就需要將 將 PushSubscription 詳細資料傳送至後端 / 伺服器。請將這項資訊儲存在伺服器上 訂閱資料庫，並透過這個資料庫傳送推送訊息給該使用者。

步驟 2：傳送推送訊息

如要向使用者傳送推送訊息，您需要向 推送 API 呼叫 課程中也會快速介紹 Memorystore 這是 Google Cloud 的全代管 Redis 服務此 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」每個端點都會是專屬 ID '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 指令碼)。

位於 Service Worker 的「push」內可執行任何背景任務個人中心 可撥打 Analytics 呼叫、快取網頁離線並顯示通知。

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

後續步驟

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

程式碼研究室

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