push-notifications

推送通知

概述

Web 推送通知可在订阅者不在你的网站上时及时向他们发送消息，适用于商品到货提醒、降价通知和购物车提醒。推送需要用户明确授予浏览器权限，因此选择合适的订阅提示时机至关重要。对于 Shopify、WooCommerce 和 BigCommerce，专用推送通知应用（PushOwl、OneSignal）可处理所有订阅者管理、触发逻辑和消息发送，无需编写自定义 Service Worker 代码。

何时使用此技能

• 添加商品到货通知，以替代静态的“通知我”邮件表单时
• 除邮件外，还通过浏览器推送渠道挽回弃购时
• 为加入心愿单的商品构建价格监控功能时
• 邮件送达率较低，需要补充渠道时
• 面向推送订阅率高于邮件订阅率的移动优先市场时

核心说明

第 1 步：选择合适的推送通知平台

平台	最适合	Shopify	WooCommerce	BigCommerce	价格
PushOwl	原生集成 Shopify，支持商品到货提醒和弃购挽回	应用商店	—	—	免费套餐；$19+/mo
OneSignal	适用于所有平台，提供免费套餐且可高度配置	通过 JS 标签	插件	通过 JS 标签	免费套餐；$9+/mo
Klaviyo Web Push	已使用 Klaviyo 发送邮件	应用商店	插件	应用市场	包含在 Klaviyo 中
PushEngage	WooCommerce 和细分营销活动	—	插件	通过 JS 标签	免费套餐；$9+/mo

Shopify 推荐： 使用 PushOwl——它是集成度最高的 Shopify 推送应用，内置商品到货提醒、弃购挽回和发货提醒功能。

WooCommerce 推荐： 使用 PushEngage 或 OneSignal——两者都有 WordPress 插件，可自动处理订阅者管理。

第 2 步：设置推送通知

---

使用 PushOwl 配置 Shopify

1. 从 Shopify 应用商店安装 PushOwl
2. 前往 PushOwl → Settings → Opt-in Prompt 并进行配置：
   • 延迟显示提示：设置为客户浏览 2 个或更多页面，或将商品加入购物车后触发
   • 订阅提示消息：“商品到货或降价时通知我”
3. 前往 PushOwl → Automations → Back in Stock 并启用该功能——PushOwl 会自动为缺货商品添加“通知我”按钮，并在库存补充时发送推送通知
4. 前往 PushOwl → Automations → Cart Abandonment 并启用该功能：
   • 设置发送时间：弃购 1 小时后发送一次，然后在 24 小时后再发送一次
   • 自定义通知消息和购物车挽回 URL
5. 前往 PushOwl → Campaigns，发送有关促销、新品上市或限时折扣的广播推送通知

---

使用 PushEngage 配置 WooCommerce

1. 从 WordPress 插件目录安装 PushEngage（提供免费套餐）
2. 前往 PushEngage → Settings → Subscription Prompt 并配置订阅对话框
3. 启用自动化营销活动：
   • 前往 PushEngage → Automation → Cart Abandonment 并设置发送时间和消息
   • 前往 PushEngage → Automation → Back in Stock 并启用该功能（需要与 WooCommerce 库存事件集成）
4. 设置降价提醒：前往 PushEngage → Automation → Price Drop Alert，启用每件商品的订阅选项
5. 使用 PushEngage → Broadcast 向所有订阅者发送手动推送营销活动

---

使用 OneSignal 配置 BigCommerce

1. 在 onesignal.com 注册 OneSignal 并创建 Web Push 应用
2. 前往 OneSignal → Settings → Web Push → Setup，按照说明验证 HTTPS 域名
3. 通过 Storefront → Script Manager 将 OneSignal JavaScript 代码片段添加到 BigCommerce 商店：

   <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
   <script>
     window.OneSignalDeferred = window.OneSignalDeferred || [];
     OneSignalDeferred.push(async function(OneSignal) {
       await OneSignal.init({ appId: "YOUR_APP_ID" });
     });
   </script>
   

4. 设置商品到货提醒：使用 BigCommerce Webhook，在商品库存从 0 变为有货时触发 OneSignal API 调用
5. 设置弃购挽回：使用 BigCommerce 的 Abandoned Cart Webhook 和 OneSignal REST API 发送购物车挽回推送通知

---

自定义 / 无头

对于无头商店，直接使用 Web Push API 实现推送：

