跳转到主要内容
网页推送通知是在用户未正在浏览您的网站时重新吸引用户并传递重要信息的强大方式。它们支持包括文本、图像、操作按钮和声音在内的丰富内容。
Web push notification examples across different browsers and devices
网页推送的运行条件:
  • HTTPS 网站:网页推送只能在具有有效 SSL 证书的安全网站上运行
  • Service worker:您必须能够将 OneSignal Service Worker 添加到您的网站
  • 单一域名来源:必须遵循同源策略
  • 用户权限:用户必须明确授权才能接收通知
  • 支持的浏览器:适用于大多数现代浏览器(Chrome、Firefox、Safari、Edge)
用户无法在无痕模式或隐私浏览模式下订阅。iOS 设备需要额外设置(请参阅 iOS 网页推送)。某些浏览器可能有通知限制或需要用户交互,请参阅网页推送常见问题解答
本指南将引导您完成每个步骤——从 SDK 设置到发送个性化推送消息——帮助您成功实现 OneSignal 推送通知。

网页推送开发者指南

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

配置选项

在 OneSignal 仪表板的 设置 > 推送和应用内 > Web 中为您的网站设置网页推送。
OneSignal dashboard showing web push platform activation in settings
选择与您网站匹配的集成类型:
OneSignal dashboard showing integration type options: Typical Site, WordPress, and Custom Code
网站详情:
  • 网站名称:用于默认通知标题
  • 网站 URL:必须与您的域名来源完全匹配(不包含路径或 www 不匹配)
  • 自动重新订阅:推荐 - 自动重新订阅清除了浏览器数据的返回用户
  • 默认图标 URL:在通知中显示的 256x256像素 图像(如果未设置,将使用默认的铃铛图标)

自动重新订阅

如果用户清除了浏览器数据,他们将停止接收推送通知。启用此选项可在用户返回您的网站时自动重新订阅他们。请参阅订阅获取更多详情。
OneSignal dashboard web push configuration settings showing site details and auto resubscribe option

网页权限提示

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

欢迎通知

您可以启用可选的确认推送,在用户订阅后立即发送。 常规和 WordPress 集成可以在仪表板中设置此功能。
OneSignal dashboard showing welcome notification configuration with title, message, and URL fields
自定义代码集成在 OneSignal.init 函数中使用 welcomeNotification 对象。请参阅Web SDK 参考获取详情。 为什么要发送欢迎通知?
  • 让用户知道他们已成功订阅
  • 展示未来通知的样子
  • 提供入门内容或后续步骤

用户和订阅

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

iOS 支持

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

设计网页推送通知

制作有效的推送通知不仅仅涉及编写文本。了解哪些元素是可自定义的以及如何有效使用它们。
Annotated diagram showing the anatomy of a web push notification with customizable and browser-controlled elements
  1. 标题:吸引注意力的标题(建议:低于 50 个字符)
  2. 消息:主要通知内容(建议:低于 120 个字符)
  3. 图标:您的品牌图标或特定通知图像(建议:256x256像素 PNG 或 JPG)
  4. 大型图像:吸引眼球的视觉内容
  5. 操作按钮:行动召唤按钮
  6. 浏览器:显示推送的浏览器/应用
  7. 域名:您的网站来源由浏览器自动设置
  8. 时间戳和关闭:浏览器添加这些控制
  9. 更多选项:浏览器特定的额外控制

消息个性化和本地化

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

配置网页推送行为

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

推送、显示和关闭设置

点击行为

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

测试您的设置

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

发布前检查清单

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

推送分析和故障排除

衡量通知性能并解决常见交付问题:

后续步骤


常见问题解答

iOS 上的用户可以订阅网页推送吗?

可以,从 iOS 16.4+ 开始。用户必须先将您的网站添加到主屏幕,然后授予通知权限。完整设置步骤请参阅 iOS 网页推送

为什么用户停止接收网页推送通知?

最常见的原因是用户清除了浏览器数据,这会删除推送订阅。在您的网页推送设置中启用自动重新订阅,以自动重新订阅回访用户。详情请参阅订阅

网页推送通知在无痕模式或隐私浏览模式下有效吗?

不。用户在无痕模式或隐私浏览模式下无法订阅网页推送。在普通会话中创建的订阅在隐私模式下无法访问。

哪些浏览器支持网页推送通知?

Chrome、Firefox、Safari(macOS 和 iOS 16.4+)以及 Edge 都支持网页推送。每个浏览器可能有不同的提示行为和通知显示方式。浏览器特定详情请参阅网页推送常见问题解答

我可以在网页推送中使用子域名吗?

每个子域名(例如,app.example.comshop.example.com)都是独立的源。浏览器为网页推送强制执行同源策略,因此每个子域名都需要自己的 OneSignal 应用。Service Worker 还必须托管在与订阅页面相同的源上——不允许使用 CDN 和其他子域名。有关设置选项,请参阅多站点和子域名

如何为网页推送注册多个域名?

每个域名或子域名都需要一个独立的 OneSignal 应用。一个 OneSignal 应用只能服务一个源。要管理多个域名,可以将用户重定向到单个源进行订阅,或者为每个源创建独立的 OneSignal 应用。有关详细策略,请参阅多站点和子域名

为什么我的网页推送提示没有显示?

常见原因包括:网站不是通过 HTTPS 提供的、Service Worker 注册不正确、用户已经授予或拒绝了权限,或者用户在无痕模式下。检查浏览器控制台中的错误,并参阅通知未显示获取完整检查清单。