iOS端PWA推送通知问题：Notification.requestPermission无响应

核心限制与前置要求 #

iOS对PWA推送通知有严格的触发条件，必须先满足以下前提：

• PWA必须从主屏启动（不能是Safari内打开的网页）
• manifest.json 配置需符合要求：
  • display 设为 standalone 或 fullscreen（不能是browser）
  • 包含符合尺寸的图标（至少192x192和512x512）
  • start_url 路径正确，启动后能正常加载
• Service Worker已成功注册并处于激活状态
• 权限请求必须由用户主动交互触发（比如点击按钮），禁止页面加载时自动调用

具体修复步骤 #

1. 绑定权限请求到用户交互事件
   iOS禁止非用户触发的权限请求，必须把Notification.requestPermission()放在点击、触摸等操作的回调里，示例：

// 错误：页面加载时自动调用
// window.addEventListener('load', () => Notification.requestPermission());

// 正确：绑定按钮点击事件
document.getElementById('enable-notifications').addEventListener('click', async () => {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    // 执行Service Worker订阅逻辑
    await subscribeToPush();
  }
});

2. 规范Service Worker注册与订阅流程
   确认Service Worker注册成功后，再发起权限请求和订阅，示例：

async function registerServiceWorker() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    const registration = await navigator.serviceWorker.register('/sw.js');
    return registration;
  }
  throw new Error('当前环境不支持推送通知');
}

async function subscribeToPush() {
  const registration = await registerServiceWorker();
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true, // iOS强制要求设为true
    applicationServerKey: urlBase64ToUint8Array('你的VAPID公钥')
  });
  // 将subscription发送到后端保存
}

注意：userVisibleOnly必须设为true，iOS不支持静默推送。

3. 验证manifest.json关键配置
   确保manifest核心字段正确：

{
  "name": "你的推送仪表盘",
  "short_name": "推送工具",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "push": {
    "userVisibleOnly": true
  }
}

4. 检查iOS系统与设置

• iOS版本需≥16.4（苹果正式支持PWA推送通知的最低版本）
• 确认Safari全局通知权限未禁用：设置→Safari浏览器→通知→允许网站请求通知
• 若之前拒绝过该应用权限，手动重置：设置→你的PWA应用→通知→允许通知

5. 调试技巧

• 使用Safari开发者工具连接iOS设备，查看Console日志，排查Service Worker注册失败、权限请求被拦截的错误
• 确认PWA已正确添加到主屏：长按Safari底部分享按钮→添加到主屏幕，确保图标正常显示

常见误区 #

• 不要在页面初始化时自动调用权限请求，必须由用户点击触发
• 不要使用display: browser的manifest配置，iOS要求PWA以独立模式运行
• 忽略userVisibleOnly: true会直接导致订阅失败

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