跳转到主要内容

​
概述

网页推送通知是在用户未正在浏览您的网站时重新吸引用户并传递重要信息的强大方式。它们支持包括文本、图像、操作按钮在内的丰富内容，并可以帮助提高用户留存率和参与度。

网页推送通知帮助您即使在用户未在您的网站上时也能联系到他们

网页推送的运行条件：
  • HTTPS 网站：网页推送只能在具有有效 SSL 证书的安全网站上运行
  • 单一域名来源：必须遵循同源策略
  • 用户权限：用户必须明确授权才能接收通知
  • 支持的浏览器：适用于大多数现代浏览器（Chrome、Firefox、Safari、Edge）
重要限制： 本指南将引导您完成每个步骤——从 SDK 设置到发送个性化推送消息——帮助您成功实现 OneSignal 推送通知。

​
网页推送开发者指南

在您可以发送网页推送通知之前，您的开发人员需要完成以下步骤。
不是开发人员？请参阅管理团队成员以邀请具有开发者访问权限的团队成员加入您的 OneSignal 项目。

Web SDK 设置

安装和配置 OneSignal Web SDK 的完整指南，包括本地测试和权限提示。

WordPress 插件

使用我们的官方插件在 WordPress 上快速集成推送通知——无需编码。

iOS 网页推送设置

按照 Apple 的具体步骤在运行 iOS 16.4+ 的 iPhone 和 iPad 上启用网页推送。

从其他提供商迁移

了解如何从其他网页推送提供商迁移并保留您的订阅者。

​
配置选项

在 OneSignal 仪表板的 设置 > 推送和应用内 > Web 中为您的网站设置网页推送。

在您的 OneSignal 设置中激活 Web 平台

选择与您网站匹配的集成类型：

根据您的网站设置选择集成类型


常规网站

推荐 - 直接在仪表板中配置提示、欢迎通知和服务工作者设置——无需后端编码。

WordPress

使用官方 OneSignal 插件，通过完全基于 UI 的配置轻松在您的 WordPress 网站上设置推送。

自定义代码

为希望通过代码自定义一切的开发人员提供完全控制设置。
网站详情：
  • 网站名称：用于默认通知标题
  • 网站 URL：必须与您的域名来源完全匹配（不包含路径或 www 不匹配）
  • 自动重新订阅：推荐 - 自动重新订阅清除了浏览器数据的返回用户
  • 默认图标 URL：在通知中显示的 256x256像素 图像（如果未设置，将使用默认的铃铛图标）

​
自动重新订阅

网页推送的一个重要概念是，如果用户清除了浏览器数据，他们将停止接收推送通知。启用此选项可在用户返回您的网站时自动重新订阅他们。请参阅订阅获取更多详情。

OneSignal 仪表板中的 Web 设置

​
网页权限提示

提示用户授予通知权限对于选加入至关重要。您可以根据设置自定义权限请求的行为和外观。 最佳实践：
  • 使用清晰的消息解释好处
  • 在适当的时机提示用户（例如用户参与后）
  • 在触发浏览器原生对话框之前使用预提示

网页权限提示

比较不同的提示类型（下拉式、基于类别的、原生、订阅铃铛等）并了解何时使用每种。

Web SDK 参考

了解如何使用 SDK 编程控制提示的显示时机和方式。

​
欢迎通知

您可以启用可选的确认推送，在用户订阅后立即发送。 常规和 WordPress 集成可以在仪表板中设置此功能。

欢迎通知确认成功订阅并展示价值

自定义代码集成在 OneSignal.init 函数中使用 welcomeNotification 对象。请参阅Web SDK 参考获取详情。 为什么要发送欢迎通知？
  • 让用户知道他们已成功订阅
  • 展示未来通知的样子
  • 提供入门内容或后续步骤

​
了解用户和订阅

当用户订阅推送时，OneSignal 会自动创建与其浏览器/设备绑定的唯一订阅。 网页推送订阅在以下情况下创建：
  • 使用特定浏览器和设备在您的网站上授予推送通知权限
  • 清除浏览器数据后返回您的网站（如果启用了自动重新订阅）
  • 从新的浏览器或设备订阅
