subscribe()

2025年02月27日

柏拉文

越努力，越幸运

一、认识

---

PushManager 的 subscribe() 接口订阅了一个推送服务。返回一个 Promise 形式的 PushSubscription 对象，该对象包含了推送订阅详情。如果当前 service worker 没有已存在的订阅，则会创建一个新的推送订阅。

二、语法

---

subscribe(options)

• options: 一个包含可选配置参数的对象。包含以下属性:

  • userVisibleOnly: 布尔值，表示返回的推送订阅将只能被用于对用户可见的消息。

  • applicationServerKey: 推送服务器用来向客户端应用发送消息的公钥。该值是应用程序服务器生成的签名密钥对的一部分，可使用在 P-256 曲线上实现的椭圆曲线数字签名（ECDSA）。可以是 DOMString 或 ArrayBuffer。

• 返回值: 返回 PushSubscription 对象的 Promise。

三、用法

---

const vapidPublicKey =
  "BPkGGzVDFEOVvxOF-h0vRJQTrhYd4ZxwUN_of6t3kjUpAnaIPXqHjtx8c0i53fkdd-rn8dK3lwABntRW1sV9zzo";

function urlBase64ToUint8Array(base64String) {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, "+")
    .replace(/_/g, "/");
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

const registration = await navigator.serviceWorker.ready;

let subscription = await registration.pushManager.getSubscription();

if (!subscription) {
    const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);

    subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: applicationServerKey,
    });
}