FCM onMessage在Firefox失效但Chrome正常的技术求助

我的代码在Chrome（版本103.0.5060.134）运行完全正常，但在Firefox（103.0）中无法接收通知/消息——Service Worker已成功注册，但控制台没有任何报错信息。我使用的是Vue v2，相关代码如下：

firebase-messaging-sw.js #

importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app-compat.js')
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.js')

// 传入Firebase配置对象，在Service Worker中初始化Firebase应用
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// 获取Firebase Messaging实例，用于处理后台消息
const messaging = firebase.messaging();

registerServiceWorker.js #

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log('App正通过Service Worker从缓存加载。')
    },
    registered () {
      console.log('Service Worker已注册。')
    },
    cached () {
      console.log('内容已缓存，可离线使用。')
    },
    updatefound () {
      console.log('正在下载新内容。')
    },
    updated () {
      console.log('有新内容可用，请刷新页面。')
    },
    offline () {
      console.log('未检测到网络连接，App正以离线模式运行。')
    },
    error (error) {
      console.error('Service Worker注册出错:', error)
    }
  })
}

排查与修复步骤 #

• 检查通知权限：手动确认Firefox是否给当前站点开启通知权限，路径是地址栏左侧锁图标→权限→通知，确保设为“允许”。Firefox对权限的校验更严格，可能存在误操作拒绝的情况。
• 确认SW文件位置与作用域：firebase-messaging-sw.js必须放在项目根目录，否则Firefox无法正确接收消息。如果注册的是打包后的service-worker.js，可以在注册时显式指定根作用域：

  register(`${process.env.BASE_URL}service-worker.js`, {
    scope: '/',
    // 原有回调...
  })
  

• 添加后台消息处理逻辑：当前SW代码仅初始化了Messaging实例，缺少后台消息处理函数，Firefox需要显式定义才能展示通知：

  // 在firebase-messaging-sw.js末尾添加
  messaging.setBackgroundMessageHandler(function(payload) {
    console.log('收到后台消息:', payload);
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: '/你的通知图标路径.png'
    };
    return self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

• 本地环境限制处理：Firefox在本地http环境下推送可能受限，本地测试优先用localhost，或者在about:config中开启dom.serviceWorkers.testing.enabled和dom.push.testing.enabled放宽限制；生产环境必须用HTTPS。
• 升级Firebase版本：尝试将Firebase compat版本升级到9.23.0及以上，更新importScripts的链接，避免版本兼容性问题。

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