网页推送通知：如何设置而不让人烦恼

什么是网页推送及其工作原理

网页推送通知是来自网站的简短消息，即使在标签页关闭时也能到达浏览器。用户只需一次授权，浏览器返回一个带有端点和密钥的订阅，您的服务器通过使用VAPID签名协议的推送服务发送消息。黄金法则是在合适的时机请求权限，绝不要频繁打扰用户。

选择加入用户体验：如何有效请求

在第一秒内触发本地浏览器提示几乎总是会导致“阻止”。一种两步模式有效：首先是您自己的软提示，解释好处，只有在获得同意后才进行系统请求。

• 不是立即的。 在第一次有用的操作后显示提示，而不是在到达时。
• 解释原因。 “当价格下降时通知您？”比静默提示更有效。
• 尊重拒绝。 如果他们拒绝，请不要在几周内重新请求。
• 上下文。 在产品页面上请求，而不是在主页上。

VAPID密钥

VAPID（自愿应用服务器标识）用于识别您的服务器与推送服务。您需要一对密钥：公钥在订阅时发送到浏览器，私钥保留在服务器上并签署请求。

# 生成VAPID密钥对
npx web-push generate-vapid-keys

公钥： BQ8...prqZk
私钥：3Kf...9dQ
主题： mailto:push@yourtrend.online

公钥在浏览器订阅时传递：

registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: 'BQ8...prqZk'
});

频率：如何不打扰用户

推送比电子邮件更快地引起烦恼，因为它会覆盖一切。频率指导：

始终提供安静时间和简单的选择退出。夜间推送是被关闭的直接途径。

网页推送细分

与电子邮件一样，不要发送给所有人。按查看的类别、城市、语言和行为进行细分。放弃的购物车、喜欢的商品降价、重新入库——有针对性的场景比大规模推送的点击率高得多。在YourTrend，网页推送与电子邮件、短信、细分和自动化并存，因此选择的渠道适合受众——在功能页面上查看概述。

有用的使用案例

1. 放弃的购物车 在1-2小时后。
2. 价格下降 在收藏的商品上。
3. 重新有货 给那些等待的人。
4. 订单状态：已发货，已送达。
5. 内容：关于他们关注的主题的新文章。

发送和接收的样子

服务器向订阅端点发送加密消息，浏览器中的服务工作者捕获推送事件，即使标签页关闭也会显示通知。有效载荷是一个简短的JSON：

{
  "title": "价格下降20%",
  "body": "您收藏的运动鞋现在更便宜了",
  "icon": "/icons/push-192.png",
  "url": "/catalog/sneakers/42"
}

// service-worker.js
self.addEventListener('push', function(event) {
  const d = event.data.json();
  event.waitUntil(
    self.registration.showNotification(d.title, {
      body: d.body, icon: d.icon, data: { url: d.url }
    })
  );
});

点击时，将用户发送到url字段中的特定产品，而不是主页——这明显提高了转化率。

浏览器支持和iOS

Web推送在桌面和Android上的Chrome、Firefox、Edge和Opera中有效。关键的警告是Safari：在iPhone和iPad上，推送仅在用户将网站作为PWA添加到主屏幕时才会到达（自iOS 16.4+可用）。因此，Web推送补充了电子邮件，但并不替代它：你的部分受众在技术上将无法接收。根据细分组合渠道——电子邮件、短信和推送。

常见错误

• 在没有上下文的情况下在第一秒显示权限提示。
• 仅限促销，没有有用的通知。
• 没有细分——对所有人发送相同的推送。
• 没有安静时间或明确的退出选项。
• 链接指向主页，而不是特定产品。

要点

Web推送是一个快速、引人入胜的渠道，但需要技巧：在合适的时间询问，解释好处，进行细分并保持合理的频率。这样通知就能帮助而不是烦扰。选择一个包含你所需渠道的定价页面的计划。