Firebase Admin发送的通知图片在Firefox Developer不显示如何解决

解决方案 #

你遇到的这个问题是Firefox浏览器对Web推送通知的资源加载规则比Chrome更严格导致的，可以按以下步骤排查修复：

• 调整FCM消息结构，增加Webpush专属通知配置
  Firefox的Web推送优先读取WebpushConfig下的通知属性，全局Notification字段的属性可能不会被正确映射，修改你的消息构造代码如下：

Message message = new Message()
{
    // 全局Notification可以保留兼容其他平台
    Notification = new Notification
    {
        Title = "Title of my notification",
        Body = "Content of my notification",
        ImageUrl = "https://my.webbit.ir/Admin/Templates/Default/images/backgrounds/logo144.png"
    },
    Webpush = new WebpushConfig()
    {
        // 新增Webpush专属的通知配置，适配Firefox
        Notification = new WebpushNotification()
        {
            Title = "Title of my notification",
            Body = "Content of my notification",
            Icon = "https://my.webbit.ir/Admin/Templates/Default/images/backgrounds/logo144.png",
            Image = "https://my.webbit.ir/Admin/Templates/Default/images/backgrounds/logo144.png"
        },
        FcmOptions = new WebpushFcmOptions()
        {
            Link = "https://www.webbit.ir",
        }
    },
    Token = "myToken"
};

• 配置图片资源的CORS响应头
  Firefox要求通知加载的跨域资源必须携带正确的CORS头，给你的图片服务器添加响应头Access-Control-Allow-Origin: *，或者至少允许你的站点域名、https://fcm.googleapis.com跨域访问。你可以执行curl -I 你的图片地址验证响应头是否符合要求。
• 优化图片参数符合Firefox限制
  • 将图片大小压缩到200KB以内，超过阈值的资源会被Firefox直接拦截
  • 确认图片为标准非渐进式的PNG/JPG格式，移除多余的透明通道、EXIF元数据
  • 尺寸调整为192x192像素的标准通知图标尺寸，避免解析异常
• 检查Firefox浏览器配置
  地址栏输入about:config进入配置页，确认dom.webnotifications.serviceworker.enabled值为true，dom.webnotifications.requireinteraction.enabled为默认值，清除站点原有通知权限后重新授权测试。
• 验证SSL证书兼容性
  确认你的图片站点使用的SSL证书是公共CA签发、被Firefox信任，避免因证书信任问题导致资源加载失败。

内容的提问来源于stack exchange，提问作者msn.secret