iOS 网页推送设置

​

2025 年重要更新

​

要求

• iOS/iPadOS 版本：16.4 或更高版本
• HTTPS 源：具备响应式设计的安全连接
• 网页应用清单：具有正确设置的有效 manifest.json 文件
• 主屏幕安装：必须从任何支持的浏览器将网页应用添加到用户主屏幕
• 用户主动操作：在权限提示出现之前，用户必须先与您的站点进行交互
• OneSignal Service Worker：通知推送所必需

​

渐进式网页应用 (PWA) 检查

​

设置

​

1. 创建您的网页应用清单

​

必需的清单字段

• $schema （推荐）：用于验证和 IDE 支持的 JSON schema URL
• name （必需）：显示给用户的完整应用名称
• display （必需）：为了 iOS 兼容性，必须设置为 "standalone" 或 "fullscreen"
• start_url （必需）：应用启动时的入口 URL
• icons （必需）：包含多种尺寸的图标对象数组
• id （推荐）：允许多个应用实例的唯一标识符

​

示例清单文件

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​

实施步骤

1. 文件放置：将 manifest.json 放在您网站的根目录中
2. HTML 集成：将此链接标签添加到所有页面的 <head> 部分：

<link rel="manifest" href="/manifest.json"/>

3. 图标准备：创建多种尺寸的高质量 PNG 图标（推荐 192x192、256x256、384x384、512x512 像素）

​

2. 添加 OneSignal service worker

​

3. 配置权限提示

​

4. 引导用户“添加到主屏幕”

​

必需的用户流程

1. 在 iOS/iPadOS 16.4+ 上使用 Safari、Chrome 或 Edge 访问您的网站
2. 点击浏览器的分享按钮
3. 选择添加到主屏幕选项
4. 将应用保存到其设备
5. 从主屏幕打开应用（而不是从浏览器）
6. 与您的订阅按钮交互以触发原生权限提示

​

用户引导策略

• 网站横幅：在移动 Apple 设备上专门显示横幅，解释通知的价值并提供逐步说明。
• 可视化指南：使用截图和箭头向用户确切展示点击位置。
• 时机：在用户对您的内容表现出参与度后再展示指导。

​

实施示例

​

开源解决方案

​

5. 测试和验证

​

清单文件测试

1. 可访问性检查：导航到 https://yoursite.com/manifest.json 以确保公开可访问性
2. 浏览器开发者工具：
   • 打开 Chrome DevTools (F12)
   • 转到“应用程序”选项卡 → 清单
   • 查看任何错误或警告
3. 在线验证器：
   • Manifest Tester
   • Redirection.io Validator
   • ValidBot Manifest Wizard

​

端到端推送通知测试

1. 在 iOS 16.4+ 设备上使用 Safari、Chrome 或 Edge 访问您的网站
2. 点击浏览器的分享按钮
3. 选择添加到主屏幕
4. 将应用保存到您的设备
5. 从主屏幕打开应用（关键步骤）
6. 触发您的订阅按钮 - 应显示原生权限提示
7. 授予权限并测试通知推送

​

重要测试说明

• 从主屏幕删除应用
• 清除浏览器缓存（设置 > Safari/Chrome/Edge > 清除缓存）
• 重复此过程

• 确保 display 字段为 "standalone" 或 "fullscreen"
• 验证所有图标路径可访问
• 确认清单以正确的 MIME 类型 (application/manifest+json) 提供服务
• 测试 CORS 错误

​

故障排除

​

下一步