Skip to main content
通过配置仪表板、上传 service worker 并初始化 JavaScript SDK,将 OneSignal 网页推送添加到您的站点。OneSignal 支持 Chrome、Firefox、Edge、Safari 以及其他主流浏览器 如果您使用 WordPress 或 Shopify,请遵循相应的平台集成指南,而不是本 JavaScript SDK 指南。如果您需要更深度的自定义,在代码中设置提示、init 选项和 service worker 路径,请使用自定义代码。

WordPress 设置

安装官方 OneSignal 插件。插件会为您添加 SDK 和 service worker。

Shopify 设置

通过 Vendo 集成连接 Shopify。Vendo 无需编辑主题代码即可在您的店面部署 SDK。

自定义代码设置

OneSignal.init() 中设置提示、init 选项和 service worker 路径。
如果您的站点是使用 AngularReactVue 构建的,请使用相应的框架指南,而不是本页面上的代码片段。

要求

  • HTTPS 网站:网页推送在 HTTP 或隐身/私人模式下不起作用。
  • 服务器访问权限:您需要将 service worker 文件上传到您的站点。
  • 单一源:网页推送遵循同源策略。如果您有多个源(域名/子域名),您需要多个 OneSignal 应用(每个源一个)。要符合此浏览器限制,您可以:
    • 将流量重定向到单一源进行订阅。
    • 创建多个 OneSignal 应用,每个源一个。
如果您的团队已经创建了 OneSignal 账户,请申请成为管理员以便您可以设置应用。否则,请在 onesignal.com 注册免费账户开始使用。

配置您的 OneSignal 应用和平台

在 OneSignal 仪表板中:
  • 转到 设置 > 推送和应用内 > Web
OneSignal 仪表板设置页面,显示 Web 平台激活

在 OneSignal 设置中激活网页平台

选择集成类型:

典型站点(推荐)

无需额外编码,直接通过 OneSignal 仪表板管理提示和设置。

WordPress

使用 WordPress 和我们的官方插件时必需。

自定义代码

为需要对提示和 SDK 配置进行全面控制的开发人员提供。

站点设置

添加站点详情:
  • 站点名称:您站点的名称和默认通知标题。
  • 站点 URL:您站点的 URL。有关更多详情,请参阅站点 URL
  • 自动重新订阅:启用此功能可在用户清除浏览器数据后返回您的站点时自动重新订阅(无需新的权限提示)。
  • 默认图标 URL:上传一个正方形 256×256 的 PNG、JPG 或非动画 GIF,该图片将出现在通知和提示中。如果未设置,将使用铃铛图标作为默认值。请参阅通知图标
如果用户清除了浏览器数据,他们将停止接收推送,直到他们返回您的站点。启用 自动重新订阅,他们无需新的权限提示即可再次订阅。请参阅订阅
OneSignal 网页推送配置,显示站点名称、URL 和图标设置

OneSignal 仪表板中的 Web 设置

站点 URL

输入您站点的确切,例如 https://yourdomain.com。如果您的站点没有配置为这样,请避免使用 www. 如果您有多个源,请参阅要求

本地测试

Web SDK 可以在 localhost 环境中测试。如果您在 localhost 上进行测试,请使用与生产应用不同的 OneSignal 应用。
站点 URL 设置为与您的 localhost 环境 URL 完全匹配。该 URL 必须匹配以下常见的 localhost 格式之一:
  • http://localhost
  • https://localhost:3000
  • http://127.0.0.1
  • https://127.0.0.1:5000
如果您的 localhost URL 使用 HTTP,请选择 将 HTTP localhost 视为 HTTPS 进行测试。Chrome 将 http://localhosthttp://127.0.0.1 视为安全源,因此 SDK 仅可在这些主机上通过 HTTP 初始化。其他主机名(例如 http://mysite.local)不被视为安全源,无法用于网页推送测试。
OneSignal localhost 配置,显示将 HTTP localhost 视为 HTTPS 选项

