注意：此项目没有可用的旧版文档，因此您看到的是当前文档。
Apple 已发布 iOS 和 iPadOS 16.4，支持添加到 iPhone 和 iPad 主屏幕的 Web 应用的 Web 推送通知。在本指南中，我们将帮助您设置网站，以便向访问您网站的 iPhone 和 iPad 用户发送通知。
在 iOS 设备上解锁无限触达。切勿错过良机。
立即开始设置，在用户忘记您之前将他们带回您的网站。免费开始，智能发送，并根据适合您网站的计划进行增长。
iOS 和 iPadOS 16.4 的 iPhone 和 iPad 设备上的 Safari 浏览器、Google Chrome 和 Edge 支持 Web 推送通知。iOS 要求用户将您的网站添加到其主屏幕，然后通过点按其图标打开 Web 应用。Web 应用像 iOS 或 iPadOS 上的任何其他原生应用一样打开，而不是在浏览器中打开。用户可以授予接收推送通知的权限，然后像 iPhone 和 iPad 上的任何其他应用一样在通知设置中管理这些权限。
开始之前
您需要一些条件才能在 iOS 设备上运行 Web 推送广告系列。
- 您的 Web 应用必须提供一个 Web 应用清单文件 (manifest.json)，其中 display 成员设置为 standalone 或 fullscreen。
- 用户必须使用 iOS 或 iPadOS 16.4 或更高版本。
- 用户需要通过点按“共享”按钮打开共享菜单，然后点按“添加到主屏幕”来将 Web 应用安装到其主屏幕。
- 需要用户手势（例如，点击或点按按钮）才能显示原生权限提示并允许接收推送通知的权限。
如果您的网站已经是渐进式 Web 应用 (PWA)，则无需进行其他更新即可为 iOS/iPadOS Web 推送做好准备。如果您不确定您的网站是否为 PWA，请咨询您的开发团队或使用 Chrome DevTools 中的 Lighthouse。
为 iOS 和 iPadOS Web 推送通知设置您的网站
请按照以下步骤在 iPhone 和 iPad 上的 Safari 中启用和发送推送通知：
- 1. 将 Web 应用清单文件添加到您的网站。
- 2. 将 PushEngage 集成到您的网站。
- 3. 部署并测试您的网站清单。
- 4. 测试订阅对话框模态框和权限提示。
1. 将 Web 应用清单文件添加到您的网站
Web 应用清单是一个 JSON 文件，它会告知浏览器您的渐进式 Web 应用 (PWA) 的相关信息，以及它在安装到用户的桌面或移动设备上时应如何显示和运行。它包含元数据，例如您的 Web 应用的名称、描述、图标、配色方案以及启动应用时应打开的 URL。
您可以使用任何在线工具快速生成清单文件。清单文件的名称可以是任何名称，但通常命名为 manifest.json，并且应上传到您网站的根目录。如果您需要帮助将代码添加到您的 WordPress 网站，请尝试 WPCode 插件。
典型的清单看起来像这样：
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
注意：清单中的 display 成员的值必须设置为 standalone 或 fullscreen。
创建清单文件后，请在网站的 HTML 页面中使用页面 <head> 部分中的 <link> 标签引用该清单。
例如：
<link rel="manifest" href="/manifest.json">
2. 集成 PushEngage 到您的网站
下一步是将 PushEngage 集成到您的网站，以处理服务工作线程在页面上的注册和安装。
如果您尚未完成安装，请在此处 查看安装 PushEngage 的指南。如果您是 WordPress 用户，可以使用 PushEngage WordPress 插件，它将处理服务工作线程的注册。
如果您已有服务工作线程并需要将其与 PushEngage 的服务工作线程合并，可以按照此处提到的步骤进行操作。
3. 部署和测试您的网站清单
上传清单并集成 PushEngage 后，下一步是测试您的 Web 应用，以确保您的 Web 应用清单已正确实施。您可以通过将网站添加到主屏幕来在各种设备和浏览器上测试您的网站。
请按照以下步骤操作：
- 1. 在运行 iOS 16.4 或更高版本的 Safari 浏览器中打开网站
- 2. 点击“共享”按钮打开共享菜单。
- 3. 点击“添加到主屏幕”选项。
- 4. 将应用保存到您的主屏幕。
如果您的网站已成功配置为支持 Web 推送，它将像任何其他应用一样在 iOS 或 iPadOS 上打开 Web 应用，而不是在浏览器中打开并仅作为快捷方式。
您应该通过在应用屏幕上显示横幅来告知用户，提示用户将您的应用添加到其 iOS 设备的主屏幕并订阅 Web 推送通知。
4. 测试订阅对话框
iOS 和 iPadOS 上的主屏幕 Web 应用需要直接的用户交互，例如点击页面上的按钮以显示用于权限的订阅对话框。请按照以下步骤测试权限提示是否正常工作：
- 1. 通过点击设备主屏幕上的应用图标来打开 Web 应用。
- 2. 等待 PushEngage 订阅对话框出现在页面上。
- 3. 点击 PushEngage 弹出窗口中的“允许”按钮以显示权限提示。
- 4. 点击权限提示中的“允许”按钮。
注意：仅当您的网站是 HTTPS 并且应用是从主屏幕启动时，才会显示订阅对话框。您可以从 PushEngage 仪表板自定义订阅对话框的设计和行为。
向 iOS 和 iPadOS 用户发送 Web 推送广告系列
完成上述适用于 iOS 和 iPadOS Web 推送通知的步骤后，您现在可以开始使用 PushEngage 仪表板发送推送通知。
iOS 上的网页推送通知与其它原生应用的工作方式类似。网页推送通知会以横幅通知的形式显示在屏幕上，并在通知中心和锁屏界面上显示。用户还可以从 iOS 设置中管理他们的通知偏好设置。点击通知后，将带您进入网页应用内的目标着陆页。
iOS 网页推送通知的结构
iOS Safari 推送通知目前不支持富媒体、动态 GIF 或视频。一旦添加了这些功能，我们将一并启用。请遵循以下指南为 iOS 用户创建您的通知。
iOS 和 iPadOS 上的网页推送通知包含以下元素：
- 1. 图标 – 在 manifest 文件中指定的图标。单个消息无法更改。
- 2. 标题 – 标题限制为 30-40 个字符，超出部分将被截断。
- 3. 应用名称 – 应用名称在 manifest 文件中指定，单个消息无法更改。
- 4. 消息 – 文本限制为 120-150 个字符，超出部分将被截断。
- 5. 时间戳 – 显示通知送达设备的时间。
这是您开始收集订阅者并向您的 iPhone 和 iPad 用户发送营销活动所需的一切。
如果您遇到任何问题，请点击此处 联系我们。我们的支持团队将能够帮助您。
