PushManager:subscribe() 方法

安全上下文:此功能仅在安全上下文(HTTPS)中可用,在某些或所有支持的浏览器中。

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

subscribe() 方法是 PushManager 接口的方法,用于订阅推送服务。

它返回一个 Promise,该 Promise 解析为一个 PushSubscription 对象,其中包含推送订阅的详细信息。如果当前服务工作者没有现有的订阅,则会创建一个新的推送订阅。

语法

js
subscribe(options)

参数

options 可选

一个包含可选配置参数的对象。它可以具有以下属性

userVisibleOnly

一个布尔值,指示返回的推送订阅将仅用于其效果对用户可见的消息。

applicationServerKey

一个 Base64 编码的字符串或 ArrayBuffer,包含推送服务器将用于验证您的应用程序服务器的 ECDSA P-256 公钥。如果指定,则来自您的应用程序服务器的所有消息都必须使用 VAPID 身份验证方案,并包含使用相应私钥签名的 JWT。此密钥不是您用于加密数据的 ECDH 密钥。有关更多信息,请参阅“使用 VAPID 与 WebPush”。

注意:此参数在 Chrome 和 Edge 等某些浏览器中是必需的。如果 userVisibleOnly 未设置为 true,它们将拒绝 Promise。

返回值

一个 Promise,该 Promise 解析为一个 PushSubscription 对象。

示例

js
this.onpush = (event) => {
  console.log(event.data);
  // From here we can write the data to IndexedDB, send it to any open
  // windows, display a notification, etc.
};

navigator.serviceWorker.register("serviceworker.js");

// Use serviceWorker.ready to ensure that you can subscribe for push
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  const options = {
    userVisibleOnly: true,
    applicationServerKey,
  };
  serviceWorkerRegistration.pushManager.subscribe(options).then(
    (pushSubscription) => {
      console.log(pushSubscription.endpoint);
      // The push subscription details needed by the application
      // server are now available, and can be sent to it using,
      // for example, the fetch() API.
    },
    (error) => {
      // During development it often helps to log errors to the
      // console. In a production environment it might make sense to
      // also report information about errors back to the
      // application server.
      console.error(error);
    },
  );
});

响应用户手势

subscribe() 调用应作为对用户手势(例如单击按钮)的响应来执行

js
btn.addEventListener("click", () => {
  serviceWorkerRegistration.pushManager
    .subscribe(options)
    .then((pushSubscription) => {
      // handle subscription
    });
});

这不仅是最佳实践——您不应该向用户发送他们不同意的通知——而且将来浏览器将明确禁止未响应用户手势而触发的通知。例如,Firefox 从 72 版本开始就已经这样做了。

规范

规范
Push API
# dom-pushmanager-subscribe

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。