Firebase quickstart-js/messaging：Firefox推送通知异常问题

我来帮你搞定Firefox里Firebase推送通知的问题！既然Chrome和Opera都正常，说明核心配置没毛病，大概率是Firefox特有的几个细节没处理到位，咱们一步步排查：

1. 先查Service Worker的注册状态 #

Firefox对Service Worker的位置和权限卡得比Chrome严得多，我之前碰到好几个案例都是脚本放错目录导致的：

• 你的firebase-messaging-sw.js必须放在网站根目录（比如https://你的域名.com/firebase-messaging-sw.js），不能放在子文件夹里！Firefox默认的Service Worker作用域是脚本所在的目录，子目录的推送事件根本捕获不到。
• 打开Firefox的about:debugging#/runtime/this-firefox，找到你的网站，看看Service Worker是不是显示“激活”状态，有没有报错。要是注册失败，先把这个基础问题解决了再说。

2. 调整消息负载适配Firefox #

Firefox对推送负载的格式有自己的要求，你当前的负载可能缺了点东西：

• 哪怕你想用data字段自定义通知内容，也得给notification字段补个基础结构！Firefox如果看不到notification的核心字段（比如title、body），可能直接把推送丢了。比如补充成这样：

  "notification": {
    "title": "默认标题",
    "body": "默认内容",
    "icon": "/你的图标路径.png"
  }
  

• 还有TTL字段，虽然你写的"50"是字符串，大部分浏览器能转，但Firefox更认数字类型，改成50（不要引号）试试。

3. 确认通知权限和FCM配置 #

• 先检查Firefox的权限设置：打开设置 > 隐私与安全 > 权限 > 通知，确保你的网站是被允许发送通知的，没被拉黑。
• 再确认初始化Firebase Messaging时，正确请求了权限：

  messaging.requestPermission()
    .then(() => {
      console.log('通知权限已获取');
      return messaging.getToken();
    })
    .catch(err => {
      console.log('获取通知权限失败:', err);
    });
  

• 别忘了VAPID密钥！Firefox完全依赖VAPID验证推送请求，你得确保初始化时传入的VAPID密钥和Firebase控制台里的一致，Chrome可能兼容旧的方式，但Firefox没这个宽容度。

4. 调试Service Worker的推送事件 #

打开Firefox开发者工具的应用 > 服务工作者，勾选“更新时重新加载”和“在控制台显示日志”，然后发个测试推送，盯着控制台看：

• 有没有触发push事件？要是没触发，说明推送根本没到Service Worker，回到前面的注册和负载检查。
• 如果触发了push但没弹通知，检查你在firebase-messaging-sw.js里的处理逻辑，比如：

  messaging.onBackgroundMessage((payload) => {
    console.log('[Service Worker] 收到后台消息:', payload);
    // 这里要直接调用showNotification，别搞异步延迟，Firefox会拦截
    const notificationTitle = payload.notification.title || payload.data.title;
    const notificationOptions = {
      body: payload.notification.body || payload.data.message,
      icon: '/firebase-logo.png'
    };
    return self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

  重点：Firefox要求showNotification必须在push事件的同步回调里执行，要是你加了setTimeout之类的异步操作，直接就被浏览器拦了。

5. 验证Firefox的设备令牌 #

有时候Firefox生成的令牌格式和Chrome不一样，或者令牌过期了。你可以在Firefox里重新拿一次令牌，替换到你的发送逻辑里测试：

messaging.getToken({ vapidKey: '你的VAPID密钥' })
  .then(currentToken => {
    if (currentToken) {
      console.log('Firefox设备令牌:', currentToken);
      // 把这个令牌发给服务器保存，用它发测试推送
    } else {
      console.log('还没获取到令牌，先请求通知权限');
    }
  })
  .catch(err => {
    console.log('获取令牌出错:', err);
  });

内容的提问来源于stack exchange，提问作者Samuele Calcaterra