> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 网页推送设置

> 使用 OneSignal 为 Chrome、Firefox、Safari 和 Edge 设置网页推送通知，重新吸引用户。

网页推送通知是在用户未正在浏览您的网站时重新吸引用户并传递重要信息的强大方式。它们支持包括文本、图像、操作按钮和声音在内的丰富内容。

<Frame caption="网页推送通知帮助您即使在用户未在您的网站上时也能联系到他们">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/ac9092f6fd99acc866af2598470d3b4b6e8233d947e45d8aade0b8bfcea71c8f-channel-setup-web-push.jpg?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=e73d6a84ca1e7ea2402ca3dc73d33f02" alt="Web push notification examples across different browsers and devices" width="1280" height="720" data-path="images/docs/ac9092f6fd99acc866af2598470d3b4b6e8233d947e45d8aade0b8bfcea71c8f-channel-setup-web-push.jpg" />
</Frame>

网页推送的运行条件：

* **HTTPS 网站**：网页推送只能在具有有效 SSL 证书的安全网站上运行
* **Service worker**：您必须能够将 [OneSignal Service Worker](./onesignal-service-worker) 添加到您的网站
* **单一域名来源**：必须遵循[同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
* **用户权限**：用户必须明确授权才能接收通知
* **支持的浏览器**：适用于大多数现代浏览器（Chrome、Firefox、Safari、Edge）

<Warning>
  用户无法在无痕模式或隐私浏览模式下订阅。iOS 设备需要额外设置（请参阅 [iOS 网页推送](./web-push-for-ios)）。某些浏览器可能有通知限制或需要用户交互，请参阅[网页推送常见问题解答](./web-push-setup-faq)。
</Warning>

本指南将引导您完成每个步骤——从 SDK 设置到发送个性化推送消息——帮助您成功实现 OneSignal 推送通知。

***

## 网页推送开发者指南

在您可以发送网页推送通知之前，您的开发人员需要完成以下步骤。

<Note>
  不是开发人员？请参阅[管理团队成员](./manage-team-members)以邀请具有开发者访问权限的团队成员加入您的 OneSignal 项目。
</Note>

<Columns cols={2}>
  <Card title="Web SDK 设置" icon="browsers" href="./web-sdk-setup">
    安装和配置 OneSignal Web SDK 的完整指南，包括本地测试和权限提示。
  </Card>

  <Card title="WordPress 插件" icon="plug" href="./wordpress">
    使用我们的官方插件在 WordPress 上快速集成推送通知——无需编码。
  </Card>

  <Card title="iOS 网页推送设置" icon="apple" href="./web-push-for-ios">
    按照 Apple 的具体步骤在运行 iOS 16.4+ 的 iPhone 和 iPad 上启用网页推送。
  </Card>

  <Card title="从其他提供商迁移" icon="arrow-right-arrow-left" href="./migrating-to-onesignal">
    了解如何从其他网页推送提供商迁移并保留您的订阅者。
  </Card>
</Columns>

***

## 配置选项

在 OneSignal 仪表板的 **设置 > 推送和应用内 > Web** 中为您的网站设置网页推送。

<Frame caption="在您的 OneSignal 设置中激活 Web 平台">
  <img src="https://mintcdn.com/onesignal/KPVdijCt4_xCbkO8/images/dashboard/web-push-platform-activation.png?fit=max&auto=format&n=KPVdijCt4_xCbkO8&q=85&s=beba7df5d3a4ad5545311951da0f03d2" alt="OneSignal dashboard showing web push platform activation in settings" width="1188" height="597" data-path="images/dashboard/web-push-platform-activation.png" />
</Frame>

选择与您网站匹配的集成类型：

<Frame caption="根据您的网站设置选择集成类型">
  <img src="https://mintcdn.com/onesignal/BK2J-grzBpDdh8NC/images/dashboard/web-push-integration-type-options.png?fit=max&auto=format&n=BK2J-grzBpDdh8NC&q=85&s=f74c4245d969d80db72268a865bcf899" alt="OneSignal dashboard showing integration type options: Typical Site, WordPress, and Custom Code" width="2668" height="1454" data-path="images/dashboard/web-push-integration-type-options.png" />
</Frame>

<Columns cols={3}>
  <Card title="常规网站" icon="globe" href="./web-sdk-setup">
    **推荐** - 直接在仪表板中配置提示、欢迎通知和服务工作者设置——无需后端编码。
  </Card>

  <Card title="WordPress" icon="plug" href="./wordpress">
    使用官方 OneSignal 插件，通过完全基于 UI 的配置轻松在您的 WordPress 网站上设置推送。
  </Card>

  <Card title="自定义代码" icon="code" href="./web-push-custom-code-setup">
    为希望通过代码自定义一切的开发人员提供完全控制设置。
  </Card>
</Columns>

网站详情：

* **网站名称**：用于默认通知标题
* **网站 URL**：必须与您的域名来源完全匹配（不包含路径或 `www` 不匹配）
* **自动重新订阅**：推荐 - 自动重新订阅清除了浏览器数据的返回用户
* **默认图标 URL**：在通知中显示的 `256x256像素` 图像（如果未设置，将使用默认的铃铛图标）

### 自动重新订阅

如果用户清除了浏览器数据，他们将停止接收推送通知。启用此选项可在用户返回您的网站时自动重新订阅他们。请参阅[订阅](./subscriptions)获取更多详情。

<Frame caption="OneSignal 仪表板中的 Web 设置">
  <img src="https://mintcdn.com/onesignal/uaUYB-ILUGPSRvKB/images/docs/web-push-site-settings.png?fit=max&auto=format&n=uaUYB-ILUGPSRvKB&q=85&s=893a536c16cb4c439bc8fe53892861da" alt="OneSignal dashboard web push configuration settings showing site details and auto resubscribe option" width="2072" height="712" data-path="images/docs/web-push-site-settings.png" />
</Frame>

***

### 网页权限提示

提示用户授予通知权限对于选加入至关重要。您可以根据设置自定义权限请求的行为和外观。

<Tip>
  使用清晰的消息解释好处，在适当的时机提示用户（例如用户参与后），并在触发浏览器原生对话框之前使用预提示。
</Tip>

<Columns cols={2}>
  <Card title="网页权限提示" icon="bell" href="./permission-requests">
    比较不同的提示类型（下拉式、基于类别的、原生、订阅铃铛等）并了解何时使用每种。
  </Card>

  <Card title="Web SDK 参考" icon="code" href="./web-sdk-reference">
    了解如何使用 SDK 编程控制提示的显示时机和方式。
  </Card>
</Columns>

***

### 欢迎通知

您可以启用可选的确认推送，在用户订阅后立即发送。

常规和 WordPress 集成可以在仪表板中设置此功能。

<Frame caption="欢迎通知确认成功订阅并展示价值">
  <img src="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/f33b02284d74f534669e87edfc8cd23e6be06eb8e705f640fd96bd8b7292ff4d-Screenshot_2024-10-25_at_2.06.50_PM.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=a70fc05fa5728334e75b95bbb276a923" alt="OneSignal dashboard showing welcome notification configuration with title, message, and URL fields" width="2072" height="728" data-path="images/docs/f33b02284d74f534669e87edfc8cd23e6be06eb8e705f640fd96bd8b7292ff4d-Screenshot_2024-10-25_at_2.06.50_PM.png" />
</Frame>

自定义代码集成在 `OneSignal.init` 函数中使用 `welcomeNotification` 对象。请参阅[Web SDK 参考](./web-sdk-reference)获取详情。

**为什么要发送欢迎通知？**

* 让用户知道他们已成功订阅
* 展示未来通知的样子
* 提供入门内容或后续步骤

***

## 用户和订阅

当用户订阅推送时，OneSignal 会自动创建与其浏览器/设备绑定的唯一**订阅**。

网页推送订阅在以下情况下创建：

* 使用特定浏览器和设备在您的网站上授予推送通知权限
* **清除浏览器数据后**返回您的网站（如果启用了自动重新订阅）
* 从新的浏览器或设备订阅

<Note>
  每个浏览器/设备组合都会创建单独的订阅。隐身/私密浏览模式无法创建订阅。网页推送订阅在您为其分配[外部 ID](./users#external-id) 之前保持匿名。
</Note>

<Frame caption="OneSignal 仪表板：受众 > 用户">
  <img src="https://mintcdn.com/onesignal/ciRrThfP6xMpI7GY/images/dashboard/users-page.png?fit=max&auto=format&n=ciRrThfP6xMpI7GY&q=85&s=8992ef97cf3c9f336078f9dbf8a6374e" alt="OneSignal dashboard Users page showing a list of Users with Subscription details" width="2316" height="858" data-path="images/dashboard/users-page.png" />
</Frame>

<Columns cols={2}>
  <Card title="用户" icon="users" href="./users">
    了解如何管理用户、分配外部 ID 并跟踪他们的活动。
  </Card>

  <Card title="订阅" icon="address-book" href="./subscriptions">
    了解订阅在不同浏览器和设备上的工作原理。
  </Card>

  <Card title="用户群体" icon="chart-pie" href="./segmentation">
    根据行为、设备等将用户分组为群体进行定向。
  </Card>
</Columns>

### iOS 支持

Apple 为运行 iOS 16.4+ 的 iPhone 和 iPad 添加了网页推送支持，但有更严格的要求：

* 用户必须将您的网站添加到主屏幕
* 权限提示仅在该步骤后显示
* 通知一旦启用，就像原生应用警报一样运作

<Columns cols={2}>
  <Card title="iOS 网页推送" icon="apple" href="./web-push-for-ios">
    启用 iOS 支持的分步指导，包括服务工作者和清单设置。
  </Card>

  <Card title="让您的受众添加到主屏幕" icon="mobile" href="./web-push-for-ios#step-4%3A-guide-users-to-%E2%80%9Cadd-to-home-screen%E2%80%9D">
    鼓励用户安装您的网站以便他们可以接收 iOS 网页推送的技巧。
  </Card>
</Columns>

***

## 设计网页推送通知

制作有效的推送通知不仅仅涉及编写文本。了解哪些元素是可自定义的以及如何有效使用它们。

<Frame caption="网页推送通知解剖图 - 自定义元素 1-6，而 7-9 由浏览器控制">
  <img src="https://mintcdn.com/onesignal/Z6xkXGfmy814If53/images/docs/dd4f79c-Web_Push_Examples.png?fit=max&auto=format&n=Z6xkXGfmy814If53&q=85&s=8d72d6952cd50f8c01a49ada61a15456" alt="Annotated diagram showing the anatomy of a web push notification with customizable and browser-controlled elements" width="1937" height="1359" data-path="images/docs/dd4f79c-Web_Push_Examples.png" />
</Frame>

1. [标题](./push#title)：吸引注意力的标题（建议：低于 `50` 个字符）
2. [消息](./push#message)：主要通知内容（建议：低于 `120` 个字符）
3. [图标](./notification-icons)：您的品牌图标或特定通知图像（建议：`256x256像素` PNG 或 JPG）
4. [大型图像](./push#image)：吸引眼球的视觉内容
5. [操作按钮](./action-buttons)：行动召唤按钮
6. 浏览器：显示推送的浏览器/应用
7. 域名：您的网站来源由浏览器自动设置
8. 时间戳和关闭：浏览器添加这些控制
9. 更多选项：浏览器特定的额外控制

<Columns cols={2}>
  <Card title="推送概览" icon="bell" href="./push">
    推送通知创建、选项和传递行为的完整概览。
  </Card>

  <Card title="模板" icon="clone" href="./templates">
    使用可重复使用的模板进行一致的消息传递，节省时间。
  </Card>
</Columns>

### 消息个性化和本地化

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

<Columns cols={2}>
  <Card title="消息个性化" icon="wand-magic-sparkles" href="./message-personalization">
    插入动态变量（如姓名或偏好）来定制消息。
  </Card>

  <Card title="多语言消息" icon="language" href="./multi-language-messaging">
    以每个用户的首选语言自动传递消息。
  </Card>
</Columns>

***

## 配置网页推送行为

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

### 推送、显示和关闭设置

<Columns cols={2}>
  <Card title="限流" icon="gauge-high" href="./throttling">
    控制通知传递速度。
  </Card>

  <Card title="频率限制" icon="hand" href="./frequency-capping">
    设置限制以防止向同一用户过度发送通知。
  </Card>

  <Card title="生存时间 (TTL)" icon="clock" href="./push#time-to-live-ttl">
    定义设备离线时推送服务保留消息的时间。
  </Card>

  <Card title="网页推送主题" icon="layer-group" href="./push#web-push-topic-web-push">
    使用主题来分组、更换或抑制重复通知。
  </Card>
</Columns>

### 点击行为

控制用户点击通知时发生的情况。

\*\*默认情况：\*\*点击打开您的主页。

**自定义它：**

* 将用户导向特定 URL
* 使用 UTM 跟踪
* 使用 `?_osp=do_not_open` 抑制默认行为

<Columns cols={2}>
  <Card title="URL、链接和深度链接" icon="link" href="./links">
    使用深度链接和跟踪将用户路由到相关内容或页面。
  </Card>

  <Card title="操作按钮" icon="hand-pointer" href="./action-buttons">
    让用户从您的通知中立即采取操作。
  </Card>

  <Card title="SDK 推送通知事件监听器" icon="code" href="./web-sdk-reference#push-notifications">
    监听点击事件并使用自定义代码触发应用内行为。
  </Card>
</Columns>

***

## 测试您的设置

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

### 发布前检查清单

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

### 推送分析和故障排除

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

<Columns cols={2}>
  <Card title="推送消息报告" icon="chart-line" href="./push-notification-message-reports">
    查看每条消息的传递、打开率和点击率指标。
  </Card>

  <Card title="分析概览" icon="chart-bar" href="./analytics-overview">
    探索各渠道的参与度和用户行为指标。
  </Card>

  <Card title="通知未显示或延迟" icon="circle-exclamation" href="./notifications-not-shown-web-push">
    如果消息未出现的故障排除检查清单。
  </Card>

  <Card title="通知图像未显示" icon="image" href="./notification-images-not-showing">
    修复不同浏览器中的图像渲染问题。
  </Card>
</Columns>

***

## 后续步骤

<Columns cols={2}>
  <Card title="A/B 测试" icon="flask" href="./ab-testing">
    通过实验优化消息，找到能驱动参与的内容。
  </Card>

  <Card title="历程" icon="route" href="./journeys-overview">
    构建由用户行为触发的自动化多步骤消息流程。
  </Card>

  <Card title="标签" icon="tags" href="./add-user-data-tags">
    添加用户级别数据用于个性化和定向。
  </Card>

  <Card title="分析" icon="chart-bar" href="./analytics-overview">
    跟踪各渠道的参与度和转化指标。
  </Card>
</Columns>

***

## 常见问题解答

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

可以，从 iOS 16.4+ 开始。用户必须先将您的网站添加到主屏幕，然后授予通知权限。完整设置步骤请参阅 [iOS 网页推送](./web-push-for-ios)。

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

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

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

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

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

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

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

每个子域名（例如，`app.example.com` 与 `shop.example.com`）都是独立的源。浏览器为网页推送强制执行[同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)，因此每个子域名都需要自己的 OneSignal 应用。Service Worker 还必须托管在与订阅页面相同的源上——不允许使用 CDN 和其他子域名。有关设置选项，请参阅[多站点和子域名](./web-push-setup-faq#multiple-sites--subdomains)。

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

每个域名或子域名都需要一个独立的 OneSignal 应用。一个 OneSignal 应用只能服务一个源。要管理多个域名，可以将用户重定向到单个源进行订阅，或者为每个源创建独立的 OneSignal 应用。有关详细策略，请参阅[多站点和子域名](./web-push-setup-faq#multiple-sites--subdomains)。

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

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