我在StackOverflow的另一个QA中找到了一个解决方案（由于某种原因，我再也找不到了）。
原来你必须使用Firebase API v7.8.0，而不是像文档中所说的5.5.6。所以public/firebase-messaging-sw.js中的前两行应该读成这样：

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

字符串

同样的问题我也遇到过。在我的情况下，**“package.json”和“firebase-messaging-sw.js”导入的firebase版本是不同的。在“firebase-messaging-sw.js”导入的版本与“package.json”**中的版本相同后，我的问题得到了解决。

变更前

**"package.json"**
 
 "firebase": "^8.2.1",
 
  **"firebase-messaging-sw.js"**

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

字符串

变更后

**"package.json"**

 "firebase": "^8.2.1",

 **"firebase-messaging-sw.js"**

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

型

在我的例子中，package.json（8.2.1）上的版本与实际的SDK_VERSION（8.0.1）不同。
改变后的服务工人与相同版本的工作..

我在为Vue 3（使用Vite）设置firebase推送通知时遇到了一堆问题，并且我在vite-plugin-pwa中启用了PWA支持，所以有一半的时间我感觉像是在盲目飞行。我终于能够设置对PWA的支持，但后来我遇到了以下问题：

• 我在后台收到通知（当我的应用程序没有焦点时），但不在前台。
• 当我在后台收到通知时，它出现了两次。

这是我的完整设置。我有最新的firebase作为这篇文章（9.12.1）

// firebase-messaging-sw.js file in the public folder
   
importScripts(
      "https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js"
    );
importScripts(
      "https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging-compat.js"
    );
// Initialize Firebase
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
});
const messaging = firebase.messaging();

    
messaging.onBackgroundMessage(function (payload) {
// Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
  body: payload.notification.body,
  icon: "/icon.png",
};

self.registration.showNotification(notificationTitle, notificationOptions);
});

字符串
我在网上看到一些帖子在service worker中提供了onBackgroundMessage，但我尝试将其注解掉，它似乎解决了通知出现两次的问题。
接下来是一个firebase.js文件，我使用它检索令牌并随后侦听前台通知。

// firebase.js in same location with main.js
    
import firebase from "firebase/compat/app";
import { getMessaging } from "firebase/messaging";
    
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};
    
const app = firebase.initializeApp(firebaseConfig);
export default getMessaging(app);

型
然后在main.js中，

import App from "./App.vue";
import firebaseMessaging from "./firebase";

const app = createApp(App)
app.config.globalProperties.$messaging = firebaseMessaging; //register as a global property

型
最后，在App.vue中（或者任何你想获取令牌并发送到服务器端的地方）.

import {getToken, onMessage} from "firebase/messaging";

export default {
  mounted() {
    getToken(this.$messaging, {
      vapidKey:
        "XXX-XXX",
    })
      .then((currentToken) => {
        if (currentToken) {
          console.log("client token", currentToken);
          onMessage(this.$messaging, (payload) => {
            console.log("Message received. ", payload);
          });
          
          //send token to server-side
        } else {
          console.log(
            "No registration token available. Request permission to generate one"
          );
        }
      })
      .catch((err) => {
        console.log("An error occurred while retrieving token.", err);
      });
  }
}

型
当然不要忘了vapidKey。花了一分钟，但它工作得很好。
现在，我不提供任何关于前台通知应该是什么样子的意见，所以我只是记录有效负载。但请随意显示它，无论你认为合适。