OneSignal 仪表板中的本地测试

在 localhost 上初始化时,请在您的 OneSignal init 选项中添加 allowLocalhostAsSecureOrigin: true如果您在 HTTPS 上使用自签名证书测试 localhost,您可能需要要求 Chrome 忽略无效证书进行测试:--allow-insecure-localhost。Firefox 和 Safari 提供内置机制来添加安全证书的例外。
HTML

权限提示

典型站点设置允许您或您的团队成员随时通过 OneSignal 仪表板添加、删除和更新权限提示。

网页权限提示

配置浏览器权限对话框向您的用户显示的时间和方式。

欢迎通知(可选)

您还可以设置欢迎通知,在用户订阅推送通知时发送给他们。典型站点和 WordPress 在仪表板中设置此项。自定义代码在 OneSignal.init() 中设置 welcomeNotification 要在仪表板中设置此项,请转到 设置 > 推送和应用内 > Web
欢迎通知配置

欢迎通知配置

对于自定义代码设置,请参阅 Web SDK 参考中的 welcomeNotification 参数

高级设置

以下功能可在 OneSignal 仪表板中配置。

Webhooks

Web SDK 可以将特定的网页推送事件 POST 到您选择的 URL。 网页推送 Webhook 是与 Event Webhook 独立的实现,不能混用。

网页推送 Webhook

通过 POST 请求将网页推送事件发送到您的服务器。

Service workers

除非您告知其他位置,否则 Web SDK 会在您站点的根目录查找 OneSignalSDKWorker.jshttps://yourdomain.com/OneSignalSDKWorker.js)。 如何告知 SDK 非根目录位置取决于您选择的集成类型。 典型站点: 在仪表板中设置路径。不要在代码中设置 serviceWorkerPath 如果您将文件托管在根目录,请保留默认的路径设置。如果您将其托管在子目录中,则必须按下方设置路径,否则 SDK 仍会请求 /OneSignalSDKWorker.js,导致注册失败。
  1. 转到 设置 > 推送和应用内 > Web
  2. 打开 高级推送设置
  3. 启用 自定义 service worker 路径和文件名
  4. 将字段设置为与文件的公开 URL 匹配:
Service worker 路径、文件名和范围配置字段

Service worker 配置

使用上面的示例值,该文件必须可在 https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js 公开访问。 自定义代码: 不要使用仪表板的路径字段。在 OneSignal.init() 中传入 serviceWorkerPathserviceWorkerParam。有关 init 选项,请参阅自定义代码设置;有关合并 worker 和迁移,请参阅 OneSignal service worker

点击行为

点击行为仅改变当用户已经在同源标签页中打开您的站点时会发生什么。如果没有匹配的标签页打开,浏览器会打开一个新标签页并导航到通知 URL。此设置不会改变这一点。 点击行为适用于 Chrome、Edge、Firefox 和 Safari。 如果未设置启动 URL,通知 URL 就是您的主页。设置启动 URL 可将用户引导到特定页面、添加 UTM 跟踪,或附加 ?_osp=do_not_open 以关闭通知而不打开页面。 如果同源标签页已经打开,行为取决于您选择的设置:

URL、链接和深度链接

将用户引导到特定页面、添加 UTM 跟踪,或使用 ?_osp=do_not_open 关闭通知。

操作按钮

让用户无需使用默认点击即可从通知中执行操作。

Web SDK 推送事件监听器

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

持久性

持久性使通知保留在屏幕上,直到用户与其交互。它仅适用于桌面端的 Chrome 和 Edge。Firefox、Safari 和所有移动浏览器会忽略此设置。 持久性通知可能会挤占文本、图片和操作按钮的空间,因此如果这对您的用户造成困扰,您可能需要禁用它。 当该值未设置时,SDK 目前将持久性视为开启。
  • 典型站点: 使用 设置 > 推送和应用内 > Web 中的持久性开关。
  • 自定义代码:OneSignal.init() 中设置 persistNotification。仪表板开关不适用。请参阅 persistNotification
