Nodejs网页推送通知模块node-web-push的使用

Nodejs网页推送通知模块node-web-push的使用
node-web-push 是一个在 Node.js 中实现 Web 推送通知功能的库。它可以帮助你在服务器端发送推送通知到客户端浏览器。下面是如何使用 node-web-push 的步骤和示例代码。

1. 安装 node-web-push

首先，你需要安装 node-web-push 库：

npm install node-web-push

2. 注册 VAPID 密钥

Web 推送通知需要一个 VAPID 密钥对来验证你的服务器身份。你可以使用任何工具生成 VAPID 密钥对，比如 OpenSSL：

openssl ecparam -genkey -name prime256v1 -noout -out private_key.pem
openssl ec -in private_key.pem -pubout -out public_key.pem

然后读取这些密钥文件的内容，并将其转换为 Base64 编码的字符串。

3. 初始化 node-web-push

在你的 Node.js 项目中初始化 node-web-push，并设置 VAPID 密钥：

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

// 设置 VAPID 密钥
webpush.setVapidDetails(
  'mailto:your-email@example.com', // 发件人电子邮件
  'YOUR_PUBLIC_VAPID_KEY',         // 公钥
  'YOUR_PRIVATE_VAPID_KEY'         // 私钥
);

4. 订阅处理

当用户订阅推送通知时，前端会向后端发送一个包含订阅信息的对象。这个对象包含了用户的订阅信息，包括端点（endpoint）、公钥（keys.p256dh）和加密密钥（keys.auth）。

5. 发送推送通知

一旦你有了用户的订阅信息，就可以发送推送通知了：

const subscription = {
  endpoint: 'THE_USER_ENDPOINT',
  keys: {
    p256dh: 'THE_USER_P256DH_KEY',
    auth: 'THE_USER_AUTH_KEY'
  }
};

const payload = JSON.stringify({ title: 'Hello, World!' });

webpush.sendNotification(subscription, payload)
  .catch(err => console.error('Error sending notification:', err));

6. 错误处理

确保处理所有可能的错误，例如订阅过期或无效的情况。

示例：完整的服务器端代码

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

const app = express();

// 设置 VAPID 密钥
webpush.setVapidDetails(
  'mailto:your-email@example.com',
  'YOUR_PUBLIC_VAPID_KEY',
  'YOUR_PRIVATE_VAPID_KEY'
);

app.use(express.json());

app.post('/send-notification', (req, res) => {
  const subscription = req.body.subscription;
  const payload = JSON.stringify(req.body.payload);

  webpush.sendNotification(subscription, payload)
    .then(() => res.status(200).json({ message: 'Notification sent successfully.' }))
    .catch(err => {
      console.error('Error sending notification:', err);
      res.status(500).json({ error: 'Failed to send notification.' });
    });
});

app.listen(3000, () => console.log('Server running on port 3000'));

这段代码创建了一个简单的 Express 服务器，它监听 /send-notification 路由，接收订阅信息和消息内容，并尝试发送推送通知。

前端代码

在前端，你需要使用 serviceWorkerRegistration 来获取用户的订阅信息：

navigator.serviceWorker.ready.then(function(registration) {
  registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (!subscription) {
        // 用户未订阅，可以引导用户订阅
      } else {
        // 发送订阅信息到服务器
        fetch('/send-notification', {
          method: 'POST',
          body: JSON.stringify({
            subscription: subscription,
            payload: { title: 'Hello, World!' }
          })
        });
      }
    });
});

这样，你就完成了基本的 Web 推送通知功能的实现。