推播通知總覽

提供推播通知的總覽、使用的原因與運作方式。

Matt Gaunt

什麼是推播通知?

推播訊息可以讓您將資訊 就算使用者未使用你的網站也一樣稱為「推播」 因為您可以將訊息「推送」並提供相關資訊 未啟用。比較推送 技術搭配 Pull 技術以瞭解這個情況 概念

通知會向使用者顯示一小部分的資訊。網站可以使用 通知使用者俱有時效性的重要事件或動作 不同用途通知的外觀與風格會因平台而異:

macOS 和 Android 上的通知範例。
macOS 和 Android 通知範例。

推送訊息和通知是兩種互補的技術,但相輔相成。 推送式技術可將訊息從您的伺服器傳送給使用者 他們不會主動使用你的網站通知指的是 在使用者裝置上顯示推送資訊。您可以使用 無需推送訊息的通知或許也會使用 在使用者不顯示通知的情況下推送訊息 (無訊息推送),但瀏覽器卻顯示 目前無法這麼做但在實務上通常會搭配使用。 非技術人員可能不瞭解推送作業的差異 傳送訊息和通知在以下集合中: 我們說「推播通知」,是指推送訊息的組合 隨後顯示在通知中說出「推送訊息」時 我們是指自己推動技術而我們說出通知 基本上,就是通知技術

為什麼要使用推播通知?

  • 對使用者而言,推播通知是一種及時收到相關、 和精確資訊。
  • 對自己 (網站擁有者) 來說,推播通知是一種提高使用者參與度的好方法 提高參與度
,瞭解如何調查及移除這項存取權。

推播通知的運作方式

整體而言,導入推播通知的主要步驟如下:

  1. 新增用戶端邏輯,要求使用者授予傳送推播通知的權限。 然後,將用戶端 ID 資訊傳送至您的伺服器,以便儲存資料庫中的內容。
  2. 新增伺服器邏輯,以便將訊息推送至用戶端裝置。
  3. 新增用戶端邏輯,以便接收已推送至裝置的訊息 並在通知中顯示

本頁其餘部分會詳細說明這些步驟。

取得傳送推播通知的權限

首先,網站必須取得使用者的同意,才能傳送推播通知。 使用者手勢 (例如點選「Yes」按鈕) 必須觸發這個功能 在 Do you want to receive push notifications? 提示旁邊確認完成後 呼叫 Notification.requestPermission()。作業系統 使用者裝置上的瀏覽器,可能會包含某種使用者介面,正式確認 使用者想選擇接收推播通知。每個平台的 UI 都不盡相同。

為用戶端訂閱推播通知

取得權限後,你的網站就必須啟動 訂閱推播通知。操作需要使用 JavaScript 使用 Push API。您必須提供公開驗證金鑰 這部分稍後會進一步說明更新後 您啟動訂閱程序後,瀏覽器就會發出網路要求 稱為推送服務,稍後也會進一步瞭解

假設訂閱成功,瀏覽器會傳回 PushSubscription敬上 物件。您需要長期儲存這些資料。 一般的做法是將這些資訊傳送到由您控管的伺服器 然後讓伺服器儲存到資料庫

取得傳送推送訊息的權限。取得推送訂閱。傳送
將訂閱推送至伺服器。

傳送推送訊息

您的伺服器並沒有實際將推送訊息直接傳送至用戶端。A 罩杯 推送服務是由 GKE 控管的網路服務 使用者的瀏覽器供應商向客戶傳送推播通知時必須注意 對 Push Service 提出 Web 服務要求網路服務要求 您傳送至推送服務的情形稱為網路推送通訊協定要求。 網路推送通訊協定要求應包含:

  • 郵件中應包含哪些資料。
  • 要接收訊息的用戶端。
  • 推送服務應如何傳送訊息的操作說明。舉例來說, 可指定推送服務停止嘗試傳送訊息 10 分鐘過後

通常您可以透過控制的伺服器提出網路推送通訊協定要求。 當然,您的伺服器不必建構原始的網路服務要求 機器學習是向機器提供資料和答案 讓機器自行探索規則的科學有程式庫可以為您處理這個問題,例如 web-push-libs。但基礎機制是 透過 HTTP 產生網路服務要求