持久性的更改仅对更新后访问您站点的订阅者生效。如果您没有看到更改,请等待订阅者重新访问您的站点,或要求他们清除浏览器数据。

Safari Web Push .p12 证书(可选,旧版)

除非您已经拥有自己的 Safari Web Push .p12 证书并希望支持旧版 Safari 用户,否则请保持此选项关闭。 现代 Safari(macOS 13+ 和 iOS 16.4+)使用基于标准的 Web Push 和 VAPID(Voluntary Application Server Identification)。OneSignal 会自动处理 VAPID。您无需为这些浏览器上传证书。 Apple 不为 Safari 网页推送提供 .p8 令牌或密钥。原生 iOS 和 macOS 应用使用 .p8 与 APNs 进行身份验证。Safari 网页推送则不使用。唯一适用于 Safari 的 Apple 凭据是 Safari Web Push .p12 证书,并且仅适用于旧版 Website Push ID 路径。 该旧版路径仍适用于:
  • macOS 12 及更早版本上的 Safari(不支持 VAPID)
  • 已通过旧版 Safari API 授予权限的现有订阅者(Safari 不会将这些订阅迁移到 VAPID)
OneSignal 仍可为该遗留旧版路径提供证书。客户提供的 .p12 不会用于 Safari 16.4+(macOS 13+ 或 iOS 16.4+)上的新订阅者。这些订阅使用 VAPID。 如果您已经拥有自己的证书,请在 设置 > 推送和应用内 > Web > 高级推送设置 中启用 Safari Web Push .p12 证书(可选,高级)。上传 .p12 文件及其密码。典型站点和自定义代码均在仪表板中设置此项。您无需在 OneSignal.init() 中设置它。
高级推送设置中的 Safari Web Push .p12 证书上传开关和字段

Safari Web Push .p12 证书(可选,旧版)


上传 service worker 文件

OneSignalSDKWorker.js service worker 文件添加到您的站点。 从 OneSignal 仪表板下载,或创建一个名为 OneSignalSDKWorker.js 的文件,其中仅包含这一行代码:
OneSignal service worker 文件下载和设置步骤

上传 service worker 文件步骤

除非您另行告知,否则 Web SDK 会在您站点的根目录查找此文件。本页面是典型站点,因此您需要在仪表板中匹配文件位置。如果您选择了自定义代码,请改为在 OneSignal.init() 中设置路径。请参阅自定义代码设置 根目录(默认): 上传该文件,使其可在 https://yourdomain.com/OneSignalSDKWorker.js 访问。保持 service worker 路径设置不变。SDK 会自动请求此 URL。 子目录: 如果您的站点已经有一个 service worker(例如 PWA),请将 OneSignal 的文件放在诸如 /push/onesignal/ 的子目录中,以免与拥有 / 的 worker 冲突。然后告知 SDK 查找位置:按照 Service workers 操作,启用 自定义 service worker 路径和文件名。将 Service worker 文件路径Service worker 注册范围 设置为该子目录(例如 /push/onesignal/)。该文件必须可在 https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js 公开访问。
如果文件不在站点根目录且您没有设置这些仪表板字段,SDK 仍会获取 https://yourdomain.com/OneSignalSDKWorker.js,导致 service worker 注册失败。自定义代码设置必须在 OneSignal.init() 中设置 serviceWorkerPath,而不是这些仪表板字段。
文件上传到您的服务器后,检查以下内容以确保其正常工作:
1

验证位置

访问 SDK 配置使用的 URL。如果您保留了默认设置,该 URL 就是站点根目录。如果您自定义了路径,它必须与 Service worker 文件路径 加上文件名匹配:
  • 默认:https://yourdomain.com/OneSignalSDKWorker.js
  • 子目录示例:https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js