重要说明：
  • 每个浏览器/设备组合都会创建单独的订阅
  • 隐身/私密浏览模式无法创建订阅
  • 网页推送订阅在您为其分配外部 ID 之前保持匿名

OneSignal 仪表板：受众 > 用户


用户

了解如何管理用户、分配外部 ID 并跟踪他们的活动。

订阅

了解订阅在不同浏览器和设备上的工作原理。

用户群体

根据行为、设备等将用户分组为群体进行定向。

​
iOS 支持

Apple 为运行 iOS 16.4+ 的 iPhone 和 iPad 添加了网页推送支持，但有更严格的要求：
  • 用户必须将您的网站添加到主屏幕
  • 权限提示仅在该步骤后显示
  • 通知一旦启用，就像原生应用警报一样运作

iOS 网页推送

启用 iOS 支持的分步指导，包括服务工作者和清单设置。

让您的受众添加到主屏幕

鼓励用户安装您的网站以便他们可以接收 iOS 网页推送的技巧。

​
设计网页推送通知

制作一个好的推送通知不仅仅涉及编写文本。设计很重要。了解哪些元素是可自定义的以及如何有效使用它们。

网页推送通知解剖图 - 自定义元素 1-6，而 7-9 由浏览器控制

  1. 标题：吸引注意力的标题（建议：低于 50 个字符）
  2. 消息：主要通知内容（建议：低于 120 个字符）
  3. 图标：您的品牌图标或特定通知图像（建议：256x256像素 PNG 或 JPG）
  4. 大型图像：吸引眼球的视觉内容
  5. 操作按钮：行动召唤按钮
  6. 浏览器：显示推送的浏览器/应用
  7. 域名：您的网站来源由浏览器自动设置
  8. 时间戳和关闭：浏览器添加这些控制
  9. 更多选项：浏览器特定的额外控制

推送概览

推送通知创建、选项和传递行为的完整概览。

模板

使用可重复使用的模板进行一致的消息传递，节省时间。

​
消息个性化和本地化

您可以自定义推送消息以匹配每个用户的偏好和语言。

消息个性化

插入动态变量（如姓名或偏好）来定制消息。

多语言消息

以每个用户的首选语言自动传递消息。

​
配置网页推送行为

控制推送消息发送后的行为——何时显示、存储多长时间以及用户如何交互。

​
推送、显示和关闭设置

限流

控制通知传递速度。

频率限制

设置限制以防止向同一用户过度发送通知。

生存时间 (TTL)

定义设备离线时推送服务保留消息的时间。

网页推送主题

使用主题来分组、更换或抑制重复通知。

​
点击行为

控制用户点击通知时发生的情况。 **默认情况：**点击打开您的主页。 自定义它：
  • 将用户导向特定 URL
  • 使用 UTM 跟踪
  • 使用 ?_osp=do_not_open 抑制默认行为

URL、链接和深度链接

使用深度链接和跟踪将用户路由到相关内容或页面。

操作按钮

让用户从您的通知中立即采取操作。

SDK 推送通知事件监听器

监听点击事件并使用自定义代码触发应用内行为。

​
测试您的设置

在发布之前，彻底测试您在各种设备和浏览器上的网页推送实现。

​
发布前检查清单

  • SDK 正确加载且无错误
  • 权限提示出现并正常运行
  • 测试通知已发送和接收
  • 图标和图像正确渲染
  • 服务工作者已更新
  • HTTPS 证书有效

​
推送分析和故障排除

衡量和改善通知性能：

推送消息报告

查看每条消息的传递、打开率和点击率指标。

分析概览

探索各渠道的参与度和用户行为指标。

通知未显示或延迟

如果消息未出现的故障排除检查清单。

通知图像未显示

修复不同浏览器中的图像渲染问题。
恭喜！您的网页推送通知设置已完成。后续步骤：
  • A/B 测试：通过实验优化消息
  • 历程：构建自动化消息流
  • 标签：添加用户级别数据用于定向
  • 分析：跟踪参与度和转化指标
⌘I