Edge浏览器Web Push Notifications发送失败：400错误排查求助

• 该功能在Chrome、Firefox、Safari中均可正常工作，但Edge浏览器无法接收推送通知。
• 已成功在Edge中获取endpoint、auth和p256dh并保存至数据库，但使用Python的pywebpush库发送通知时，始终返回HTTP 400错误且无响应体，无法定位具体问题。
• Edge返回的endpoint为https://wns2-db5p.notify.windows.com/w，查阅资料得知基于Chromium的浏览器应返回https://fcm.googleapis.com/fcm，不确定此信息是否准确。
• Edge的通知授权流程与其他浏览器不同：请求授权时不会直接弹出窗口，仅在地址栏右侧显示图标，点击图标后才会弹出授权窗口。授权完成后虽已获取所需信息，但通知仍无法发送。已尝试将应用部署至线上环境（非localhost），问题依然存在。

前端获取订阅信息代码 #

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array('<my-public-vapid-key>'),
});
const subscriptionAsJson = subscription.toJSON();
const p256dh = subscriptionAsJson.keys?.p256dh;
const auth = subscriptionAsJson.keys?.auth;
const endpoint = subscriptionAsJson.endpoint;

function urlBase64ToUint8Array(base64String: string) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');
  
  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);
  
  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

发送通知的Python代码（基于Django） #

vapid_claims = settings.VAPID_CLAIMS
parsed_endpoint = urlparse(device.notification_endpoint)
webpush(
    subscription_info={
        "endpoint": device.notification_endpoint,
        "keys": {
            "p256dh": device.p256dh,
            "auth": device.auth,
        }
    },
    data=data,
    vapid_private_key=settings.VAPID_PRIVATE_KEY,
    vapid_claims={
        "sub": vapid_claims["sub"],
        "exp": vapid_claims["exp"],
        "aud": f"{parsed_endpoint.scheme}://{parsed_endpoint.netloc}",
    },
)

Django相关配置 #

VAPID_PUBLIC_KEY = os.getenv("VAPID_PUBLIC_KEY")
VAPID_PRIVATE_KEY = os.getenv("VAPID_PRIVATE_KEY")
VAPID_CLAIMS = {
    "sub": "mailto:<my-email>",
    "exp": 60,
}

调整后的发送代码 #

webpush(
    subscription_info={
        "endpoint": notification_endpoint,
        "keys": {
            "p256dh": p256dh,
            "auth": auth,
        },
    },
    data=data,
    vapid_private_key=VAPID_PRIVATE_KEY,
    vapid_claims={
        "sub": vapid_claims["sub"],
        "exp": vapid_claims["exp"],
        "aud": f"{parsed_endpoint.scheme}://{parsed_endpoint.netloc}",
    },
    ttl=200,
)

内容的提问来源于stack exchange，提问作者Dean Koštomaj