在一个呼叫中向所有订阅者发送web推送通知

基础概念

Web推送通知是一种允许网站或应用程序向用户的浏览器发送消息的技术。这些通知可以在用户不主动访问网站的情况下显示，从而提高用户的参与度和网站的互动性。

类型

标准推送通知：通过HTTP/2协议发送。
静默推送通知：用户不可见，但可以触发后台任务。

应用场景

新闻更新：及时向订阅者推送最新新闻。
电子商务：促销活动或订单状态更新。
社交网络：好友请求或消息提醒。
服务提醒：预约提醒或账单通知。

实现步骤

获取权限：用户同意接收通知。
订阅管理：保存用户的订阅信息。
发送通知：通过服务器向所有订阅者发送消息。

示例代码

前端部分（JavaScript）

// 请求通知权限
Notification.requestPermission().then(function(permission) {
  if (permission === 'granted') {
    // 用户同意接收通知
    navigator.serviceWorker.ready.then(function(registration) {
      registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY')
      }).then(function(subscription) {
        // 保存订阅信息到服务器
        sendSubscriptionToServer(subscription);
      });
    });
  }
});

function sendSubscriptionToServer(subscription) {
  // 发送订阅信息到服务器
  fetch('/api/subscribe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(subscription)
  });
}

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

后端部分（Node.js）

const webpush = require('web-push');

// 设置VAPID密钥
const vapidKeys = {
  publicKey: 'YOUR_VAPID_PUBLIC_KEY',
  privateKey: 'YOUR_VAPID_PRIVATE_KEY'
};
webpush.setVapidDetails(
  'mailto:your@email.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// 发送通知
function sendNotifications(subscriptions, payload) {
  subscriptions.forEach(subscription => {
    webpush.sendNotification(subscription, JSON.stringify(payload))
      .catch(error => {
        console.error('Error sending notification:', error);
        // 处理错误，例如移除无效的订阅
      });
  });
}

// 示例：向所有订阅者发送通知
app.post('/api/push', (req, res) => {
  const payload = { title: 'New Update', body: 'Check out the latest news!' };
  sendNotifications(allSubscriptions, payload);
  res.status(200).send('Notifications sent');
});