如何在iOS（≥16.4）的Blazor WASM PWA中用JS实现Web Push Protocol

1. 苹果开发者后台配置必做项 #

• 不用创建无用的iOS原生应用，但必须创建Web Push ID及对应证书：
  • 登录苹果开发者后台，进入「Certificates, Identifiers & Profiles」
  • 选择「Identifiers」，点击「+」新建标识符，类型选「Web Push IDs」
  • 填写描述和标识符（建议用反向域名格式，比如com.your-pwa-domain.push）
  • 创建完成后，为这个Web Push ID生成推送证书，需选择「Sandbox & Production」环境（PWA会用到生产环境推送服务）
  • 下载证书后转成PEM格式，执行命令：openssl pkcs12 -in 你的证书文件.p12 -out push-cert.pem -nodes -clcerts，服务器发送推送时会用到这个文件

2. JS端获取订阅Token的服务器说明 #

iOS 16.4+的PWA Web Push直接对接苹果的APNs服务器，JS调用PushManager.subscribe()时，浏览器会自动和APNs交互获取订阅信息，你无需手动指定服务器地址。但需满足以下前提：

• PWA的manifest.json配置必须完整：包含name、short_name、start_url，display设为standalone或fullscreen，且已添加到iOS主屏幕（这是iOS启用Web Push的必要条件）
• Service Worker已正确注册，且监听了push和notificationclick事件
• 调用subscribe()时，applicationServerKey需填入从Web Push证书提取的公钥：执行命令openssl rsa -in push-cert.pem -pubout -out push-pubkey.pem生成公钥，再转成Base64 URL安全格式（去掉首尾的-----BEGIN PUBLIC KEY-----和-----END PUBLIC KEY-----，替换+为-、/为_，删除换行符）

3. 核心注意点 #

• iOS 16.4+要求PWA必须使用HTTPS（本地开发用localhost不受限制）
• 用户必须将PWA添加到主屏幕，且手动允许通知权限（不会自动弹出权限请求，需要引导用户操作）
• 服务器发送推送时，需调用APNs的API而非普通Web Push网关。请求地址为https://api.push.apple.com/3/device/<设备token>（设备token是订阅返回的endpoint最后一段），请求头需携带证书验证信息
• Blazor WASM环境下，确保JS交互无跨域问题，Service Worker注册路径正确（通常在wwwroot/service-worker.js）

4. 调试小技巧 #

• 使用Safari开发者工具的「Web Push」面板查看订阅状态和推送日志
• 检查navigator.serviceWorker.ready是否正常返回，确认Service Worker激活成功
• 订阅时捕获错误信息，排查权限拒绝、Service Worker未注册等问题

内容的提问来源于stack exchange，提问作者Renato