init 选项和 service worker 路径,请使用自定义代码。
WordPress 设置
Shopify 设置
自定义代码设置
OneSignal.init() 中设置提示、init 选项和 service worker 路径。要求
- HTTPS 网站:网页推送在 HTTP 或隐身/私人模式下不起作用。
- 服务器访问权限:您需要将 service worker 文件上传到您的站点。
- 单一源:网页推送遵循同源策略。如果您有多个源(域名/子域名),您需要多个 OneSignal 应用(每个源一个)。要符合此浏览器限制,您可以:
- 将流量重定向到单一源进行订阅。
- 创建多个 OneSignal 应用,每个源一个。
配置您的 OneSignal 应用和平台
在 OneSignal 仪表板中:- 转到 设置 > 推送和应用内 > Web。

在 OneSignal 设置中激活网页平台
典型站点(推荐)
WordPress
自定义代码
站点设置
添加站点详情:- 站点名称:您站点的名称和默认通知标题。
- 站点 URL:您站点的 URL。有关更多详情,请参阅站点 URL。
- 自动重新订阅:启用此功能可在用户清除浏览器数据后返回您的站点时自动重新订阅(无需新的权限提示)。
- 默认图标 URL:上传一个正方形
256×256的 PNG、JPG 或非动画 GIF,该图片将出现在通知和提示中。如果未设置,将使用铃铛图标作为默认值。请参阅通知图标。

OneSignal 仪表板中的 Web 设置
站点 URL
输入您站点的确切源,例如https://yourdomain.com。如果您的站点没有配置为这样,请避免使用 www.。
如果您有多个源,请参阅要求。
本地测试
Web SDK 可以在 localhost 环境中测试。如果您在 localhost 上进行测试,请使用与生产应用不同的 OneSignal 应用。Localhost 配置
Localhost 配置
http://localhosthttps://localhost:3000http://127.0.0.1https://127.0.0.1:5000
http://localhost 和 http://127.0.0.1 视为安全源,因此 SDK 仅可在这些主机上通过 HTTP 初始化。其他主机名(例如 http://mysite.local)不被视为安全源,无法用于网页推送测试。
OneSignal 仪表板中的本地测试
init 选项中添加 allowLocalhostAsSecureOrigin: true。如果您在 HTTPS 上使用自签名证书测试 localhost,您可能需要要求 Chrome 忽略无效证书进行测试:--allow-insecure-localhost。Firefox 和 Safari 提供内置机制来添加安全证书的例外。权限提示
典型站点设置允许您或您的团队成员随时通过 OneSignal 仪表板添加、删除和更新权限提示。网页权限提示
欢迎通知(可选)
您还可以设置欢迎通知,在用户订阅推送通知时发送给他们。典型站点和 WordPress 在仪表板中设置此项。自定义代码在OneSignal.init() 中设置 welcomeNotification。
要在仪表板中设置此项,请转到 设置 > 推送和应用内 > Web:

欢迎通知配置
welcomeNotification 参数。
高级设置
以下功能可在 OneSignal 仪表板中配置。Webhooks
Web SDK 可以将特定的网页推送事件POST 到您选择的 URL。
网页推送 Webhook 是与 Event Webhook 独立的实现,不能混用。
网页推送 Webhook
Service workers
除非您告知其他位置,否则 Web SDK 会在您站点的根目录查找OneSignalSDKWorker.js(https://yourdomain.com/OneSignalSDKWorker.js)。
如何告知 SDK 非根目录位置取决于您选择的集成类型。
典型站点: 在仪表板中设置路径。不要在代码中设置 serviceWorkerPath。
如果您将文件托管在根目录,请保留默认的路径设置。如果您将其托管在子目录中,则必须按下方设置路径,否则 SDK 仍会请求 /OneSignalSDKWorker.js,导致注册失败。
- 转到 设置 > 推送和应用内 > Web。
- 打开 高级推送设置。
- 启用 自定义 service worker 路径和文件名。
- 将字段设置为与文件的公开 URL 匹配:

Service worker 配置
https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js 公开访问。
自定义代码: 不要使用仪表板的路径字段。在 OneSignal.init() 中传入 serviceWorkerPath 和 serviceWorkerParam。有关 init 选项,请参阅自定义代码设置;有关合并 worker 和迁移,请参阅 OneSignal service worker。
点击行为
点击行为仅改变当用户已经在同源标签页中打开您的站点时会发生什么。如果没有匹配的标签页打开,浏览器会打开一个新标签页并导航到通知 URL。此设置不会改变这一点。 点击行为适用于 Chrome、Edge、Firefox 和 Safari。 如果未设置启动 URL,通知 URL 就是您的主页。设置启动 URL 可将用户引导到特定页面、添加 UTM 跟踪,或附加?_osp=do_not_open 以关闭通知而不打开页面。
如果同源标签页已经打开,行为取决于您选择的设置:
URL、链接和深度链接
?_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)
.p12 文件及其密码。典型站点和自定义代码均在仪表板中设置此项。您无需在 OneSignal.init() 中设置它。