2

它必须在您的源上可公开访问

OneSignalSDKWorker.js 文件必须在您的源上可公开访问和可用。它不能通过 CDN 托管或放置在不同的源上进行重定向。当您访问文件的 URL 时,您应该看到代码。
3

它必须使用 content-type: application/javascript 提供服务

这是一个 JavaScript 文件,必须作为 JavaScript 提供服务。它不能有 text/html 的 content-type。

OneSignal service worker

高级配置以及从其他网页推送提供商迁移。

将代码添加到您的网站

要使用 JavaScript SDK 在您的站点上初始化 OneSignal,请将提供的代码复制到您网站的 <head> 标签中。OneSignal 仪表板提供了预先填入您的应用 ID 的相同代码片段。 如果您使用 Google Tag Manager 加载脚本,请到此为止并按照 Google Tag Manager 设置操作。该指南使用本页的仪表板和 service worker 工作内容,然后在 GTM 中初始化 SDK,而不是粘贴下面的代码片段。
HTML

iOS 网页推送支持

Apple 开始在运行 iOS 16.4+ 的 iPhone 和 iPad 上支持网页推送通知。不像 Android 设备在支持的浏览器中无需额外设置即可使用网页推送,Apple 要求一个 manifest.json 文件以及用户操作以将您的站点添加到他们的主屏幕。

iOS 网页推送设置

添加必需的 manifest.json 文件并指导用户将您的站点添加到他们的主屏幕。

测试 OneSignal SDK 集成

本指南帮助您验证 OneSignal SDK 集成是否正常工作,通过测试推送通知和订阅注册。

检查网页推送订阅

1

在测试设备上启动您的网站。

  • 测试时使用 Chrome、Firefox、Edge 或 Safari。
  • 请勿使用无痕或隐私浏览模式。 用户无法在这些模式下订阅推送通知。
  • 提示应根据您的权限提示配置出现。
  • 在原生提示上点击允许以订阅推送通知。
浏览器原生权限提示,询问用户允许或屏蔽通知

网页推送原生权限提示

2

检查您的 OneSignal 控制台

  • 前往受众 > 订阅
  • 您应该看到状态为已订阅的新条目。
OneSignal 控制台订阅页面,显示一个状态为已订阅的网页推送订阅

控制台显示订阅状态为'已订阅'

您已成功创建了网页推送订阅。 当用户首次订阅您网站的推送通知时,将创建网页推送订阅。

设置测试订阅

测试订阅有助于在发送消息前测试推送通知。
1

添加到测试订阅。

在控制台中,在订阅旁边,点击选项(三个点)按钮并选择添加到测试订阅
订阅上的选项菜单,显示添加到测试订阅选项

将设备添加到测试订阅

2

命名您的订阅。

命名订阅,以便您后续在测试订阅选项卡中轻松识别您的设备。
3

创建测试用户细分。

前往受众 > 细分 > 新建细分
4

命名细分。

将细分命名为 Test Users(名称很重要,因为后续会用到)。
5

添加测试用户过滤器并点击创建细分。

细分编辑器,已选择测试用户过滤器,细分命名为 Test Users

使用测试用户过滤器创建'测试用户'细分

您已成功创建了测试用户细分。 现在我们可以测试向这个单独设备和测试用户组发送消息。

通过 API 发送测试推送

1

获取您的应用 API 密钥和应用 ID。

在您的 OneSignal 控制台中,前往设置 > 密钥和 ID
2

更新提供的代码。

在下面的代码中将 YOUR_APP_API_KEYYOUR_APP_ID 替换为您的实际密钥。这段代码使用了我们之前创建的 Test Users 细分。
3

运行代码。

在您的终端中运行代码。
4

检查图片和确认投递。

如果所有设置步骤都成功完成,测试订阅应该会收到通知。
仅 Chrome 支持图片。图片在收缩的通知视图中显示很小。展开通知以查看完整图片。
Chrome macOS 上展开的推送通知,显示自定义图片

