iPhone设备调用Notification报错，如何实现Web通知功能？

你的报错ReferenceError: Cannot find variable: Notification是因为iPhone上的Safari（包括iOS上的Chrome等基于WebKit的浏览器）不支持全局的Notification对象，它对Web通知的实现有特殊限制，但iOS 16.4及以上版本是可以实现Web通知功能的，具体要求和修改方案如下：

核心限制与前提 #

• 必须使用HTTPS协议（本地开发可使用localhost例外）
• 网站必须被添加到iPhone主屏幕（以PWA形式运行）
• 仅支持iOS 16.4及以上版本的Safari/iOS浏览器

适配后的代码实现 #

先做特性检测避免访问不存在的对象，再通过Service Worker上下文处理权限与通知：

const notifyTest = async () => {
  try {
    // 检测基础支持
    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
      alert('当前设备不支持Web通知功能');
      return;
    }

    // 确保Service Worker已激活
    const registration = await navigator.serviceWorker.ready;

    // 检查通知权限状态
    const permission = await registration.pushManager.permissionState({
      userVisibleOnly: true
    });

    if (permission === 'denied' || permission === 'default') {
      // 请求权限（Safari要求通过PushManager发起）
      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: '' // 仅本地通知可留空；需服务器推送则填VAPID公钥
      });
      
      // 权限授予后显示通知
      if (subscription) {
        const options = {
          body: 'Its a wonderful wonderful live',
          // icon: 'img/Sukusuku Hakutaku.png'
        };
        await registration.showNotification('Lets do the harlem shake', options);
      }
    } else {
      // 已有权限，直接显示通知
      const options = {
        body: 'Its a wonderful wonderful live',
        // icon: 'img/Sukusuku Hakutaku.png'
      };
      await registration.showNotification('Lets do the harlem shake', options);
    }
  } catch (error) {
    alert(error.message || error);
  }
};

额外说明 #

1. 若仅需本地触发通知，applicationServerKey可留空，但userVisibleOnly: true是Safari强制要求。
2. iOS 16.4以下版本无法实现标准Web通知，只能用页面内自定义弹窗（模态框、Toast）作为替代。
3. iPhone上的Web通知仅在APP后台/锁屏状态下弹出提示，前台时仅会出现在通知中心。

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