Safari Web Push .p12 证书(可选,旧版)
上传 service worker 文件
将OneSignalSDKWorker.js service worker 文件添加到您的站点。
从 OneSignal 仪表板下载,或创建一个名为 OneSignalSDKWorker.js 的文件,其中仅包含这一行代码:

上传 service worker 文件步骤
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 公开访问。
文件上传到您的服务器后,检查以下内容以确保其正常工作:
验证位置
- 默认:
https://yourdomain.com/OneSignalSDKWorker.js - 子目录示例:
https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js
它必须在您的源上可公开访问
OneSignalSDKWorker.js 文件必须在您的源上可公开访问和可用。它不能通过 CDN 托管或放置在不同的源上进行重定向。当您访问文件的 URL 时,您应该看到代码。它必须使用 content-type: application/javascript 提供服务
OneSignal service worker
将代码添加到您的网站
要使用 JavaScript SDK 在您的站点上初始化 OneSignal,请将提供的代码复制到您网站的<head> 标签中。OneSignal 仪表板提供了预先填入您的应用 ID 的相同代码片段。
如果您使用 Google Tag Manager 加载脚本,请到此为止并按照 Google Tag Manager 设置操作。该指南使用本页的仪表板和 service worker 工作内容,然后在 GTM 中初始化 SDK,而不是粘贴下面的代码片段。
iOS 网页推送支持
Apple 开始在运行 iOS 16.4+ 的 iPhone 和 iPad 上支持网页推送通知。不像 Android 设备在支持的浏览器中无需额外设置即可使用网页推送,Apple 要求一个manifest.json 文件以及用户操作以将您的站点添加到他们的主屏幕。
iOS 网页推送设置
manifest.json 文件并指导用户将您的站点添加到他们的主屏幕。测试 OneSignal SDK 集成
本指南帮助您验证 OneSignal SDK 集成是否正常工作,通过测试推送通知和订阅注册。检查网页推送订阅
在测试设备上启动您的网站。
- 测试时使用 Chrome、Firefox、Edge 或 Safari。
- 请勿使用无痕或隐私浏览模式。 用户无法在这些模式下订阅推送通知。
- 提示应根据您的权限提示配置出现。
- 在原生提示上点击允许以订阅推送通知。

网页推送原生权限提示
检查您的 OneSignal 控制台
设置测试订阅
测试订阅有助于在发送消息前测试推送通知。添加到测试订阅。

将设备添加到测试订阅
命名您的订阅。
创建测试用户细分。
命名细分。
Test Users(名称很重要,因为后续会用到)。添加测试用户过滤器并点击创建细分。

使用测试用户过滤器创建'测试用户'细分
通过 API 发送测试推送
获取您的应用 API 密钥和应用 ID。
更新提供的代码。
YOUR_APP_API_KEY 和 YOUR_APP_ID 替换为您的实际密钥。这段代码使用了我们之前创建的 Test Users 细分。运行代码。
检查图片和确认投递。

