跳转到主要内容
仅在需要高级配置或程序化控制时使用此自定义代码设置。对于大多数用户，我们推荐：

​
前提条件

  • 一个 OneSignal 帐户
  • 支持 HTTPS 的网站（Web 推送通知所必需）
  • 修改网站 HTML 并向服务器上传文件的权限
  • JavaScript 基础知识（有帮助但非必需）

​
创建您的 OneSignal 应用

如果这不是您在 OneSignal 中创建的第一个应用，请点击 New App/Website。否则，您将直接进入设置。

显示初始应用创建屏幕的 OneSignal 仪表板

为您的应用起一个描述性的名称（建议与您的网站名称匹配），然后从平台列表中选择 Web。点击 Next: Configure Your Platform。 注意： 您可以稍后在应用设置中添加其他平台（iOS、Android 等）。

显示 Web 选项突出显示的平台选择屏幕

​
1. 选择集成方式

选择 Custom Code。这将使用我们的 JavaScript SDK 实现对提示、时间和其他设置的完全程序化控制。 何时选择自定义代码：
  • 需要自定义通知提示
  • 希望控制何时提示用户
  • 需要高级分段或定向功能
  • 构建单页应用程序 (SPA)

选中自定义代码的 Web 配置选项

​
2. 站点设置

配置您的基本站点信息。这些设置会影响通知向用户显示的方式。

突出显示必填字段的站点设置表单

字段描述要求
站点名称在推送通知中显示的名称保持简洁和可识别
站点 URL您的完整网站 URL必须包含 https:// 并且完全匹配（如果使用则包含 www）
自动重新订阅自动为返回的用户重新订阅推荐： 有助于维持订阅者数量
默认图标 URL用于提示和通知的图标正方形 256x256 像素，.png/.jpg/.gif 格式，需要 HTTPS URL
常见陷阱：
  • 站点 URL 必须完全匹配（带或不带 www）
  • 图标必须通过 HTTPS 提供
  • 对于本地测试，请参阅 本地测试设置

​
3. 高级推送设置

​
Safari Web 推送证书（可选）

OneSignal 免费自动提供 Safari 证书。仅当您有需要使用的现有 Safari Web 推送证书时才启用此功能。

适用于现有证书的 Safari 证书上传选项

如果启用，请上传您的 Safari Web .p12 Push Certificate 并输入密码。 点击 Save 继续。

​
4. 上传服务工作器文件

推送通知运行需要 OneSignal 服务工作器。您有两个选择：
1

选项1：手动创建文件（推荐）

  1. 创建 一个名为 OneSignalSDKWorker.js 的新文件
  2. 添加 这行代码： 
    importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
  3. 上传 文件到您网站的根目录
2

选项2：下载和上传

  1. 下载 OneSignal SDK 文件
  2. 解压 下载的文件
  3. 上传 OneSignalSDKWorker.js 到您的服务器

​
文件托管要求

默认位置： 服务工作器必须可在 https://yoursite.com/OneSignalSDKWorker.js 访问 自定义位置： 如果您需要将文件放在子文件夹中，请参阅我们的 OneSignal 服务工作器指南 获取详细说明。
需要自定义位置？ 对于子文件夹放置或从其他推送提供商迁移，请遵循我们的 OneSignal 服务工作器指南。

服务工作器文件下载界面

旧版设置警告： 如果您的网站是在 2021 年 11 月 22 日之前设置的，并且您目前使用两个服务工作器文件（OneSignalSDKWorker.js 和 OneSignalSDKUpdaterWorker.js），请继续托管这两个文件以防止服务工作器问题。新设置只需要单个 OneSignalSDKWorker.js 文件。

​
5. 将代码添加到您的网站

​
基本实现

将此代码添加到您网站的 <head> 部分。用 OneSignal 仪表板中的实际应用 ID 替换 YOUR_ONESIGNAL_APP_ID。 
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(function(OneSignal) {
    OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID", // 仅在使用自定义 Safari 证书时需要
      notifyButton: {
        enable: true, // 显示 OneSignal 铃铛图标
      },
    });
  });
</script>

​
针对特定框架的设置

如果您使用 JavaScript 框架，请遵循这些专门的指南：

​
代码安装后的后续步骤

  1. 初始化 SDK： 上面的代码处理基本初始化
  2. 配置提示： 设置何时以及如何提示用户 - 请参阅 权限请求
  3. 添加自定义逻辑： 使用 Web SDK 参考 获取高级功能
常见集成点：
  • 基于用户行为的自定义提示时机
  • 分段和用户标签
  • 事件跟踪和分析
  • A/B 测试不同的通知策略

​
测试您的设置

​
验证安装

  1. 访问您的网站 - 您应该看到 OneSignal 铃铛图标（如果已启用）
  2. 点击铃铛 触发浏览器的原生权限提示
  3. 订阅 通知
  4. 检查浏览器控制台 是否有 JavaScript 错误

​
发送测试通知

  1. 找到您的测试订阅： 遵循 查找和设置测试订阅
  2. 发送测试推送： 使用我们的指南 给自己发送推送通知
  3. 验证投递 跨不同浏览器和设备

​
常见问题排除

服务工作器问题：
  • 确保 OneSignalSDKWorker.js 可在正确的 URL 访问
  • 检查文件是否包含正确的导入语句
  • 验证 HTTPS 是否正常工作
铃铛图标未显示：
  • 确认 JavaScript 代码在 <head> 部分
  • 检查浏览器控制台是否有错误
  • 验证您的应用 ID 是否正确
未收到通知：
  • 在隐身/私密浏览器窗口中测试
  • 确保在浏览器设置中启用了通知
  • 检查您的网站是否通过 HTTPS 提供
需要帮助？ 如果您遇到问题，请查看我们的 Web 推送问题排除指南 或联系 support@onesignal.com 获取帮助。

​
接下来做什么

成功设置后，考虑这些高级功能：
⌘I