您的伺服器傳送網路推送通訊協定要求至推送服務,然後推送服務將訊息傳送至使用者的裝置。

推送服務收到你的要求、進行驗證,然後轉送推送 訊息傳送給適當的用戶端如果用戶端的瀏覽器處於離線狀態, 服務會將推送訊息排入佇列,直到瀏覽器上線為止。

每個瀏覽器都會使用所需的推送服務。您是網站開發人員 您無法控制這些內容這不會造成問題,因為網路推送通訊協定 資料並未經過標準化。 換句話說,您無需煩惱瀏覽器廠商所使用的服務 使用方式。只要確認網路推送通訊協定要求符合規格即可。 此外,規格指出請求必須包含特定標頭 而且資料必須以位元組串流的形式傳送

但你仍須確保傳送的是網路推送通訊協定 要求至正確的推送服務資料來源的 PushSubscription 資料 系統在訂閱期間傳回給您, 可能不準確或不適當PushSubscription 物件如下所示:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf"
  }
}

endpoint 的網域基本上是推送服務。這個 Deployment 路徑 endpoint 是用戶端 ID 資訊,可協助推送服務判斷 確切地將訊息推送到哪個用戶端。

keys 會用於加密,詳情請參閱後續說明。

加密推送訊息

您傳送至推送服務的資料必須加密。這麼做可以避免 推送服務無法查看你傳送給用戶端的資料。 請記住,要使用哪一個推送服務是由瀏覽器廠商決定, 推播服務在理論上可能不安全或不安全。您的伺服器必須使用 PushSubscription 中提供的 keys,用於加密其網路推送通訊協定 要求。

簽署網路推送通訊協定要求

推送服務可防止他人傳送訊息給您的 使用者。技術上來說,您可以選擇不需要這樣做,而是 Chrome 需要這項權限。在 Firefox 中,此欄位為選用。其他瀏覽器可能需要啟用這個模式

此工作流程包含專屬於您的私密金鑰和公開金鑰。 應用程式。驗證程序大致上如下所示:

  • 您產生私密金鑰與公開金鑰,是一次性工作。組合 稱為 應用程式伺服器金鑰。您可能也會看到呼叫 VAPID 金鑰VAPID 是 以及定義這項驗證程序的規格
  • 當您訂閱用戶端以接收 JavaScript 程式碼的推播通知時, 就必須提供公開金鑰推送服務產生 endpoint 時 該方法會將提供的公開金鑰與 endpoint 建立關聯。
  • 傳送網路推送通訊協定要求時,您會簽署某些 JSON 資訊 更新為私密金鑰
  • 推送服務收到網路推送通訊協定要求後,會使用儲存的 來驗證已簽署的資訊。如果簽名有效 則推送服務會知道請求是來自 對應的私密金鑰

自訂推送訊息的傳送方式

網路推送通訊協定要求規格也定義了相關參數, 自訂推送服務嘗試傳送推送訊息給用戶端的方式。 舉例來說,你可以自訂下列項目:

  • 訊息的存留時間 (TTL),定義推送服務的內容時間長度 嘗試傳送訊息
  • 訊息的急迫性,以便在推送服務受到保留時使用 用戶端的電池續航力,方法是只傳送高優先順序的訊息。
  • 訊息的主題,取代相同主題的任何待處理訊息 傳回最新的訊息。

接收推送的訊息並以通知形式顯示

把網路推送通訊協定要求傳送至推送服務後,推播服務就會 將要求排入佇列,直到出現下列任一事件為止:

  1. 用戶端上線,且推送服務會傳送推送訊息。
  2. 訊息過期。

用戶端瀏覽器收到推送的訊息時,會將推送訊息解密。 資料,並將 push 事件分派到您的服務 工作站。Service Worker 基本上,即使您的網站是在背景執行,也能在背景執行 JavaScript 程式碼 未開啟或瀏覽器已關閉在 Service Worker 的 push 事件中 呼叫 ServiceWorkerRegistration.showNotification() 來顯示資訊的處理常式 以通知的形式傳送

訊息將傳送至裝置。瀏覽器會喚醒 Service Worker。傳送推送事件。

後續步驟

程式碼研究室