Chrome macOS 上带图片的展开推送通知
检查确认投递。
推送通知消息报告
support@onesignal.com 并提供以下信息:
- API 请求和响应(复制粘贴到
.txt文件中) - 您的订阅 ID
- 包含 OneSignal 代码的网站 URL
用户识别
上一节介绍了如何创建网页推送订阅。本节将扩展到使用 OneSignal SDK 识别跨所有订阅(包括推送、电子邮件和短信)的用户。涵盖外部 ID、标签、多渠道订阅、隐私和事件追踪,帮助您统一并跨平台互动用户。分配外部 ID
使用外部 ID 通过您后端的用户标识符在设备、电子邮件地址和电话号码中一致地识别用户。这确保您的消息在渠道和第三方系统中保持统一(对集成尤其重要)。 使用 SDK 的login 方法在您的应用每次识别用户时设置外部 ID。
添加数据标签
标签是字符串数据的键值对,您可以使用它们存储用户属性(如username、role 或偏好设置)和事件(如 purchase_date、game_level 或用户交互)。标签为高级消息个性化和细分提供支持,允许更高级的使用场景。
当应用中发生事件时,使用 SDK 的addTag 和 addTags 方法设置标签。
在这个例子中,用户达到了 6 级,可通过名为 current_level 的标签识别,值设置为 6。

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

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

显示针对 5-10 级细分的个性化消息推送通知的截图
添加电子邮件和/或短信订阅
OneSignal SDK 在用户选择加入时自动创建网页推送订阅。您也可以通过创建相应的订阅,通过电子邮件和短信渠道联系用户。- 使用
addEmail方法创建电子邮件订阅。 - 使用
addSms方法创建短信订阅。

通过外部 ID 统一的具有推送、电子邮件和短信订阅的用户资料
- 在添加电子邮件或短信订阅之前获得明确同意。
- 向用户解释每个沟通渠道的好处。
- 提供渠道偏好设置,以便用户可以选择他们喜欢的渠道。
隐私和用户同意
要控制 OneSignal 何时收集用户数据,请使用 SDK 的同意门控方法:setConsentRequired(true):在给予同意之前阻止数据收集。setConsentGiven(true):一旦获得同意就允许数据收集。
SDK 收集的数据
处理个人数据
监听推送、用户和应用内事件
使用 SDK 监听器对用户操作和状态变化做出反应。 SDK 为您提供了多个事件监听器可以钩入。查看我们的SDK 参考指南了解更多详情。推送通知事件
用户状态变化
- 用户状态变化事件监听器:检测外部 ID 何时被设置。
- 权限观察器:追踪用户与原生推送权限提示的特定交互。
- 推送订阅变化观察器:追踪推送订阅状态何时变化。
高级设置和功能
探索更多功能以增强您的集成:迁移到 OneSignal
集成
操作按钮
多语言消息
身份验证
自定义结果
Web SDK 设置和参考
网页推送设置
Web SDK 参考
常见问题
网页推送在 HTTP 站点上有效吗?
不行。网页推送需要 HTTPS。浏览器将此作为安全要求强制执行。唯一的例外是localhost 和 127.0.0.1,浏览器出于开发目的将其视为安全源。
为什么我需要 service worker 文件?
Service worker 在后台运行,即使用户没有打开您的站点也能处理传入的推送通知。没有它,浏览器就无法显示通知。OneSignalSDKWorker.js 文件必须在您的源上可公开访问。
Web SDK 在哪里查找 service worker?
除非您设置了自定义路径,否则 Web SDK 会在您站点的根目录查找OneSignalSDKWorker.js(https://yourdomain.com/OneSignalSDKWorker.js)。典型站点在仪表板中设置路径:在 设置 > 推送和应用内 > Web > 高级推送设置 下启用 自定义 service worker 路径和文件名。自定义代码不使用这些仪表板字段。请在 OneSignal.init() 中传入 serviceWorkerPath 和 serviceWorkerParam。请参阅自定义代码设置。
如果我的站点在 WordPress 或 Shopify 上,我应该使用本指南吗?
不应该。请使用 WordPress 设置或 Shopify 设置。这些集成会为您添加 SDK 和 service worker。典型站点和自定义代码有什么区别?
典型站点是本页面推荐的路径:您在 OneSignal 仪表板中配置提示、大多数设置和 service worker 路径,然后添加 JavaScript 代码片段。自定义代码用于程序化控制。您在代码中使用serviceWorkerPath 和 serviceWorkerParam 设置提示、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(如适用)
- 任何相关的日志或错误信息
