iOS Safari中Web推送通知权限检测异常问题求助

问题背景 #

仅在iOS 17.5.1版本的Safari浏览器及PWA中，部分用户出现Web推送通知权限检测异常：

• 应用加载时检测权限，若状态非denied或granted则弹出自定义提示窗，用户同意后调用PushAlert获取浏览器授权。
• 部分用户点击通知打开PWA后，该提示窗反复弹出，尽管用户实际已授权且能正常接收通知。

原检测逻辑问题 #

最初使用以下代码检测权限：

navigator.permissions.query({name:'notifications'}).then(function(notification_permission) {
    if ( notification_permission.state === 'prompt' ) {
        // 自定义提示窗逻辑
    }
});

发现navigator.permissions.query返回prompt，但Notification.permission实际为granted，导致误弹提示窗。

修改后的复发现象 #

参考苹果论坛相关问题后，修改为同时判断两个API的状态：

navigator.permissions.query({name:'notifications'}).then(function(notification_permission) {
    if ( notification_permission.state === 'prompt' && Notification.permission === 'default' ) {
        // 自定义提示窗逻辑，用户同意后调用PushAlertCO.forceSubscribe()
    }
});

问题曾短暂解决，但用户通过通知打开PWA后再次复发：

• 手动点击按钮检测时，Notification.permission为granted，但navigator.permissions.query仍返回prompt；
• 常规页面延迟600ms检测时，Notification.permission变为default、navigator.permissions.query为prompt，导致提示窗弹出，但用户实际能正常接收通知。

解决方案 #

1. 优先依赖Notification.permission #

Notification.permission是直接反映通知权限状态的核心API，而navigator.permissions.query在iOS 17.5.1的Safari/PWA中存在状态不同步的bug。调整检测逻辑：

// 优先判断Notification.permission，仅当状态为default时再做进一步检测
if (Notification.permission === 'default') {
  navigator.permissions.query({name:'notifications'}).then(perm => {
    if (perm.state === 'prompt') {
      // 弹出自定义提示窗逻辑
    }
  });
}

2. 识别PWA从通知唤醒的场景 #

当PWA通过通知打开时，直接跳过权限检测（能收到通知说明权限已授予）：

• 可通过检查通知携带的自定义参数（比如URL中的query参数）判断是否从通知启动；
• 或利用navigator.getInstalledRelatedApps()确认当前是PWA环境，结合启动上下文做判断。

3. 结合PushAlert订阅状态验证 #

不要仅依赖浏览器权限API，直接调用PushAlert的API检查当前是否已订阅，避免API状态不同步导致的误判：

// 示例：调用PushAlert的订阅状态检查接口
if (Notification.permission === 'default') {
  // 先检查PushAlert是否已有订阅
  PushAlertCO.getSubscriptionStatus().then(status => {
    if (!status.isSubscribed) {
      navigator.permissions.query({name:'notifications'}).then(perm => {
        if (perm.state === 'prompt') {
          // 弹出自定义提示窗
        }
      });
    }
  });
}

4. 缓存权限状态到本地 #

首次检测到权限为granted后，将状态缓存到localStorage，后续页面加载时优先读取缓存，再结合实时检测更新：

// 读取缓存的权限状态
const cachedPermission = localStorage.getItem('notificationPermission');

if (cachedPermission === 'granted') {
  // 跳过提示窗
} else if (Notification.permission === 'default') {
  navigator.permissions.query({name:'notifications'}).then(perm => {
    if (perm.state === 'prompt') {
      // 弹出自定义提示窗
      // 用户授权成功后更新缓存
      localStorage.setItem('notificationPermission', 'granted');
    }
  });
}

// 监听权限变化事件，更新缓存
Notification.requestPermission().then(perm => {
  localStorage.setItem('notificationPermission', perm);
});

结论 #

这确实是iOS 17.5.1版本Safari及PWA的兼容性bug，苹果论坛已有大量类似反馈，核心表现为navigator.permissions.query与Notification.permission的状态不同步，尤其是在PWA从通知唤醒的场景下。通过上述调整检测逻辑、结合第三方订阅状态、缓存本地状态等方式，可规避该bug带来的异常提示问题。

内容的提问来源于stack exchange，提问作者Lucas Marçal Dos Santos