> ## 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 的网页推送权限提示来增加推送通知选择加入。涵盖软提示、原生浏览器提示、滑动提示、类别设置、邮箱和电话号码收集以及订阅铃铛自定义。
***
VIDEO
***
## 概述
"提示"是指要求用户允许向其发送推送通知的过程。提示是由浏览器或移动应用程序显示的弹窗消息，用户需要点击"允许"才能订阅并接收推送通知。
网页推送适用于桌面、Android 和 iOS，但请注意 [iOS 的网页推送需要一些额外的配置步骤](./web-push-for-ios)。如果您有移动应用，请查看[如何使用应用内消息提示推送权限](./prompt-for-push-permissions)。
浏览器提供自己的原生系统级权限提示，用户必须看到该提示并点击"允许"才能订阅您网站的推送通知。浏览器现在[强烈建议网站在显示原生权限提示时更加有选择性](https://onesignal.com/blog/changes-to-chrome-and-firefox-permission-prompting)。这就是为什么鼓励在原生提示之前使用 OneSignal 提示或您自己的自定义"软提示"。
### OneSignal 提示（软提示）
OneSignal 软提示是用户友好的可自定义提示，在浏览器的原生权限对话框之前显示。这些提示本身不会为用户订阅消息，但它们有助于：
1. 解释订阅消息（推送、邮件或短信）的价值。
2. 防止浏览器自动阻止权限请求。
3. 只有在用户表示兴趣后才启动原生浏览器提示。
软提示是[浏览器推荐的](https://onesignal.com/blog/changes-to-chrome-and-firefox-permission-prompting)，有助于最大化参与率，同时保护您的域名声誉。
***
## 提示图标
要自定义网页推送通知中显示的图标，请前往您的 OneSignal 仪表板：**设置 > 推送和应用内 > 网页设置**。
在 **网站设置** 部分，配置 **默认图标 URL**。除非另有指定，否则此图标会出现在您的所有通知中。
* 接受的格式：`.png` 或 `.jpg`
* 建议尺寸：`256x256` 像素（以满足 Safari 的要求）
* 如果未设置，OneSignal 将使用通用铃铛图标
此设置可以随时更改。
对于自定义代码设置，在您的 OneSignal `init` 代码的 `promptOptions` 对象中使用 `slidedown` 属性。详情请参阅 [Web SDK 参考](./web-sdk-reference)。
有关触发提示的详细信息，请参阅[自动提示和显示设置](#auto-prompt-%26-display-settings)。
#### 滑动提示文本
您可以自定义滑动提示中显示的文本：
* 操作消息：最多 90 个字符
* 按钮标签：每个最多 15 个字符
* 目前不支持字体、尺寸或颜色的自定义
在仪表板中启用文本自定义选项。如果没有输入文本，将使用默认文本。
对于自定义代码设置，在您的 OneSignal `init` 代码的 `promptOptions` 对象中使用 `text` 属性。详情请参阅 [Web SDK 参考](./web-sdk-reference)。
#### 类别
您可以通过添加类别来增强滑动提示——让用户指示对特定消息主题（例如，新闻、销售、更新）兴趣的复选框。
* 最多允许 10 个类别
* 每个类别存储为数据标签，值为 1（已选中）或 0（未选中）
* 用于根据用户偏好进行用户群分组和目标消息推送
您可以在后期再次显示类别提示，让用户更新其偏好。除非被覆盖，否则之前选择的值将被保留。
* **标签**：用户在提示中看到的内容。建议首字母大写。
* **标签键**：OneSignal 中的标签名称。建议使用小写字母和下划线（`_`）替代空格。
* **更新说明、正向和负向按钮**：如果您选择在用户已经订阅推送后再次显示类别提示，则将显示更新说明而不是操作消息。这允许您通知用户他们可以更新其类别。
对于自定义代码设置，在您的 OneSignal `init` 代码的 `promptOptions` 对象中使用 `categories` 属性。详情请参阅 [Web SDK 参考](./web-sdk-reference)。
有关触发提示的详细信息，请参阅[自动提示和显示设置](#auto-prompt-%26-display-settings)。
***
### 邮箱和电话号码提示
邮箱和电话提示直接在滑动提示中收集可选的用户联系信息。每个字段都具有内置验证以确保正确的格式。
提交后：
* 为用户创建新的邮件和/或短信订阅
* 您可以开始通过这些渠道向他们发送消息
要添加此提示：
* 导航到 **设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 邮箱/电话提示**。
对于自定义代码设置，在您的 OneSignal `init` 代码的 `promptOptions` 对象中将 `type` 添加为 `email`、`sms` 或 `smsAndEmail`。详情请参阅 [Web SDK 参考](./web-sdk-reference)。
有关触发提示的详细信息，请参阅[自动提示和显示设置](#auto-prompt-%26-display-settings)。
***
### 订阅铃铛提示
订阅铃铛提示是一个出现在网站底部角落的小型持续小部件。当未订阅的用户点击时，它会触发[原生浏览器提示](./permission-requests)。
由于其占用空间最少，铃铛可以始终保持可见，使其成为持续选择加入机会的被动但有效选项。它不需要关闭，并为用户提供了何时订阅的控制权。
导航到：**设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 订阅铃铛提示**
您可以自定义铃铛的：
* 颜色
* 尺寸
* 底部位置（左侧或右侧）
* 文本和标签
设置后，点击 **完成**，然后点击 **保存** 以应用更改。
在您的 Web SDK 初始化选项中使用 `notifyButton` 参数。您可以在不同的铃铛提示自定义示例之间切换。
**隐藏：** 要在用户订阅后隐藏订阅铃铛或仅在特定页面上显示，请确保在初始化期间在 `displayPredicate` 函数中返回值 `false` *或* 解析为值 `false` 的 `Promise`。此函数在显示订阅铃铛之前进行评估。您可以返回任何其他值来显示订阅铃铛。
```javascript 文本和基本选项 theme={null}
// 您的其他初始化选项在这里
notifyButton: {
enable: true, /* 使用订阅铃铛所必需的 */
size: 'medium', /* 'small'、'medium' 或 'large' 中的一个 */
theme: 'default', /* 'default'（红-白）或 'inverse'（白-红）中的一个 */
position: 'bottom-right', /* 'bottom-left' 或 'bottom-right' */
offset: {
bottom: '0px',
left: '0px', /* 仅在 bottom-left 时应用 */
right: '0px' /* 仅在 bottom-right 时应用 */
},
showCredit: false, /* 隐藏 OneSignal 徽标 */
text: {
'tip.state.unsubscribed': '订阅通知',
'tip.state.subscribed': "您已订阅通知",
'tip.state.blocked': "您已阻止通知",
'message.prenotify': '点击订阅通知',
'message.action.subscribed': "感谢订阅！",
'message.action.resubscribed': "您已订阅通知",
'message.action.unsubscribed': "您将不会再次收到通知",
'dialog.main.title': '管理网站通知',
'dialog.main.button.subscribe': '订阅',
'dialog.main.button.unsubscribe': '取消订阅',
'dialog.blocked.title': '解除阻止通知',
'dialog.blocked.message': "按照以下说明允许通知："
}
}
```
```javascript 颜色 theme={null}
// 您的其他初始化选项在这里
notifyButton: {
enable: true, // 使用订阅铃铛所必需的
// 您的其他订阅铃铛设置在这里
colors: { // 自定义主按钮和对话框弹出按钮的颜色
'circle.background': 'rgb(84,110,123)',
'circle.foreground': 'white',
'badge.background': 'rgb(84,110,123)',
'badge.foreground': 'white',
'badge.bordercolor': 'white',
'pulse.color': 'white',
'dialog.button.background.hovering': 'rgb(77, 101, 113)',
'dialog.button.background.active': 'rgb(70, 92, 103)',
'dialog.button.background': 'rgb(84,110,123)',
'dialog.button.foreground': 'white'
},
}
```
```javascript 隐藏 theme={null}
// 您的其他初始化选项在这里
notifyButton: {
/* 您的其他订阅铃铛设置在这里... */
enable: true,
displayPredicate: function() {
/* 用户已订阅，所以我们想返回 "false" 来隐藏订阅铃铛 */
return !OneSignal.Notifications.permission
},
}
```
```javascript HTTPS Full Example Code theme={null}
```
***
### 自定义链接提示
自定义链接提示是一个用户触发的按钮或链接，您可以将其嵌入到网站的任何地方。点击时，它会显示推送通知的[原生浏览器提示](./permission-requests)。
导航到：**设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 自定义链接**。
在您想要小部件显示的页面上添加提供的 HTML。
配置您的选项，然后点击 **完成** 和 **保存** 来激活。
在您的 OneSignal `init` 代码的 `promptOptions` 对象中，添加 `customlink` 对象及其可用属性。
```javascript theme={null}
// 您的其他初始化选项在这里
promptOptions: {
customlink: {
enabled: true, /* 使用自定义链接所必需的 */
style: "button", /* 值为 'button' 或 'link' */
size: "medium", /* 'small'、'medium' 或 'large' 中的一个 */
color: {
button: '#E12D30', /* 如果 style = "button"，按钮背景的颜色 */
text: '#FFFFFF', /* 提示文本的颜色 */
},
text: {
subscribe: "订阅推送通知", /* 未订阅时提示的文本 */
unsubscribe: "取消订阅推送通知", /* 已订阅时提示的文本 */
explanation: "获取对您重要的各种内容的更新", /* 提示按钮前显示的可选文本 */
},
unsubscribeEnabled: true, /* 控制提示在订阅后是否可见 */
}
}
```
要在您的网站上显示提示，请在您希望小部件出现的位置插入以下 HTML：
```html html theme={null}
```
要随时更改小部件的外观，所有元素都有一个特殊的类 `onesignal-reset`，它会从元素中删除任何先前的样式，以确保与我们的内部样式没有冲突，并且看起来完全符合您在仪表板中的定义。
如果您发现需要重新定义任何 OneSignal 样式，以下是自定义链接小部件中使用的类的简短参考
| 类名 | 应用于 |
| -------------------------------- | ------------------------------------------- |
| onesignal-customlink-container | 主容器 |
| onesignal-customlink-subscribe | 操作按钮 |
| onesignal-customlink-explanation | 带有自定义说明文本的段落 |
| state-subscribed | 主容器内的所有组件 |
| state-unsubscribed | 主容器内的所有组件 |
| button | 如果处于按钮模式，则为操作按钮 |
| link | 如果处于链接模式，则为操作按钮 |
| small | 主容器内的所有组件 |
| medium | 主容器内的所有组件 |
| large | 主容器内的所有组件 |
| hide | 如果 unsubscribeEnabled 设置为 false，则为主容器内的所有组件 |
要覆盖其中任何一个，您必须创建具有更高特异性的 CSS 规则，将类名与父元素 id 结合应该就足够了。但请注意冲突，我们的内部样式可能会发生变化。
***
## 原生权限提示
原生权限提示是由浏览器控制的对话框，用户必须接受它才能订阅您网站的推送通知。此提示：
* 订阅所需
* 在 OneSignal 软提示（如滑动提示或自定义链接）后自动触发
* 外观、文本或行为不可自定义
使用典型网站和 WordPress 设置来配置原生权限提示将在 Chrome 移动设备上自动显示滑动提示。
我们故意在 Android 上添加了双重提示，因为 Android 版 Chrome 的原生权限提示是一个非常不友好的弹窗，会占据您网站的整个屏幕，这会防止您的用户在您的网站上有不好的体验。
如果您不想显示滑动提示，您必须在提示编辑器中关闭自动提示开关（别忘了按**保存**按钮），然后使用 [Web SDK `requestPermission()` 方法](./web-sdk-reference#requestpermission)。
#### Firefox
[Firefox 72+](https://blog.mozilla.org/futurereleases/2019/11/04/restricting-notification-permission-prompts-in-firefox/) 开始要求用户手势来触发原生权限提示。如果您尝试自动显示原生权限提示，您将在浏览器中看到一个图标，要求用户点击该图标以显示原生权限提示。
使用典型网站和 WordPress 设置来配置原生权限提示将在 Firefox 上自动显示滑动提示。
我们故意在 Firefox 上添加了双重提示，因为在任何一种情况下都需要 2 步选择加入，而滑动提示是一种更引人注目的方式来提高参与度。
如果您不想显示滑动提示，您必须在提示编辑器中关闭自动提示开关（别忘了按**保存**按钮），然后使用 [Web SDK `requestPermission()` 方法](./web-sdk-reference#requestpermission)。
#### Safari
[Safari 12.1+](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes) 开始要求用户手势来触发原生权限提示。
使用典型网站和 WordPress 设置来配置原生权限提示在 Safari 上将无法工作，因为存在此用户手势要求。
我们故意在 Safari 上添加了滑动提示，因为它需要 2 步选择加入。
#### Edge
[Edge](https://blogs.windows.com/msedgedev/2023/07/06/fighting-notification-spam-microsoft-edge/) uses a trust-based model:
* 如果网站不可信，提示将被抑制并由浏览器栏中的铃铛图标替代：
* 导航到：**设置 > 推送和应用内 > 网页设置 > 权限提示设置**
* 选择提示或创建新的提示
* 启用自动提示
* 设置您的延迟首选项（页面浏览次数和时间延迟）
如果您想要编程式触发提示，请保持自动提示禁用状态并使用 [Web SDK 提示方法](./web-sdk-reference)。
在您的 OneSignal `init` 代码的 `promptOptions` 对象中使用 `autoPrompt` 和 `delay` 选项。还有一些方法可以直接触发所需的滑动或原生提示。有关更多详细信息，请参阅 [Web SDK 参考](./web-sdk-reference)。
如果您想要对提示显示时机有更多控制——例如，仅在特定页面上或在特定操作后显示：
1. 禁用自动提示
2. 使用 SDK 的滑动或原生提示方法通过代码显示提示
### 滑动提示退让逻辑
一旦显示滑动提示（推送、类别或邮箱/电话）并被解除（通过允许、取消或关闭对话框），它将退让并按定义的时间表重新出现：
| 交互结果 | 下次提示时机 |
| :-----------: | :-----: |
| 第一次解除 | 等待 3 天 |
| 第二次解除 | 等待 7 天 |
| 第三次及后续解除（未订阅） | 等待 30 天 |
例如，如果用户在滑动提示上点击"允许"但随后在浏览器的原生提示上点击"X"（未订阅），滑动提示将遵循上述退让周期。
此逻辑适用于推送、类别和邮箱/电话滑动提示。您可以使用我们的 [Web SDK 滑动提示方法](./web-sdk-reference#slidedown-prompts) 绕过退让逻辑。
有关原生提示退让逻辑，请参阅[浏览器原生提示行为](#browser-native-prompt-behavior)。您无法绕过原生提示的退让逻辑，因为这由浏览器控制。
如果用户清除 Cookie 或浏览器数据，退让周期将重置，提示可能会像第一次一样再次出现。
***
## 请求网页推送权限的最佳实践
获得用户授予网页推送权限需要时机、信任和用户友好的设计。遵循这些最佳实践来最大化选择加入率，同时保持积极的网站体验。
### 在何时询问方面要有策略
时机比频率更重要。在用户已经参与或显示意图时显示权限提示。例如：
* 在他们将商品添加到购物车或参与帖子或评论后
* 当他们更新个人资料或登录账户时
* 在完成显示对您品牌承诺的操作时
在这些时刻提示用户会提高接受率，因为他们对您的内容和价值更加投入。
如果您的网站有个人资料或首选项中心，请在那里包含推送（和其他渠道）选择加入控制。这增强了透明度，并让用户更好地控制他们如何接收更新。请参阅我们的[首选项中心](./preference-center)指南以获取更多详细信息。
### 使用订阅铃铛提示
[铃铛提示](#subscription-bell-prompt)是用户随时订阅的持久性、非侵入性方式。这个浮动铃铛图标非常适合长期参与，因为它：
* 保持订阅选项可见而不中断浏览。
* 允许用户选择何时订阅。
* 通过不强制立即请求权限来建立信任。
铃铛提示对于回访访客和最初关闭权限请求的用户特别有效。
### 让用户使用类别个性化他们的订阅
[类别提示](#categories)让用户选择他们想要的主题或消息类型——如"促销"、"产品更新"或"博客文章"。这种方法：
* 使提示感觉不那么侵入性和更相关
* 提高参与度和消息点击率
* 通过提前设定期望来减少后续取消订阅
个性化选择加入可以提高长期保留率，因为用户感觉可以控制体验。
### 随时间测试和优化
不要依赖单一策略。测试不同的提示类型、消息和时机，以查看您的受众产生共鸣的内容。
尝试这种方法：
* 从原生浏览器提示开始几个月，以衡量您的基线选择加入率。
* 收集数据后，尝试使用滑动提示或自定义提示流程来提高跨浏览器和受众群体的转化率。
* 使用我们的 SDK 的 [`permissionPromptDisplay` 和 `permissionChange` 事件](./web-sdk-reference#addeventlistener-notifications) 以及 [`slidedown` 事件](./web-sdk-reference#addeventlistener-slidedown) 跟踪性能。
选择加入行为可能因季节、设备类型和地区而异——因此请定期测试以找到参与度和用户舒适度之间的正确平衡。
***
## 常见问题和故障排除
### 提示显示问题
如果以下任何条件为真，浏览器的原生权限提示可能不会显示：
**1. 浏览器阻止了提示显示。**
导航到浏览器的设置并检查"通知"权限设置。Chrome 示例：`chrome://settings/content/notifications`
如果您仍然遇到问题，请参阅我们的[网页推送故障排除指南](./troubleshooting-web-push)。
## 常见问题
如果您尝试通过社交媒体应用（Instagram、TikTok、Facebook 等）查看您的网站，如果它使用 Webview，您可能看不到网页提示。Webview 不支持网页推送通知。该应用必须在支持网页推送通知的浏览器中打开您的网站。
滑动提示一直显示通常有 2 个原因：
1. 您处于隐身模式、私人浏览模式或访客浏览模式。
2. 您在不使用自动提示选项的情况下以编程方式触发提示。请参阅 [Web SDK 参考](./web-sdk-reference)并检查您使用的提示方法。
对于 OneSignal 提示，请参阅[滑动提示退让逻辑](#slidedown-prompt-back-off-logic)。
对于原生权限提示，请参阅[浏览器原生提示行为](#browser-native-prompt-behavior)。
查看上面的[浏览器原生提示行为](#browser-native-prompt-behavior)部分以获取更多详细信息。
### 自定义
目前您需要选择[自定义代码设置](./web-push-custom-code-setup)。然后通过检测用户浏览器语言并使用不同文本初始化 OneSignal SDK 来编程式地更改提示的语言。
原生权限提示将自动翻译为浏览器设置的语言。
使用[自定义代码设置](./web-push-custom-code-setup)，您可以使用不同的提示选项初始化 OneSignal。您需要设置自己的方式来触发初始化 OneSignal 的 A/B/C/D 等测试。
作为额外的好处，您可以使用[订阅更改](./web-sdk-reference#addeventlistener-push-subscription)方法来检测用户何时订阅，并根据哪个测试赢得了订阅来添加[数据标签](./add-user-data-tags)。
可以！请参阅我们的指南[按订阅页面自动分段](./auto-segment-users-by-page-visit)。
您无法更改铃铛图像，但您可以更改颜色、文本并将其放置在页面的左下方或右下方。
可以！这需要使用[自定义代码设置](./web-push-custom-code-setup)并根据上述设置配置通过代码添加类别。
OneSignal Web SDK 具有[滑动提示事件方法](./web-sdk-reference#addeventlistener-slidedown)来检测它何时在屏幕上显示、何时关闭以及"允许"或"取消"操作。
您必须[禁用**自动提示**选项](#auto-prompt-%26-display-settings)，然后将[滑动提示](./web-sdk-reference#slidedown-prompts)代码添加到您希望显示提示的特定页面。
如果您使用铃铛提示，目前无法按页面逐个禁用它。
在2017年12月5日，Google 更改了 Android 版 Chrome 上原生权限提示的外观。它是一个非常不用户友好的弹窗，会占据您网站的整个屏幕。我们故意在 Android 上添加了双重提示，以防止您的用户在您的网站上有不好的体验。
如果您不希望显示滑动提示，您必须在提示编辑器中关闭自动提示开关（别忘了按**保存**按钮），然后使用 [Web SDK `requestPermission()` 方法](./web-sdk-reference#requestpermission)。
***
## 相关页面
提示方法、事件和初始化选项的完整 API 参考。
iOS 和 iPadOS Web 推送支持所需的额外设置步骤。
诊断和解决常见的 Web 推送通知问题。
让用户管理他们的通知偏好和频道选择。
***
## 权限提示设置
配置您希望在网站上显示的提示，以鼓励用户订阅。在您的 OneSignal 仪表板中，导航到：**设置 > 推送和应用内 > 网页设置 > 权限提示设置**
从那里点击 **添加提示** 来选择 OneSignal 可用的提示类型。您还可以编辑列表中已显示的任何现有提示。
每种提示类型都有不同的用例和显示行为。您可以单独使用它们或组合使用，以适合您网站用户体验的方式引导用户完成订阅过程。
可用的提示包括：
* [滑动提示](#slidedown-%26-category)：用于推送通知和可选类别选择的视觉突出提示。
* [邮箱/电话提示](#email-%26-phone-number-prompt)：用于收集用户邮箱地址、电话号码或两者。
* [订阅铃铛提示](#subscription-bell-prompt)：用于推送订阅的持续浮动小部件，通常放置在网站的底部角落。
* [自定义链接提示](#custom-link-prompt)：嵌入在您网站中的可自定义按钮或链接，触发原生浏览器提示。
* [原生权限提示](#native-permission-prompt)：用户必须接受的浏览器级提示，才能接收推送通知。
***
### 滑动提示与类别
滑动和类别提示在桌面端屏幕顶部中央和移动端底部中央显著出现。这些是在必需的[原生权限提示](#native-permission-prompt)之前显示的高可见度软提示。它们不会独立为用户订阅，但有助于启动订阅流程。
要添加滑动提示：
1. 前往 **设置 > 推送和应用内 > 网页设置 > 权限提示设置**
2. 选择 **添加提示 > 推送提示 > 推送滑动提示**
完成后，点击 **完成**，然后在下一页再次点击 **保存** 以使其生效。
完成后，点击 **完成**，然后在下一页再次点击 **保存** 以使其生效。
自定义显示哪些输入字段、文本标签和自动提示延迟。
完成后，按 **完成**，然后在下一页再次 **保存** 以使其生效。
您可以自定义 OneSignal 铃铛提示的颜色、尺寸、底部位置、文本等！**🛑 您目前无法更改图标图像或将铃铛放置在顶部角落。**
常见用例：
* 在博客文章下方："喜欢这篇文章吗？在我们发布新内容时立即获取更新！"
* 在您的网站页脚中
* 在粘性标题或浮动工具栏中
### 浏览器原生提示行为
不同的浏览器施加独特的行为和限制以减少垃圾权限请求。为了对抗垃圾信息和不良用户体验，OneSignal 将在以下列出的某些情况下自动默认使用滑动提示。
**如果您不想显示滑动提示并希望直接使用原生权限提示，您必须关闭自动提示选项并使用我们的 [Web SDK `requestPermission()` 方法](./web-sdk-reference#requestpermission)。** 请注意，如下所述，直接显示原生权限提示可能无法在所有浏览器中正常工作。
#### Chrome
[Chrome 80+](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html?m=1) 可能会显示更安静的 UI 而不是完整的提示：
* 自动应用于经常拒绝提示的用户
* 也适用于拒绝率高的网站
如果用户在原生提示上点击"X"，Chrome 会实施退让逻辑：
* 您有 3 次提示机会
* 在第 3 次关闭后，提示将被抑制 7 天（[来源](https://chromestatus.com/feature/6443143280984064)）。
* 如果网站可信，原生提示正常出现：
***
## 自动提示和显示设置
为了最大化参与度并避免干扰您的用户，最好在他们在您的网站上花费一些时间后再延迟显示提示。OneSignal 允许您使用两个延迟条件根据用户行为自动显示提示：
* **页面浏览次数：** 用户在您网站上加载任何页面的次数
* **页面停留秒数：** 用户在页面上必须花费的时间量
这些延迟使用 **AND** 条件应用，意味着在提示出现之前必须满足两个条件。
**示例：** 如果您将延迟设置为 3 次页面浏览和 30 秒，则提示将在第三次页面加载后 30 秒后显示。如果用户没有与提示交互，它将继续在每次页面加载（在 30 秒后）上显示，直到被点击或被解除。
* 点击完成，然后保存
在此示例中：
* 用户选择了"不允许网站发送通知"，这将阻止显示原生权限提示。这必须显示"网站可以要求发送通知"才能允许显示原生权限提示。
* 用户已将 `https://yoursite.com` 添加到"不允许发送通知"列表中，这将阻止显示原生权限提示。必须从列表中删除才能允许显示原生权限提示。
**特定浏览器文档：**
* [Chrome](https://support.google.com/chrome/answer/3220216) - 此页面说明如何在 Chrome 中管理通知，方法是转到设置 > 隐私和安全 > 网站设置 > 通知，您可以在其中控制默认行为并管理各个网站的权限。
* [Firefox](https://support.mozilla.org/en-US/kb/push-notifications-firefox) - 本指南介绍了 Firefox 的 Web 推送通知，说明如何通过设置 > 隐私和安全 > 通知管理通知权限，以及如何通过地址栏的网站信息图标控制特定网站的权限。
* [Safari](https://support.apple.com/guide/safari/customize-website-notifications-sfri40734/mac) - 此 Apple 指南说明如何通过 Safari > 偏好设置 > 网站 > 通知在 Mac 上自定义 Safari 通知，您可以在其中管理哪些网站可以发送通知，并通过系统偏好设置控制通知行为。
* [Edge](https://support.microsoft.com/en-us/microsoft-edge/manage-website-notifications-in-microsoft-edge-0c555609-5bf2-479d-a59d-fb30a0b80b2b) - 本文详细说明了如何通过导航到设置 > 隐私、搜索和服务 > 网站权限 > 通知来管理 Edge 通知，或通过单击地址栏中的网站信息图标。
**2. 用户已经允许通知或已经订阅。**
在浏览器的设置中，检查您的网站 URL 是否列在"允许发送通知"列表中。
**3. 您处于隐身模式、私人浏览模式或访客浏览模式。**
在隐身模式、私人浏览模式或访客浏览模式下，原生权限提示不会显示。用户无法在这些模式下订阅通知。
**4. 您使用的浏览器和设备不支持网页推送通知。**
确保您[使用支持网页推送的浏览器和设备](./web-push-setup-faq#browser-support-by-operating-system)。
**5. 未满足 iOS/iPadOS 要求。**
对于 iOS，提示用户订阅有一些额外要求。更多信息可以在 [iOS/iPadOS 移动网页推送](./web-push-for-ios)指南中查看。