PushSubscription

Baseline 已廣泛支援

此功能已成熟,並可在許多裝置和瀏覽器版本上執行。自 2023 年 3 月以來,它已在各種瀏覽器中可用。

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

注意:此功能在 Web Workers 中可用。

PushSubscription 介面是 Push API 的一部分,它提供了一個訂閱的 URL 端點,以及用於加密傳送到此訂閱的推送訊息的公鑰和金鑰。這些資訊必須透過任何您期望的應用特定的方法傳遞給應用程式伺服器。

該介面還提供了有關訂閱何時過期的資訊,以及一個用於取消訂閱的方法。

例項屬性

PushSubscription.endpoint 只讀

一個包含與推送訂閱相關的端點的字串。

PushSubscription.expirationTime 只讀

如果存在,則為與推送訂閱相關的訂閱過期時間的 DOMHighResTimeStamp,否則為 null。

PushSubscription.options 只讀

一個包含用於建立訂閱的選項的物件。

PushSubscription.subscriptionId 已棄用 只讀 非標準

一個包含與推送訂閱相關的訂閱 ID 的字串。

例項方法

PushSubscription.getKey()

返回一個 ArrayBuffer,其中包含客戶端的公鑰,該公鑰可以傳送到伺服器並用於加密推送訊息資料。

PushSubscription.toJSON()

標準序列化器 — 返回訂閱屬性的 JSON 表示。

PushSubscription.unsubscribe()

啟動從推送服務取消訂閱的非同步過程,並返回一個 Promise,該 Promise 在當前訂閱成功登出時解析為一個布林值。

描述

每個瀏覽器都使用一個特定的推送服務。服務工作執行緒可以使用 PushManager.subscribe() 來訂閱支援的服務,並使用返回的 PushSubscription 來發現應該傳送推送訊息的端點。

PushSubscription 還用於獲取應用程式伺服器必須用來加密傳送到推送服務的訊息的公鑰和金鑰。請注意,用於解密推送訊息的私鑰不會被瀏覽器共享,並且在訊息傳遞給服務工作執行緒之前用於解密訊息。這確保了推送訊息在透過推送伺服器基礎結構傳輸時保持私密。

服務工作執行緒除了將相關資訊傳遞給應用程式伺服器之外,不需要了解端點或加密的任何內容。可以使用任何機制與應用程式伺服器共享這些資訊。

示例

將編碼資訊傳送到伺服器

用於加密訊息的 p256dh 公鑰和 auth 金鑰透過其推送訂閱,使用 PushSubscription.getKey() 方法提供給服務工作執行緒,以及在 PushSubscription.endpoint 中傳送推送訊息的目標端點。用於加密的編碼由 PushManager.supportedContentEncodings 靜態屬性提供。

此示例顯示瞭如何將 PushSubscriptionsupportedContentEncodings 的所需資訊放入 JSON 物件中,使用 JSON.stringify() 進行序列化,並將結果釋出到應用程式伺服器。

js
// Get a PushSubscription object
const pushSubscription =
  await serviceWorkerRegistration.pushManager.subscribe();

// Create an object containing the information needed by the app server
const subscriptionObject = {
  endpoint: pushSubscription.endpoint,
  keys: {
    p256dh: pushSubscription.getKey("p256dh"),
    auth: pushSubscription.getKey("auth"),
  },
  encoding: PushManager.supportedContentEncodings,
  /* other app-specific data, such as user identity */
};

// Stringify the object an post to the app server
fetch("https://example.com/push/", {
  method: "post",
  body: JSON.stringify(subscriptionObject),
});

從推送管理器取消訂閱

js
navigator.serviceWorker.ready
  .then((reg) => reg.pushManager.getSubscription())
  .then((subscription) => subscription.unsubscribe())
  .then((successful) => {
    // You've successfully unsubscribed
  })
  .catch((e) => {
    // Unsubscribing failed
  });

規範

規範
推送 API
# pushsubscription-interface

瀏覽器相容性

另見