如何通过表单动态发送自定义 Web Push 通知-js教程-PHP中文网

本文介绍如何在 node.js 后端与前端 html 表单配合下，实现用户输入内容并实时触发个性化 web push 通知，避免硬编码消息、重复重启服务，并确保推送数据准确传递至 service worker。

本文介绍如何在 node.js 后端与前端 html 表单配合下，实现用户输入内容并实时触发个性化 web push 通知，避免硬编码消息、重复重启服务，并确保推送数据准确传递至 service worker。

要真正掌握 Web Push 的实用性，关键在于解耦通知内容与后端逻辑——即不再将消息写死在代码中（如 'Hello World'），而是通过 HTTP 请求动态接收、构造并发送。你已成功迈出关键一步：将 GET 改为 POST 并使用 req.body 提取表单数据。下面我们将这一流程完整落地，形成可复用、健壮的推送方案。

✅ 正确配置前后端通信

首先，确保你的 Express 应用启用 body-parser 中间件（Node.js v4.16+ 推荐使用内置 express.json() 和 express.urlencoded()）：

// index.js
const express = require('express');
const app = express();

// 必须启用，否则 req.body 为空
app.use(express.json());
app.use(express.urlencoded({ extended: true })); // 支持 application/x-www-form-urlencoded

// ✅ 使用 POST 接收表单数据（推荐）
app.post('/webapp/send-notification', (req, res) => {
  const subscription = dummyDb.subscription; // 替换为真实数据库查询逻辑
  const { title = 'Example Website', body = 'No message provided' } = req.body;

  // 构造结构化 payload（强烈建议 JSON 格式，便于 Service Worker 解析）
  const payload = JSON.stringify({ title, body });

  try {
    sendNotification(subscription, payload); // 注意：sendNotification 需支持发送 JSON 字符串
    res.status(200).json({ success: true, message: 'Notification queued' });
  } catch (err) {
    console.error('Push send failed:', err);
    res.status(500).json({ error: 'Failed to send notification' });
  }
});

⚠️ 重要提示：sendNotification() 函数必须使用 Web Push Library 并正确加密 payload（不能直接传纯文本字符串）。若当前函数仅支持明文，需重构如下：

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

// 初始化（需设置 VAPID keys）
webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

async function sendNotification(subscription, payload) {
  await webpush.sendNotification(subscription, payload);
}

? 前端 HTML 表单（简洁可靠）

在你的 index.html 或管理页面中添加如下表单（无需刷新页面，支持多次提交）：

<h3>发送自定义推送通知</h3>

? Service Worker 端增强解析能力

你当前的 push 事件监听器仅处理 .text()，但现代 Web Push 要求接收加密后的 JSON payload。请更新 service-worker.js 如下：

self.addEventListener('push', function(event) {
  let data = {};

  if (event.data) {
    try {
      // 尝试解析为 JSON（推荐方式）
      data = event.data.json();
    } catch (e) {
      // 兜底：若为纯文本则转为 { body }
      data = { body: event.data.text() };
    }
  }

  const title = data.title || 'New Notification';
  const body = data.body || 'You have a message.';

  const options = {
    body,
    icon: '/icons/icon-192.png',
    badge: '/icons/icon-72.png',
    tag: 'custom-push',
    data: { url: '/' } // 可选：点击跳转目标
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

?️ 关键注意事项与最佳实践

不要依赖全局 dummyDb.subscription：生产环境必须按用户 ID 查询对应订阅对象（含 endpoint, keys.p256dh, keys.auth），且每次推送前校验 endpoint 是否有效（HTTP 410 表示已退订）。
避免 GET 传参推送：GET 请求易被缓存、有长度限制、不安全；POST 是唯一符合 REST 语义与安全要求的方式。
务必验证并清理过期订阅：用户禁用通知或更换设备后，旧 endpoint 会失效，需捕获 410 Gone 响应并从数据库移除。
启用 HTTPS：Web Push 强制要求 HTTPS（本地 localhost 除外），否则 Service Worker 无法注册。

通过以上改造，你已构建出一个可交互、可扩展、符合规范的 Web Push 通知系统。下一步可引入模板引擎（如 EJS）、定时任务或用户分组推送，让通知真正服务于业务场景。