> iOS 上通过“添加到主屏幕”安装的 PWA 应用，无法像普通网页那样直接使用 `Notification.requestPermission()` 弹出系统授权弹窗，必须借助 WebKit 消息桥接机制来调用原生层的能力。本文将详细拆解实现步骤与关键代码。 iOS 平台上的 PWA 有一个常见难题：当用户将 Web 应用添加到主屏幕后，它运行在 WKWebView 环境中，与 Safari 浏览器中的网页分属两套权限体系。标准 `Notification.requestPermission()` 在 WKWebView 中不会触发任何系统级通知弹窗——即使你在 Apple Developer 后台已为相应 App ID 开启了 Push Notifications 能力，也依然无效。 根本原因在于，iOS PWA 的通知权限必须由原生宿主（即包裹 Web 内容的 WKWebView 容器）主动暴露出来，通过 `window.webkit.messageHandlers` 这座桥才能让 JavaScript 与原生代码通信。Web 层没有直接访问系统通知权限的权限，只能委托给原生层处理。 **正确实现方式如下：** **1. 前置条件确认** - 在 Apple Developer Account 中，确保相关 App ID 的 **Push Notifications** 能力已开启； - 你的 PWA 需要配置好 `manifest.json` 和 service worker（虽然不是通知必需，但这是标准 PWA 的标配）； - **最关键的前提**：原生宿主（例如使用 Capacitor、Cordova 或自行封装的 WKWebView）必须注册一个名为 `'push-permission-request'` 的 message handler，并且在原生侧已实现调用 `UNUserNotificationCenter.requestAuthorization(...)` 的逻辑。 **2. JavaScript 层检测并触发授权请求** 下面的代码可以帮你判断环境是否支持桥接，并在确认后发送请求消息： ```javascript // 检测当前环境是否为支持消息桥接的 iOS WKWebView const isIOSWKWebView = typeof window !== 'undefined' && (window as any).webkit?.messageHandlers?.['push-permission-request'] != null; if (isIOSWKWebView) { try { // 触发原生层请求通知权限 (window as any).webkit.messageHandlers['push-permission-request'].postMessage('request'); } catch (err) { console.warn('Failed to request iOS push permission:', err); } } else { console.log('Not on iOS WKWebView — falling back to standard web flow (if applicable)'); } ``` **⚠️ 几个注意事项：** - 这套方案**仅对“添加到主屏幕”后启动的 PWA 生效**，在 Safari 浏览器中直接打开的网页无效； - 如果弹窗未出现，请优先检查原生侧是否已注册 `messageHandler`，以及 `UNUserNotificationCenter` 是否已初始化并调用授权请求； - iOS 16.4+ 虽然对 PWA 推送支持有所改进，但目前仍然**只能通过原生桥接方式请求权限**，且无法自动订阅远程推送 token，后续需要原生模块获取 APNs Token 并上报到你的服务器； - 切勿在页面刚加载时立即触发权限请求——最好等待用户主动操作，例如点击“开启通知”按钮后再调用，这符合 Apple 的人机交互指南。 **总结一下**：iOS PWA 的通知权限并非纯前端能独立完成的任务，它本质上是 Web 与原生协同配合的集成工作。前端负责探测环境并发起桥接调用，原生层负责真实的权限申请和生命周期管理。没有原生支持的纯 Web 方案，在当前 iOS 版本下基本不可行。