iOS 16.4 iPhone Safari网页推送通知配置失败求助

你的代码在Mac上能正常运行，是因为桌面Safari支持直接通过Notification API创建本地通知，但iOS 16.4 Safari的推送通知依赖Push API + Service Worker的远程推送机制，和桌面端的本地通知逻辑完全不同——这就是你点击按钮无弹窗的核心原因。下面是完整的配置步骤和示例代码：

必要前提 #

• 网站必须部署在HTTPS环境下（本地开发用localhost可豁免，真机测试需用HTTPS，可借助ngrok临时转发）
• 已开启iOS Safari的Push API实验性功能（你已完成此步骤）
• 确保iPhone系统设置中允许该网站的通知权限

完整代码示例 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Safari Push Test</title>
</head>
<body>
  <button class="notify-btn">订阅推送通知</button>
  <script src="./main.js"></script>
</body>
</html>

main.js #

document.querySelector(".notify-btn").addEventListener("click", async () => {
  // 1. 注册Service Worker，这是推送通知的核心依赖
  const registration = await navigator.serviceWorker.register('./service-worker.js');
  
  // 2. 请求通知显示权限
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    console.log("未获取通知权限");
    return;
  }
  
  // 3. 获取推送订阅对象，需传入VAPID公钥（自行生成）
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(
      '替换为你的VAPID公钥'
    )
  });
  
  // 4. 将订阅对象发送到后端保存（实际项目中需调用接口）
  console.log("推送订阅信息:", JSON.stringify(subscription));
});

// VAPID公钥格式转换工具函数
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  
  const rawData = window.atob(base64);
  return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
}

service-worker.js #

// 监听推送事件，收到后端推送时显示通知
self.addEventListener('push', (event) => {
  const data = event.data?.json() || { title: "新通知", body: "这是推送内容" };
  const options = {
    body: data.body,
    icon: "https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/medium-512.png"
  };
  
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// 监听通知点击事件，点击后打开网站
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow('/')
  );
});

额外操作步骤 #

1. 生成VAPID密钥对：这是用来加密推送请求的安全密钥，可通过web-push工具生成（npm安装web-push后，执行web-push generate-vapid-keys命令）
2. 后端集成：后端需要保存用户的推送订阅对象，当需要发送通知时，用VAPID私钥签名后，调用Push API向苹果推送服务发送请求
3. 真机测试：本地开发时，用ngrok将localhost端口转发为HTTPS地址，在iPhone Safari中访问该地址即可测试订阅和推送流程

你的原代码仅请求了通知权限并尝试创建本地通知，但iOS Safari不支持这种模式，必须走Service Worker+Push API的远程推送流程，按上述步骤配置后就能正常弹出订阅请求并接收推送了。

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