iOS Safari 16.5中Notification.requestPermission()无法弹出授权弹窗的解决方法

针对你遇到的iOS Safari中Notification.requestPermission()无响应的问题，可按以下步骤排查解决：

• 确认系统版本达标：iOS 16.4及以上版本的Safari才完整支持Push API和Notification API，若设备系统版本低于此，需先升级iOS。

• 修正getToken调用参数：你代码中messaging.getToken(messaging, { vapidKey: '<my-key>' })的写法错误，无需将messaging作为第一个参数。
  若使用旧版命名空间SDK，正确写法为：

  messaging.getToken({ vapidKey: '<my-key>' })
  

  若使用模块化SDK，需先导入getToken方法，再调用：

  import { getToken } from "firebase/messaging";
  getToken(messaging, { vapidKey: '<my-key>' })
  

  参数错误可能导致iOS端静默失败，进而影响授权流程。

• 检查权限状态与系统设置：

  1. 先通过console.log(Notification.permission)查看当前权限状态，若为denied，说明之前已拒绝授权，需引导用户前往「设置->Safari浏览器->通知」手动开启对应网站的通知权限。
  2. 确保设备「设置->通知」中已开启Safari的通知权限。

• 验证HTTPS与Service Worker配置：

  • iOS Safari要求网站必须使用HTTPS（本地开发localhost除外），确保部署环境符合要求。
  • 确认firebase-messaging-sw.js已正确放置在网站根目录，且内容配置正确（需初始化Firebase并导入对应脚本），Service Worker需正常注册且scope覆盖页面路径。

• 剥离FCM测试基础功能：先单独测试Notification.requestPermission()是否正常工作，使用简化代码：

  document.getElementById('your-button-id').addEventListener('click', () => {
    console.log('当前权限状态:', Notification.permission);
    Notification.requestPermission().then(perm => {
      console.log('授权结果:', perm);
    }).catch(err => {
      console.error('授权错误:', err);
    });
  });
  

  若此代码能正常弹出授权弹窗，说明问题出在FCM集成环节，需重新检查FCM初始化与Service Worker配置。

内容的提问来源于stack exchange，提问作者Aryeh Kempler-DeLugach