返回

第三篇：订阅一个用户

前端

让我们开始吧。

检查浏览器对推送消息的支持情况

首先，我们需要检查用户当前的浏览器是否支持推送消息。可以通过下面两个简单的方法来检测：

  1. navigator.serviceWorker.controller：如果该属性不为空，则表示当前浏览器支持服务工作线程，从而也支持推送消息。
  2. Notification.requestPermission()：这个方法在不支持推送消息的浏览器中会抛出错误。

请求用户允许发送通知的权限

一旦我们确定了用户当前的浏览器支持推送消息，就可以请求用户允许我们发送通知。为此，我们可以使用 Notification.requestPermission() 方法。

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    // 用户允许发送通知
  } else {
    // 用户拒绝发送通知
  }
});

需要注意的是，Notification.requestPermission() 方法只能在用户与页面进行交互时调用，否则会抛出错误。因此，我们通常会将其放在一个事件处理函数中，例如 click 事件处理函数。

使用 PushSubscription 来订阅用户

如果用户允许我们发送通知，就可以使用 PushSubscription 来订阅用户。为此，我们需要使用 navigator.serviceWorker.register() 方法来注册一个服务工作线程。

navigator.serviceWorker.register('service-worker.js').then((registration) => {
  registration.pushManager.subscribe({
    userVisibleOnly: true
  }).then((subscription) => {
    // 用户已订阅
  });
});

在上面的代码中，我们首先使用 navigator.serviceWorker.register() 方法注册了一个服务工作线程，然后使用 pushManager.subscribe() 方法来订阅用户。

userVisibleOnly 参数指定只有在用户可见的情况下才能发送通知。这是为了防止滥用推送消息。

总结

在本文中，我们讨论了如何在用户允许的情况下订阅用户。这只是 Web 推送通知系列文章的第三篇，后续文章将继续探讨如何发送通知、如何处理通知以及如何取消订阅。