Chrome macOS 上带图片的展开推送通知

5

检查确认投递。

在您的控制台中,前往投递 > 已发送消息,然后点击消息查看统计数据。您应该看到已确认统计数据,表示设备收到了推送。
Safari 不支持确认投递。

推送通知消息报告

查看推送通知的投递、点击和转化统计数据。
您已成功通过 API 向细分发送了通知。
如果通知未到达,请联系 support@onesignal.com 并提供以下信息:
  • API 请求和响应(复制粘贴到 .txt 文件中)
  • 您的订阅 ID
  • 包含 OneSignal 代码的网站 URL

用户识别

上一节介绍了如何创建网页推送订阅。本节将扩展到使用 OneSignal SDK 识别跨所有订阅(包括推送、电子邮件和短信)的用户。涵盖外部 ID、标签、多渠道订阅、隐私和事件追踪,帮助您统一并跨平台互动用户。

分配外部 ID

使用外部 ID 通过您后端的用户标识符在设备、电子邮件地址和电话号码中一致地识别用户。这确保您的消息在渠道和第三方系统中保持统一(对集成尤其重要)。 使用 SDK 的login 方法在您的应用每次识别用户时设置外部 ID。
OneSignal 为订阅(订阅 ID)和用户(OneSignal ID)生成唯一的只读 ID。当用户在不同设备上下载您的应用、订阅您的网站和/或在应用外提供电子邮件地址和电话号码时,将创建新的订阅。强烈建议通过 SDK 设置外部 ID,以在用户的所有订阅中识别用户,无论订阅是如何创建的。

添加数据标签

标签是字符串数据的键值对,您可以使用它们存储用户属性(如 usernamerole 或偏好设置)和事件(如 purchase_dategame_level 或用户交互)。标签为高级消息个性化细分提供支持,允许更高级的使用场景。 当应用中发生事件时,使用 SDK 的addTagaddTags 方法设置标签。 在这个例子中,用户达到了 6 级,可通过名为 current_level 的标签识别,值设置为 6

OneSignal 中一个用户资料,包含名为'current_level'的标签,设置为'6'

我们可以创建一个等级在 5 到 10 之间的用户细分,然后使用它来发送针对性和个性化的消息:

细分编辑器显示针对 current_level 值大于 4 且小于 10 的用户的细分


显示针对 5-10 级细分的个性化消息推送通知的截图

添加电子邮件和/或短信订阅

OneSignal SDK 在用户选择加入时自动创建网页推送订阅。您也可以通过创建相应的订阅,通过电子邮件和短信渠道联系用户。 如果电子邮件地址和/或电话号码在 OneSignal 应用中已存在,SDK 将将其添加到现有用户,不会创建重复。 您可以通过控制台中的受众 > 用户View user API查看统一用户。

通过外部 ID 统一的具有推送、电子邮件和短信订阅的用户资料

多渠道沟通的最佳实践
  • 在添加电子邮件或短信订阅之前获得明确同意。
  • 向用户解释每个沟通渠道的好处。
  • 提供渠道偏好设置,以便用户可以选择他们喜欢的渠道。

隐私和用户同意

要控制 OneSignal 何时收集用户数据,请使用 SDK 的同意门控方法: 有关隐私和安全的更多信息:

SDK 收集的数据

了解 OneSignal SDK 从用户收集的数据。

处理个人数据

依据隐私法规管理和保护用户数据。

监听推送、用户和应用内事件

使用 SDK 监听器对用户操作和状态变化做出反应。 SDK 为您提供了多个事件监听器可以钩入。查看我们的SDK 参考指南了解更多详情。

推送通知事件

用户状态变化


高级设置和功能

探索更多功能以增强您的集成:

迁移到 OneSignal

从其他推送服务迁移到 OneSignal。

集成

