Skip to main content
按照本指南启用网页推送，以便在用户不在您的网站上时，通过及时的内容触达他们。网页推送支持文本、图像、操作按钮和声音。
Web push notification examples across different browsers and devices

网页推送通知即使在用户不在您的网站上时也能触达他们

网页推送的要求：
  • 具有有效 SSL 证书的安全 HTTPS 网站
  • 能够将 OneSignal Service Worker 添加到您的网站
  • 遵循同源策略的单一源
  • 用户授予接收通知的权限
  • 受支持的浏览器（Chrome、Firefox、Safari、Edge）
用户无法在无痕模式或隐私浏览模式下订阅。iOS 需要额外设置，请参阅 iOS 网页推送。某些浏览器会限制提示或要求用户手势，请参阅网页推送常见问题解答。

​
选择您的设置指南

完成以下网站设置路径之一。
不是开发人员？请参阅管理团队成员，邀请具有开发者访问权限的团队成员加入您的 OneSignal 项目。

Web SDK 设置

常规网站：配置仪表板、上传 Service Worker 并添加 JavaScript SDK。

WordPress 插件

官方 OneSignal 插件。无需 JavaScript SDK 或上传 Service Worker。

Shopify 设置

通过 Vendo 集成连接 Shopify。Vendo 会在您的店面上部署 SDK。

从其他提供商迁移

从其他网页推送提供商迁移并保留您的订阅。
如果您的网站是使用 Angular、React 或 Vue 构建的，请使用对应的框架指南。如果您通过 Google Tag Manager 加载 SDK，请先在 Web SDK 设置中完成仪表板和 Service Worker 设置，然后在 GTM 中初始化。 从 iOS 16.4+ 开始，iPhone 和 iPad 支持 iOS 网页推送。完成网站设置路径后，添加 manifest.json 并让用户将您的网站添加到主屏幕。

iOS 网页推送设置

完成网站设置路径后需要满足的额外 Apple 要求。

​
集成类型

在 OneSignal 仪表板中，转到 Settings > Push & In-App > Web，然后选择与您网站匹配的集成类型。
OneSignal dashboard showing integration type options: Typical Site, WordPress, and Custom Code

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

常规网站

推荐。在仪表板中配置提示、欢迎通知和 Service Worker 路径。

WordPress

如果您使用官方 OneSignal WordPress 插件，则必须选择此项。

自定义代码

在代码中完全控制提示和 init 选项。
Shopify 不是仪表板中的单选按钮。Shopify 商店必须使用自定义代码。常规网站无法设置 Vendo 的 Service Worker 路径，会导致订阅失败。请参阅 Shopify 设置。
选择集成类型后，请完成对应的设置指南。常规网站字段详情请参阅 Web SDK 设置。自定义代码字段详情请参阅自定义代码设置。

​
网页权限提示

用户必须先授予权限才能接收网页推送。浏览器会为该授权显示原生系统对话框。OneSignal 建议先使用可自定义的预提示，以便您解释价值，并避免浏览器屏蔽重复的原生提示。 常规网站和 WordPress：可随时在 OneSignal 仪表板中添加、删除和更新提示。自定义代码：在 OneSignal.init() 中控制提示。请参阅 Web SDK 参考。
在预提示中解释好处，在用户参与后（而不是首次加载页面时）显示它，并仅在用户接受后才打开浏览器原生对话框。

网页权限提示

比较下拉式、类别、原生、订阅铃铛及其他提示类型。

Web SDK 参考

使用 Web SDK 在代码中显示或隐藏提示。
iOS 在用户将您的网站添加到主屏幕之前不会显示权限提示。请参阅 iOS 网页推送。

​
用户和订阅

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

OneSignal 仪表板：受众 > 用户

用户

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

订阅

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

用户群体

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

​
设计网页推送通知

网页推送通知支持标题、消息、图标、图像和操作按钮。下图展示了您可以自定义的元素（1–5）以及由浏览器控制的元素（6–9）。
Annotated diagram showing the anatomy of a web push notification with customizable and browser-controlled elements

网页推送通知解剖图。可自定义元素 1–5。浏览器控制 6–9。

可自定义元素：
  1. 标题：吸引注意力的标题（建议：50 个字符以内）
  2. 消息：主要通知内容（建议：120 个字符以内）
  3. 图标：正方形品牌图标（建议：256×256 PNG、JPG 或非动画 GIF）
  4. 大型图像：吸引眼球的视觉内容
  5. 操作按钮：行动召唤按钮
浏览器控制的元素（不可自定义）：
  1. 浏览器：显示推送的浏览器
  2. 域名：您的网站源，由浏览器设置
  3. 时间戳和关闭：浏览器添加的控件
  4. 更多选项：浏览器特定的额外控件

推送概览

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

模板

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

​
个性化和本地化

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

消息个性化

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

多语言消息

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

​
配置网页推送行为

控制消息何时显示、存储多长时间以及点击后会发生什么。

​
传递、显示和关闭设置

限流

控制通知传递速度。

频率限制

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

生存时间 (TTL)

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

网页推送主题

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

点击行为

选择启动 URL，以及点击时如何聚焦或跳转已打开的标签页。

​
测试您的设置

在向全部受众发送之前，请先在各浏览器上确认集成正常。

​
发布前检查清单

  • SDK 已加载且控制台无错误
  • 权限提示出现并正常运行
  • 测试通知已发送和接收
  • 图标和图像正确渲染
  • Service Worker 已注册并为最新版本
  • HTTPS 证书有效

​
分析和故障排除

推送消息报告

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

分析概览

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

通知未显示或延迟

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

通知图像未显示

修复不同浏览器中的图像渲染问题。

​
后续步骤

A/B 测试

通过实验优化消息，找到能驱动参与的内容。

历程

构建由用户行为触发的自动化多步骤消息流程。

标签

为用户添加自定义属性，用于个性化和用户群体划分。

​
常见问题解答

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

可以，从 iOS 16.4+ 开始。请先完成常规网站、自定义代码、WordPress 或 Shopify 设置，然后添加 manifest.json 并让用户将您的网站添加到主屏幕。请参阅 iOS 网页推送设置。

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

最常见的原因是：
  1. 用户清除了浏览器数据。如果您在网页推送设置中启用了自动重新订阅选项，他们返回您的网站时将被自动静默重新订阅。
  2. 用户在操作系统设置中关闭了推送通知。他们需要手动重新订阅您的网站才能再次接收推送通知。
有关这些及其他原因的更多详情，请参阅网页推送通知未显示。

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

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

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

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

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

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

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

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

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

常见原因包括：网站通过 HTTP 提供、Service Worker 未注册、用户已经授予或拒绝了权限，或处于无痕模式。请检查浏览器控制台，并参阅网页权限提示和提示显示问题。