// Service worker — save as /sw.js in your public directory
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {};
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon ?? '/icons/icon-192.png',
      image: data.image,
      data: { url: data.url },
      actions: data.actions ?? [],
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data?.url ?? '/'));
});

// Server-side push sending using the web-push library
import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:[email protected]',
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

// Generate VAPID keys once: npx web-push generate-vapid-keys

async function sendPushNotification(subscription: PushSubscription, payload: {
  title: string;
  body: string;
  url: string;
  icon?: string;
}) {
  try {
    await webpush.sendNotification(subscription, JSON.stringify(payload));
  } catch (err: any) {
    if (err.statusCode === 410) {
      // Subscription expired — remove from database
      await db.pushSubscriptions.deleteByEndpoint(subscription.endpoint);
    }
  }
}

// Triggered when inventory transitions from 0 to > 0
async function notifyBackInStock(productId: string) {
  const product = await db.products.findById(productId);
  const waitlist = await db.pushWaitlist.findByProduct(productId);

  for (const entry of waitlist) {
    const sub = await db.pushSubscriptions.findByUserId(entry.userId);
    if (!sub) continue;
    await sendPushNotification(sub, {
      title: 'Back in stock!',
      body: `${product.name} is available again`,
      url: `${process.env.STORE_URL}/products/${product.slug}`,
      icon: product.images[0]?.url,
    });
  }
}

第 3 步：优化选择加入的时机

影响推送通知效果的最关键因素是何时显示权限提示。切勿在首次加载页面时请求权限。

显示选择加入提示的最佳时机：

• 访客浏览了 3 件或更多商品后
• 客户将商品加入购物车后立即
• 客户查看缺货商品时（情境：“到货时通知我”）
• 订单确认页面上（“通过浏览器推送获取配送更新和优惠信息”）

在 PushOwl 中：前往 Settings → Opt-in Prompt → Advanced 并设置触发条件。 在 PushEngage 中：前往 Subscription Prompt → Display Rules 并设置页面浏览次数或购物车事件触发条件。

第 4 步：设置转化率最高的推送营销活动

按转化率排序的优先级：

1. 到货提醒 — 点击率最高（15–25%）；客户专门针对这件商品选择了订阅
2. 购物车弃购挽回 — 设置为弃购后 1 小时和 24 小时发送；第二条推送中营造紧迫感（“您的购物车即将失效”）
3. 降价提醒 — 关注特定商品的客户在收到目标价格通知后，转化率为 10–20%
4. 配送更新 — 以低摩擦方式增加推送订阅者（在订单确认时收集）；让品牌持续留在用户心中

在 PushOwl 中： 这四种功能都作为预设自动化流程提供，可在 Automations 下找到 — 启用并自定义消息。

第 5 步：衡量推送效果

指标	健康目标	查看位置
选择加入率	新访客的 5–15%	应用仪表板
到货提醒点击率	15–25%	PushOwl/PushEngage 分析
购物车弃购挽回率	2–5%	应用分析
每个营销活动的退订率	< 2%	应用分析

如果退订率高于 2%，请降低推送频率或提高消息的相关性。

最佳实践

• 切勿在首次加载页面时请求权限 — 在用户执行加入购物车等操作后显示提示，接受率会从约 5% 提升至约 25%
• 每位用户每天最多发送 2 条推送通知 — 频率过高是用户选择退出的首要原因
• 为有时效性的通知设置 TTL — 限时促销推送应在促销结束时过期；PushOwl 和 PushEngage 均支持通知过期
• 将通知正文控制在 100 个字符以内 — 在 Android 上，较长的正文会被截断；部署前请在移动设备上测试
• 在缺货商品页面使用“通知我” — 这样可以根据具体情境吸引高意向订阅者；通用的全站选择加入效果较差

常见问题

问题	解决方案
选择加入率低	将权限提示移到加入购物车后，或浏览第 3 件商品后；切勿在首次加载时显示
iOS 用户收不到推送	iOS 上的网页推送需要 iOS 16.4 或更高版本，并且用户必须将网站安装为 PWA（添加到主屏幕）；这是浏览器限制
缺货到货时未发送推送通知	确认在 PushOwl/PushEngage 设置中已连接库存 webhook；检查应用的自动化日志
退订率高	降低推送频率；添加偏好管理功能，让订阅者选择接收哪些类型的通知
数据库中存在重复订阅	对于自定义实现，请使用以 (userId, endpoint) 为键的 upsert

相关技能

• @email-marketing-automation
• @cart-abandonment-recovery
• @sms-marketing
• @exit-intent-popups
• @customer-retention-engine