将 OneSignal 与第三方工具和平台连接。

操作按钮

为推送通知添加互动按钮。

多语言消息

以用户首选语言发送本地化消息。

身份验证

使用服务器端身份验证保护您的 SDK 集成。

自定义结果

追踪与消息关联的自定义转化事件。

Web SDK 设置和参考

网页推送设置

为您的集成启用所有关键网页推送功能。

Web SDK 参考

可用方法和配置选项的完整详情。
恭喜!您已成功完成 Web SDK 设置指南。


常见问题

网页推送在 HTTP 站点上有效吗?

不行。网页推送需要 HTTPS。浏览器将此作为安全要求强制执行。唯一的例外是 localhost127.0.0.1,浏览器出于开发目的将其视为安全源。

为什么我需要 service worker 文件?

Service worker 在后台运行,即使用户没有打开您的站点也能处理传入的推送通知。没有它,浏览器就无法显示通知。OneSignalSDKWorker.js 文件必须在您的源上可公开访问。

Web SDK 在哪里查找 service worker?

除非您设置了自定义路径,否则 Web SDK 会在您站点的根目录查找 OneSignalSDKWorker.jshttps://yourdomain.com/OneSignalSDKWorker.js)。典型站点在仪表板中设置路径:在 设置 > 推送和应用内 > Web > 高级推送设置 下启用 自定义 service worker 路径和文件名。自定义代码不使用这些仪表板字段。请在 OneSignal.init() 中传入 serviceWorkerPathserviceWorkerParam。请参阅自定义代码设置

如果我的站点在 WordPress 或 Shopify 上,我应该使用本指南吗?

不应该。请使用 WordPress 设置Shopify 设置。这些集成会为您添加 SDK 和 service worker。

典型站点和自定义代码有什么区别?

典型站点是本页面推荐的路径:您在 OneSignal 仪表板中配置提示、大多数设置和 service worker 路径,然后添加 JavaScript 代码片段。自定义代码用于程序化控制。您在代码中使用 serviceWorkerPathserviceWorkerParam 设置提示、init 选项和 service worker 路径。请参阅自定义代码设置

我需要上传 Safari 证书吗?

不需要,对于 macOS 13+ 或 iOS 16.4+ 上的 Safari 不需要。OneSignal 会自动使用 VAPID。仅在旧版 Website Push ID 路径(macOS 12 及更早版本,以及现有的旧版订阅者)时才上传 Safari Web Push .p12。请参阅 Safari Web Push .p12 证书

我可以为 Safari 网页推送使用 .p8 密钥吗?

不可以。Apple 不为 Safari 网页推送提供 .p8 令牌或密钥。.p8 仅用于原生 iOS 或 macOS 应用。请参阅 iOS p8 基于令牌的 APNs 连接。唯一的 Safari 凭据是 Safari Web Push .p12,并且仅适用于旧版路径。

我可以在 iOS(iPhone/iPad)上使用网页推送吗?

可以,从 iOS 16.4+ 开始支持。但是,Apple 需要一个 manifest.json 文件,并且用户必须先将您的站点添加到他们的主屏幕。有关完整要求,请参阅 iOS 网页推送设置。iOS 网页推送使用 VAPID。您无需为其上传 Safari .p12 或 .p8。

为什么我的通知没有显示?

常见原因包括 service worker 文件放置位置不正确、仪表板中站点 URL 不匹配,或用户在其浏览器设置中屏蔽了通知。有关完整的故障排除清单,请参阅网页推送:通知未显示
需要帮助?与我们的支持团队聊天或发送邮件至 support@onesignal.com请包含以下信息:
  • 您遇到的问题详情以及复现步骤(如有)
  • 您的 OneSignal 应用 ID
  • 外部 ID 或订阅 ID(如适用)
  • 您在 OneSignal 控制台中测试的消息 URL(如适用)
  • 任何相关的日志或错误信息
我们很乐意为您提供帮助!