Safari 17.4及以上版本Firebase Cloud Messaging Web注册失败求助

针对Safari 17.4及更新版本中FCM注册时endpoint、auth、p256dh字段为空导致的400错误，可尝试以下方案：

1. 严格遵循Service Worker注册时机要求 #

Safari 17.4强化了对Service Worker注册时机的限制，必须在用户主动交互（如按钮点击、表单提交）后触发注册，不能在页面加载完成后自动执行。示例：

// 绑定到用户点击事件
document.getElementById('enable-notifications').addEventListener('click', async () => {
  await navigator.serviceWorker.register('/sw.js');
  // 后续执行FCM注册逻辑
});

同时确保Service Worker的作用域与页面路径匹配，若页面在根目录，注册时可显式指定作用域：navigator.serviceWorker.register('/sw.js', { scope: '/' })

2. 手动生成PushSubscription后传给FCM #

绕过FCM自动生成subscription的流程，手动调用Push API生成合法订阅，再传入FCM获取token：

async function getFCMToken() {
  // 1. 注册Service Worker
  const swReg = await navigator.serviceWorker.register('/sw.js');
  // 2. 手动生成PushSubscription
  const pushSub = await swReg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('你的VAPID公钥')
  });
  // 3. 传入FCM获取token
  const fcmToken = await firebase.messaging().getToken({
    vapidKey: '你的VAPID公钥',
    subscription: pushSub
  });
  return fcmToken;
}

// Base64转Uint8Array工具函数
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)));
}

3. 检查Safari隐私权限配置 #

• 确认站点通知权限已开启：前往设置>网站>通知，允许当前站点发送通知
• 允许跨站跟踪：前往设置>隐私与安全性>跟踪，勾选允许网站请求跟踪（FCM注册依赖部分跨站资源访问）

4. 验证VAPID密钥有效性 #

• 确保VAPID公钥与私钥配对正确，可使用web-push工具重新生成：

  npx web-push generate-vapid-keys
  

• 确认FCM控制台中配置的VAPID公钥与代码中使用的完全一致

5. 增加错误监听排查细节 #

添加Service Worker和FCM的错误监听，获取更具体的错误信息：

// Service Worker注册错误
navigator.serviceWorker.register('/sw.js').catch(err => {
  console.error('SW注册失败:', err);
});

// Service Worker全局错误
navigator.serviceWorker.addEventListener('error', event => {
  console.error('SW运行错误:', event);
});

// FCM错误监听
firebase.messaging().onMessageError(err => {
  console.error('FCM消息错误:', err);
});

内容的提问来源于stack exchange，提问作者Andrei F