HTML属性本身不驱动多渠道推送，data-*仅作静态配置，formaction用于服务端路由提交，HTMX通过hx-post与hx-headers声明通道，而真正运行时通道映射由Service Worker中event.data.json().channel决定。
HTML 本身没有属性映射机制能直接驱动多渠道推送——data- 属性只是静态字符串容器，formaction 只控制表单提交目标，href 或 src 也不具备条件分发能力。所谓“属性映射用于推送”，本质是前端用属性做配置标记，再由 JS 主动读取并触发对应通道逻辑。
data-* 属性只能做初始化配置，不能自动绑定推送行为
比如写 <button data-push-channel="webpush" data-user-id="123">发送通知</button>，这个 data-push-channel 不会自己调用 Notification.requestPermission()，也不会自动注册 Service Worker。它只在 DOM 加载时提供一个字符串值。
常见错误现象：
- 改了
el.dataset.pushChannel = "sms"，但没手动触发新通道逻辑，推送仍走 Web Push - 把
data-topic当成响应式变量，在 Vue 模板里直接写{{ item.data-topic }}—— 实际无效，dataset不进响应式系统
正确做法是：在点击事件中显式读取并分支处理
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', () => {
const channel = button.dataset.pushChannel;
const userId = button.dataset.userId;
if (channel === 'webpush') {
sendWebPush(userId);
} else if (channel === 'sms') {
sendSms(userId);
}
});
formaction + hidden 字段更适合服务端驱动的多通道提交
当推送动作需经后端统一调度（如根据用户偏好自动选通道：iOS 推送 → APNs，Android → FCM，Web → VAPID），用 formaction 配合隐藏字段比纯前端判断更可靠。
使用场景：
- 管理后台中，“发送公告”按钮需按接收者设备类型路由到不同推送网关
- 表单提交不走 JS，保障 JS 失效或禁用时仍可降级为服务端兜底
关键点：
-
formaction必须指向真实可处理该通道的后端端点，如/api/push/apns、/api/push/fcm - 用
<input type="hidden" name="user_id" value="123">传递上下文，避免 URL 暴露敏感参数 - 不要依赖
formenctype="application/json"：浏览器原生表单只支持application/x-www-form-urlencoded或multipart/form-data
HTMX 的 hx-post + hx-headers 是轻量多通道协调的实用组合
HTMX 不需要写 JS，但通过属性声明就能把不同推送通道的请求细节封装进标签，适合快速迭代的运营活动页。
示例：同一按钮，根据 data-mode 切换推送协议
<button
hx-post="/api/push"
hx-headers='{"X-Push-Channel": "webpush"}'
hx-trigger="click"
hx-target="#status"
>Web 推送</button>
<p><button
hx-post="/api/push"
hx-headers='{"X-Push-Channel": "email"}'
hx-trigger="click"
hx-target="#status"
>邮件推送</button>
注意：
-
hx-headers是字符串，必须用单引号包裹整个 JSON，内部键名用双引号 - 后端需识别
X-Push-Channel并路由到对应服务，不能只靠前端属性就认为“已推送” - HTMX 默认不带 CSRF token，若后端校验严格，需额外加
hx-headers='{"X-CSRF-Token": "..."}'
Service Worker 中的 event.data.channel 是真正运行时的通道映射点
所有 Web Push 最终都落到 Service Worker 的 push 事件，这时 event.data.json().channel 才是服务端写入的、决定最终行为的映射依据。
容易踩的坑：
- 前端在订阅时传了
data-channel: "sms"，但后端推送时没写进 payload，SW 收到空 channel，无法判断展示方式 - 在
push事件里用self.registration.showNotification()硬编码标题，忽略服务端下发的title和body字段 - 没处理
notificationclick事件里的event.notification.data.url，导致点击通知后跳转错误页面
真正起作用的映射发生在服务端生成推送 payload 时，例如：
{
"channel": "webpush",
"title": "新消息",
"body": "您有1条未读私信",
"url": "/messages/123"
}
这个 channel 字段才是运行时唯一可信的通道标识——HTML 属性只是启动链路上的配置入口，不是执行依据。
